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 相关文章推荐
基于jQuery的前端数据通用验证库
Aug 08 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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/15 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
php 如何获取数组第一个值
2013/08/06 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
xml转json的js代码
2012/08/28 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
详解Python中is和==的区别
2019/03/21 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
应聘编辑职位自荐信范文
2014/01/05 职场文书
会计的岗位职责
2014/03/15 职场文书
优秀党员推荐材料
2014/12/18 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL
Python使用DFA算法过滤内容敏感词
2022/04/22 Python