随机点名
要求:
当点击开始按钮时,名单会随机变换跳动显示,开始按钮变成了停止按钮;
当点击停止按钮时,名字的随机变换跳动停止,显示出的名字即为随机点击出来的姓名,达到随机点名效果。
思路:
1、使用 HTML+CSS 布局出随机点名系统的页面。
2、嵌入 JS 代码,定义要随机姓名数组变量,并初始化姓名信息。
3、为开始按钮添加点击事件,并编写定时器程序,随机显示姓名信息。
4、编写停止按钮事件处理程序,终止定时程序并显示随机出来的姓名信息,最后完成输出。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 设置点名器位置居中 */
.box {
width: 200px;
margin: auto;
margin-top: 20px;
}
/* 设置点名区域 */
.box div {
background: pink;
color: #fff;
width: 100%;
height: 80px;
text-align: center;
line-height: 80px;
font-size: 18px;
}
/* 设置按钮区域 */
.box button {
width: 100%;
height: 35px;
text-align: center;
margin-top: 10px;
border: 0px;
background: grey;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<div id="realname">准备点名</div>
<button onclick="call()" id="btn">开始</button>
</div>
<script>
var realnames = ["张三", "李四", "王五", "赵六", "陆七"];
var realname = document.getElementById("realname");
var flag = false;
var btn = document.getElementById("btn");
function call() {
// flag标记true和false实现按钮的“开始”和“暂停”
flag = !flag;
if (flag) {
//设置定时器setinterval(),实现自动点击的效果
window.myInter = setInterval(function () {
// Math.random()获取到一个随机数、Math.floor()向下取整
var num = Math.floor(Math.random() * realnames.length);
realname.innerHTML = realnames[num];
}, 100);
// 修改按钮为停止
btn.innerText = "停止";
}else {
// 清除定时器
clearInterval(window.myInter);
// 修改按钮为开始
btn.innerText = "开始";
}
}
</script>
</body>
</html>
效果: