[HTML] 纯文本查看 复制代码 <!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> | 
[复制链接]
发表于 2021-6-26 19:27
