js实现随机点名功能_js教程

js实现随机点名功能

2021-12-16 15:46等待的L先生 js教程

这篇文章主要为大家详细介绍了js实现随机点名功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>