<!doctype html> <title>点名器</title> <meta charset="utf-8"> <style> #box{ width:400px; height:200px; background:#ff6699; margin:100px auto auto auto; text-align:center; line-height:200px; font-size:40px; color:#fff; } #btn{ margin:10px auto; width:200px; height:50px; background:#66ff99; font-size:30px; text-align:center; line-height:50px; } </style> <div id="box">汤俊</div> <div id="btn">开始</div> <script> /* 1.点击按钮 box的文字发生变化 取数组中随机名字 setInterval 2.点击 停止 3.多次点击Bug问题 */ var box=document.getElementById('box'); var btn=document.getElementById('btn'); console.log(box); //声明姓名数组 var arr=['珍珍','苗苗','桂芝','畅晓','李新','晓新','张磊','碧娇','倩倩','苏苌','刘伟','潘闯','翡翠','元宝','宏天','皓宇','春芳']; console.log(arr); //声明布尔 var bool=true; //点击事件 btn.onclick=function(){ if(bool){ //重新赋值 false bool=false; timer=setInterval(function(){ //找 arr下标 随机数 var index=rand(0,arr.length-1); console.log(index); //box 赋值 box.innerHTML=arr[index]; },50); //开始文字重新赋值 this.innerHTML='暂停'; }else{ //重新赋值 bool=true; //清除定时器 clearInterval(timer); //开始文字重新赋值 this.innerHTML='开始'; } } // 0 17 function rand(m,n){ return Math.floor(Math.random()*(n-m+1)); } </script>
js教程
js随机点名效果
精准像素
2021-06-27
共人阅读
上一篇:正则表达式匹配任意字符语法
下一篇:JS复制百度文库内容方法
相关推荐
- js随机
-
javascript制作随机样式标签云方法
精准像素分享一段超简单的javascript随机样式标签云方法,比网上那些长篇大论的简单好理解多了,一看就懂,效果如下。JS代码$(".tags a").each(function(){var x = 5;var y = 9;var rand = parseInt(M...
-
js随机点名效果
<!doctype html><title>点名器</title><meta charset="utf-8"><style> #box{ width:400px; height:200px; background:#ff6699; margin:100px auto auto auto; text-align:center; line-h...