保持对代码的热爱并保存怀疑态度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 200px;
height: 200px;
border: 2px saddlebrown solid;
margin: auto;
text-align: center;
line-height: 200px;
}
#btn{
width: 200px;
height: 50px;
margin: 0 auto;
display: block;
text-align: center;
}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" name="" id="btn" value="开始">
</body>
<script>
var box=document.getElementById("box");
var btn=document.getElementById("btn");
var arr = ["扁鹊","西施", "曜", "云中君", "瑶", "猪八戒", "伽罗","嫦娥", "盾山", "孙策", "元歌", "米莱狄", "狂铁", "弈星", "裴擒虎",
"杨玉环", "公孙离", "明世隐", "女娲", "梦奇", "苏烈", "百里玄策", "百里守约", "铠","司马懿", "鬼谷子", "干将莫邪", "东皇太一", "大乔", "黄忠",
"哪吒", "太乙真人", "蔡文姬", "雅典娜", "杨戬","鲁班七号", "成吉思汗", "钟馗", "虞姬", "李元芳", "张飞", "刘备", "后羿", "牛魔", "孙悟空", "亚瑟", "橘右京","王昭君", "花木兰", "露娜","貂蝉","刘禅","娜可露露", "不知火舞", "张良", "韩信", "刘邦", "姜子牙", "程咬金", "安琪拉", "关羽", "老夫子","武则天", "项羽", "达摩", "狄仁杰", "马可波罗", "诸葛亮","李白","马超", "宫本武藏", "典韦", "曹操", "甄姬", "夏侯惇", "周瑜", "吕布", "芈月", "白起", "庄周","孙膑", "钟无艳", "阿轲", "高渐离", "孙尚香", "嬴政", "妲己", "墨子", "赵云", "小乔", "廉颇","澜"
];
var x;
var a=0; //开始时的状态
btn.onclick=function(){
if(a===0){
clearInterval(x); //清除计算器 为了不让重复触发
x=setInterval(function(){
var round=Math.round(Math.random()*arr.length-1); //生成随机
box.innerHTML=arr[round]
},30);
a=1;
}else if(a===1){
clearInterval(x);
a=0;
}
}
</script>
</html>