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 相关文章推荐
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
vue 中swiper的使用教程
May 22 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
js实现tab栏切换效果
Aug 02 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
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 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
python对html代码进行escape编码的方法
2015/05/04 Python
django表单的Widgets使用详解
2019/07/22 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
HTML5标签小集
2011/08/02 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
大学三年的自我评价
2013/12/25 职场文书
捐书活动总结
2014/05/04 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js