JavaScript写一个随机点名网页
实现效果如下图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
border: 1px solid black;/*设置盒子的边框和颜色*/
width: 500px;
height: 500px;
margin: 100px auto;/*离顶部200px，并且居中*/
background-color: #000000;/*盒子的背景颜色*/
position: relative;/*定位*/
}
p{
width: 500px;
height: 200px;
text-align: center;/*将文本居中*/
line-height: 200px;/*设置行高*/
font-size: 80px;/*字体大小*/
color: #ffff00;
}
#anniu {
width: 200px;
height: 50px;
background-color:#00aaff;
position: absolute;
bottom: 100px;/*距离底部100px*/
left: 50%;
margin-left: -100px;
color: #ffffff;
font-size: 20px
}
</style>
</head>
<body>
<div id="box">
<p id="wenben">随机点名册</p>
<input type="button" value="开始点名" id="anniu">
</div>
</body>
<script>
var wenben = document.getElementById("wenben")
var anniu = document.getElementById("anniu")
var timer //定义计时器
var arr = ['刘一','陈二','张三','李四','王五','赵六','孙七','周八','吴九','郑十']
var test = true
anniu.onclick = function() {
if (test) {
start()
anniu.innerHTML = "结束"
test = false
} else {
stop()
anniu.innerHTML = "开始"
test = true
}
}
function start() { /*开始*/
timer = setInterval(function random() {
var index = parseInt(Math.random() * arr.length)
wenben.innerHTML = arr[index]
}, 50);
}
function stop() { /*结束*/
clearInterval(timer)
}
</script>
</html>
