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 相关文章推荐
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
vue iview实现动态新增和删除
Jun 17 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获取本周第一天和最后一天示例代码
2014/02/24 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python实现按任意键继续执行程序
2016/12/30 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python读取LMDB中图像的方法
2018/07/02 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
设计总监岗位职责
2013/12/07 职场文书
读书月活动方案
2014/05/22 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
企业领导对照检查材料
2014/08/20 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
银行授权委托书样本
2014/10/13 职场文书
英文自荐信范文
2015/03/25 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB