洗碗拼手气 （点名器）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机洗碗点名器</title>
<style>
.box{
width: 350px;
height: 130px;
padding: 25px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -175px;
margin-top: -75px;
border: 1px solid #000;
}
.name{
height: 70px;
border: 1px solid #ccc;
text-align: center;
font-size: 30px;
font-weight: 700;
line-height: 70px;
}
.btn{
margin-top: 15px;
height: 45px;
width: 100%;
font-size: 25px;
outline: none;
cursor: pointer;
font-family: "Microsoft YaHei";
}
</style>
</head>
<body>
<div class="box">
<div class="name" id="name">洗碗点名器</div>
<button class="btn" id="btn" onclick="gotoRun()">开 始</button>
</div>
<script>
var nameLi = ['小朋友洗碗', '颖姐姐洗碗', '老霍洗碗', '燃哥哥洗碗', '冯姐姐洗碗'];
// 声明时间变量
var timer = null;
function gotoRun () {
// 获取button元素
var button = document.getElementById('btn');
// 判断是开始还是结束
if (timer === null) {
// 开启定时
timer = setInterval(getName, 100);
// 把button的内容改掉
button.innerHTML = "暂停";
} else {
clearInterval(timer);
button.innerHTML = "开始";
timer = null;
}
}
function getName() {
var index = Math.floor(Math.random() * nameLi.length) ;
document.getElementById("name").innerHTML = nameLi[index];
}
</script>
</body>
</html>
