<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
margin: 0 auto;
font-size: 18px;
}
.big {
width: 500px;
height: 400px;
border: 1px solid gray;
text-align: center;
line-height: 400px;
}
.small {
text-align: center;
margin-top: 50px;
}
button {
height: 100px;
width: 140px;
}
</style>
</head>
<body>
<div class="big">点名</div>
<div class="small"><button>开始</button></div>
<script>
let button = document.querySelector("button")
let div = document.querySelector(".big")
// 获取元素
let flag = false
// 先设一个错
let arr = ["西施", "马超", "曜", "云中君", "瑶", "猪八戒", "嫦娥", "伽罗", "盾山", "司马懿", "孙策", "元歌", "米莱狄", "狂铁", "弈星", "裴擒虎",
"杨玉环", "公孙离", "明世隐", "女娲", "梦奇", "苏烈", "百里玄策", "百里守约", "铠", "鬼谷子", "干将莫邪", "东皇太一", "大乔", "黄忠", "诸葛亮",
"哪吒", "太乙真人", "蔡文姬", "雅典娜", "杨戬", "成吉思汗", "钟馗", "虞姬", "李元芳", "张飞", "刘备", "后羿", "牛魔", "孙悟空", "亚瑟", "橘右京",
"娜可露露", "不知火舞", "张良", "花木兰", "兰陵王", "王昭君", "韩信", "刘邦", "姜子牙", "露娜", "程咬金", "安琪拉", "貂蝉", "关羽", "老夫子",
"武则天", "项羽", "达摩", "狄仁杰", "马可波罗", "李白", "宫本武藏", "典韦", "曹操", "甄姬", "夏侯惇", "周瑜", "吕布", "芈月", "白起", "扁鹊",
"孙膑", "钟无艳", "阿轲", "高渐离", "刘禅", "庄周", "鲁班七号", "孙尚香", "嬴政", "妲己", "墨子", "赵云", "小乔", "廉颇"]
// 设一个数组
button.addEventListener("click", function () {
// 点击事件
flag=!flag
// 点击反向
if (flag) {
// 若为真
time1=setInterval(function () {
// 定时器
div.innerHTML = arr[Math.floor(Math.random() * (arr.length-1)+1)]
// 随机数匹配数组
}, 7)
this.innerHTML = "停!"
// 改变按钮
console.log(flag);
}
if(!flag) {
// 若假
console.log(111);
div.innerHTML = arr[Math.floor(Math.random() * 9 + 1)]
// 当前随机数
clearInterval(time1)
// 停止定时器
this.innerHTML = "开始"
// 改变按钮
console.log(flag);
}
}
)
</script>
</body>
</html>