抓住小程序风口_js完成简略的随机点名器

js实现简单的随机点名器     作者：「已注销」   这篇文章主要为大家详细介绍了js实现简单的随机点名器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1.0" 
 meta http-equiv="X-UA-Compatible" content="ie=edge" 
 title Document /title 
 style 
 .box {
 width: 200px;
 height: 200px;
 line-height: 200px;
 background-color: #ccc;
 font-size: 30px;
 text-align: center;
 /style 
 /head 
 body 
 div 此乃点名器 /div 
 input type="button" value="点名" id="btn" 
 !-- button id="btn" 点名 /button -- 
 script 
 var btn = document.getElementById("btn");
 var box = document.getElementsByClassName("box")[0];
// 3、写一个随机抽名的案例？（点击按钮开启定时器，
// 定时器中去随机抽取人名，把全班的人放在一个数组中，只要想办法获取随机的索引号就可以）
 btn.onclick = function() {
 if(this.value==="点名") {
 function fn() {
 var arr = ["张三","李四","王五","赵六","黑七","白八","紫九","红薯"];
 var index = parseInt(Math.random()*arr.length);
 var n1 = parseInt(Math.random()*255+1);
 var n2 = parseInt(Math.random()*255+1);
 var n3 = parseInt(Math.random()*255+1);
 box.style.background ="rgb("+n1+","+n2+","+n3+")" ;
 box.innerHTML = arr[index]; 
 this.value = "停止";
 //定时器不加var声明，涉及到作用域问题 
 timer=setInterval(fn,2);
 }else {
 clearInterval(timer);
 this.value = "点名";

效果图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。