HTML+CSS+JavaScript 来实现随机点名器
话不多说，直接开整
第一张图是随机点名器的初始页面
当点击开始按钮时，JS 程序中提前准备好人员（数组）名单
var arr = ["张三","李四","王五","赵六","黑七","白八","紫九","红薯"]
随机变换跳动显示，开始按钮变成了停止按钮，如第二张图显示，
当点击停止按钮时，名字的随机变换跳动停止，显示出的名字即为随机点击出来的姓名，如第三张图所示。
代码在此：
<script>
var arr = ["张三","李四","王五","赵六","黑七","白八","紫九","红薯"];
var mytime = null;
var flag1;
btn.style.backgroundColor = "#00ff00"
function ramdom(){
if(mytime == null){
mytime = 1;
flag1=window.setInterval("ramdomName()",10);
btn.innerHTML = '停止';
btn.style.backgroundColor = "red"
}else{
window.clearInterval(flag1);
btn.innerHTML = '开始';
mytime = null;
btn.style.backgroundColor = "#00ff00"
}
}
function ramdomName(){
var btn = document.getElementById("btn");
var msg = document.getElementById("name");
var index = parseInt(Math.random()*arr.length);
msg.innerHTML = arr[index];
}
</script>
页面布局和css样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机点名器</title>
<style>
.box {
width: 300px;
height: 200px;
background-color:orangered;
font-size: 30px;
border-radius: 10px;
}
.innerbox{
position: absolute;
top: 60px;
left: 170px;
width: 200px;
height: 50px;
border-radius: 10px;
background-color:grey;
font-size:30px;
font-weight: bold;
}
.button{
position: absolute;
top: 140px;
left: 250px;
}
</style>
</head>
<body>
<div align="center">
<div class = "box" >
<div >
<p class = "innerbox" id ="name" >随机点名器</p>
</div>
<div class="button" >
<button onclick="ramdom()" id="btn" type="button" >开始</button>
</div>
</div>
</div>
</body>
</html>
具体的实现过程就不多说了，感兴趣的小伙伴可以去学习下css和html以及javascript都是很容易上手切很有成就感的哦