js实现随机点名程序


Posted in Javascript onSeptember 17, 2020

最近用到了一下随机点名程序,就自己整理一下。代码实现后的截图如下。

js实现随机点名程序

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>随机点名</title>
 <style>
  #content{
   width: 600px;
   height: 400px;
   background: #000;
   margin: 100px auto;
   text-align: center;
   position: relative;
   line-height: 300px;
   color: dodgerblue;
   font-size: 70px;
  } 
  #btn1{
   background: #ccc;
   width: 180px;
   height: 80px;
   font-size: 30px;
   color: #f40;
   border-radius: 12px;
   position: absolute;
   bottom: 30px;
   left: 50%;
   margin-left: -90px;
   
  }
 
 </style>
</head>
<body>
 <div id="content">
  <span id="span1">
   点击开始
  </span>
  <button id="btn1">
   start
  </button>

 </div>

 <script>
  var arr = ['中国','英国','德国','美国','意大利','法国','西班牙','日本','阿联酋','荷兰','葡萄牙'];
  var $btn1 = document.getElementById('btn1');
  var $content = document.getElementById('content');
  var $span1 = document.getElementById('span1');
  var timer;//计时器
  var testNum = true;
  $btn1.onclick = function(){
   if(testNum){
    // console.log(1);
    start();
    $btn1.innerHTML = 'stop';
    testNum = false;
   }
   else{
    // console.log(0);
    stop();
    $btn1.innerHTML = 'start';
    testNum = true;
   }
  }
  function start(){
    timer = setInterval(function(){
     var num = random(0,arr.length - 1);
     $span1.innerHTML = arr[num];
    },50)
  }
  function stop(){
    clearInterval(timer);  
  }
  // 随机函数
  function random(a,b){
   var randomNum = Math.round(Math.random() * (b - a) + a);
   return randomNum;
  }  
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 #Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 #Javascript
原生js实现随机点名功能
Nov 05 #Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 #Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 #Javascript
javascript如何实现create方法
Nov 04 #Javascript
关于vue里页面的缓存详解
Nov 04 #Javascript
You might like
人族 Terran 基本策略
2020/03/14 星际争霸
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
Python调用命令行进度条的方法
2015/05/05 Python
python针对excel的操作技巧
2018/03/13 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
python requests 测试代理ip是否生效
2018/07/25 Python
python面向对象法实现图书管理系统
2019/04/19 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
考试作弊被抓检讨书
2014/01/10 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
法制宣传月活动方案
2014/05/11 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
保外就医申请书范文
2015/08/06 职场文书
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
Python类方法总结讲解
2021/07/26 Python
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技
图神经网络GNN算法
2022/05/11 Python