闲话少说,直接上代码。
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>随机点名</title>
<!-- 这里用来设置样式 -->
<style>
/* 定义一个显示盒子 */
.di {
height: 200px;
width: 200px;
background-color: coral;
line-height: 200px;
/* 文字居中显示 */
text-align: center;
/* 文字颜色 */
color: white;
/* 使盒子居中 */
margin: 0 auto;
/* 设置字体大小 */
font-size: 50px;
}
/* 设置按钮居中显示 */
.bu {
width: 151px;
margin: 0 auto;
/* margin-top设置上外边距 */
margin-top: 20px;
}
/* 设置按钮样式 */
button {
height: 50px;
width: 70px;
}
</style>
<!-- JS部分,控制界面交互 -->
<script type="text/javascript">
//在这里定义一个数组,用于存储名字
var names = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
// 定义一个定时器interval
var interval;
// 这里是一个函数,当这个函数被点击时,将会启动定时器
function startName() {
// setInterval()定时器,需要设置两部分,功能和时间(单位为毫秒),中间用英文逗号隔开
interval = setInterval(function() {
// Math.random() 获取随机数
// names.length 获取names数组大小
// names.length - 1 因为数组是从零开始,所以减去1
var number = Math.random() * (names.length - 1);
// Math.round(number) 取整
number = Math.round(number);
// 打印输出
document.getElementById("show").innerText = names[number];
}, 10);
}
function end() {
// clearInterval(interval) 清除定时器
clearInterval(interval);
}
</script>
</head>
<body>
<!-- 设置一个空盒子 -->
<div class="di" id="show">
<!-- 这里打印内容 -->
</div>
<div class="bu">
<button onclick="startName()">开始</button>
<button onclick="end()">结束</button>
</div>
</body>
</html>
好吧,这个功能太简单了,不会被笑话吧?