随机抽奖
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机点名</title>
<style>
body{
text-align: center;
};
.icon-home2:before {
content: "\e901";
}
</style>
<script>
// 页面加载完成入口
window.onload = function () {
// 1. 获取标签 (数组)
var inputs = document.getElementsByTagName("input");
var h1 = document.getElementsByTagName("h1");
// 1.2 提供一个数组, 存储人名
var arr = ["张三", "李四", "王五", "赵六", "田七", "大八", "九九"];
// 定义一个 timer 变量
var timer;
// 2. 给 `走你` 按钮绑定单击事件
inputs[0].onclick = function () {
// 定时器的 bug, 开启新定时器之前, 必须先关闭就定时器.
window.clearInterval(timer);
// 3. 循环定时器
timer = window.setInterval(function () {
// 4. 生成一个随机下标
var index = window.parseInt(Math.random() * arr.length + "");
// 5. 根据下标取出对应的名称, 更换 h1 标签中的内容.
h1[0].innerHTML = arr[index];
}, 30);
}
// 给 `停止` 按钮绑定单击事件
inputs[1].onclick = function () {
window.clearInterval(timer);
}
}
</script>
</head>
<body>
<input type="button" value="走你!" />
<input type="button" value="停止!" />
<i class="icon-hua"></i>
<h1>等待抽奖!</h1>
</body>
</html>