~关注我 带你看更多精品技术和面试必备 么么哒 点个赞呗!
1、使用 HTML+CSS 布局出如上图所示的随机点名器页面。
2、嵌入 JS 代码，定义要随机姓名数组变量，并初始化姓名信息。
3、为开始按钮添加点击事件，并编写定时器程序，随机显示姓名信息。
4、编写停止按钮事件处理程序，终止定时程序并显示随机出来的姓名信 息，最后完成输出。
话不多说 直接上代码 非常简单 直接开源把他
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机点名器</title>
<style type="text/css">
#parent {
background-color: orangered;
height: 500px;
border-radius: 10px;
width: 700px;
margin: 100px auto;
position: relative;
}
#box {
margin: auto;
width: 400px;
font-size: 66px;
border: 1px solid black;
font-weight: bold;
height: 94px;
border-radius: 20px;
text-align: center;
background-color: antiquewhite;
position: absolute;
margin-top: 100px;
margin-left: 140px;
}
#bt {
margin: auto;
border-radius: 10px;
background-color: green;
width: 200px;
text-align: center;
margin-top: 300px;
margin-left: 240px;
color: #070000;
font-weight: bold;
font-size: 25px;
cursor: pointer;
}
</style>
<script type="text/javascript">
var namelist = ["张旭", "扈俊睿", "赵好冲", "赵六", "孙七"];
var mytime = null;
function doit() {
var bt = window.document.getElementById("bt");
if (mytime == null) {
bt.style.backgroundColor = "#ff0000";
bt.innerHTML = "停止";
show();
} else {
bt.style.backgroundColor = "#00a03e";
bt.innerHTML = "开始";
clearTimeout(mytime);
mytime = null;
}
}
function show() {
var box = window.document.getElementById("box");
var num = Math.floor((Math.random() * 100000)) % namelist.length;
box.innerHTML = namelist[num];
mytime = setTimeout("show()", 10);
}
</script>
</head>
<body>
<div id="parent">
<div id="box">随机点名器</div>
<button id="bt" onclick="doit()">开始</button>
</div>
</body>
</html>
