<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点名器</title>
<style>
*{
margin:0;
padding:0;
}
body {
background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
}
#name {
width: 300px;
height: 300px;
background:lightblue;
border:1px solid green;
border-radius:10px;
margin:50px auto;
font-size: 50px;
text-align:center;
line-height:300px;
}
.b2 {
margin-left:430px;
}
button {
margin-left:100px;
height:50px;
width:50px;
}
</style>
</head>
<body>
<div id="name">
开始点名
</div>
<div class="b2">
<button onclick="start()">开始</button>
<button onclick="end()">结束</button>
</div>
</body>
<script type="text/javascript">
// 声明变量
var time, // 计时器
div,
name; // 选中的用户名
div = document.getElementById('name');
// 创建一个数组用来存储数据
var name_list = ["倪萍","渠新宇","王继琳","张桓阁","高勤宝","余姚","李永忠","陈威","何春辉","施佳亮","张璐","卓越","周川莉","张元博","明仕鹏","罗昊","梁钰琦","蒋雪飞","徐霄晴","陈嘉皓","王凡","甘雨涛","许靓","冀云鹏","左文","王昭","范超","付艳琳","田林林","蔡宇飞","丁有为","张聪聪","张璐","刘晓玮","朱莹莹","董雪维","杨曦","史康","郝军","梁帧","何双清","马悦","唐杰","沈杰","明鸣","梁金鑫"];
function start(){
// 生成一个随机数
var num = Math.floor(Math.random() * name_list.length);
// 根据随机索引值来确定选中的姓名
name = name_list[num];
// 更改网页里div的值
div.innerHTML = name;
// Window setTimeout() 方法
time = setTimeout("start()",100);
}
function end() {
clearTimeout(time);
// clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
}
</script>
</html>