js实现随机点名功能


Posted in Javascript onDecember 23, 2020

本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下

效果:

js实现随机点名功能

PS:在原来的效果中很快的,但是不知怎么的录下来就变得这么慢了

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>随机点名</title>
  <style>
    .box{
      width: 800px;
      margin: 200px auto;
      text-align: center;
    }
    .box h2{
      font-size: 55px;


      font-weight: 800;
    }
    .box input{
      outline: none;
      border: none;
      background: blue;
      color: white;
      width: 100px;
      height: 50px;
      font-size: 15px;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div class="box">
    <h2 id="res">请点击下面的按钮,开始抽奖!</h2>
    <input type="button" value="点击开始" id="btn">
  </div>
  
  <script>
   var btn=  document.getElementById("btn");
   var res=  document.getElementById("res");
    var student=["张三","李四","王二","麻子","小明","小王","小胡","小虎","狗子","多银币","贡子哥","刘青松","瞎子","亚索"]
  
    var flag=true;
    var timer=null;
    //
    btn.onclick=function(){
     
      
      if(flag){
        timer= setInterval(function(){
         var index= getRandom(student.length-1,0) ;

         
         res.innerHTML=student[index];
         
         
        },10);
        
        btn.value="点击结束";
        flag=false;
      }else{
        clearInterval(timer);
        btn.value="点击开始";
        flag=true;
      }
      
    }


    function getRandom(max,min){
      
     return Math.round(Math.random()*(max-min)+min);
    }
  </script>
</body>
</html>

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

Javascript 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 #jQuery
vue下拉刷新组件的开发及slot的使用详解
Dec 23 #Vue.js
jquery实现图片放大镜效果
Dec 23 #jQuery
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 #Javascript
jQuery实现增删改查
Dec 22 #jQuery
jQuery实现本地存储
Dec 22 #jQuery
jQuery实现电梯导航模块
Dec 22 #jQuery
You might like
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
如何解决python多种版本冲突问题
2020/10/13 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
python实现控制台输出颜色
2021/03/02 Python
房屋出售协议书
2014/04/10 职场文书
售房协议书范本2014
2014/10/23 职场文书
岳庙导游词
2015/02/04 职场文书
女性健康讲座主持词
2015/07/04 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
Golang解析JSON对象
2022/04/30 Golang