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

日期:2021-01-05 类型:科技新闻 

关键词:凡科自助建站,企业网站怎么建设,智能建站系统,自己建个网站,搭建网站基本步骤

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 = "点名";

效果图如下:

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