下面是我在无聊时候写的一个点名器的代码,很点单,最简单的点名器纯html+css+js,希望可以帮助到你
<!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>