js实现点名器功能
代码：
- css样式
<style>
.box{
width: 350px;
height: 300px;
background-color: antiquewhite;
margin: 0 auto;
text-align: center;
}
#names{
width: 260px;
height: 260px;
line-height: 260px;
background-color: aquamarine;
margin: 0 auto;
font-size: 32px;
color: red;
}
</style>
- body部分
<body>
<div class="box">
<div id="names">点名了！！</div>
<button onclick="start()">开始</button>
<button onclick="end()">停止</button>
</div>
- script部分
<!-- 随机点名效果 -->
<script>
var names = document.getElementById('names');
var timeId;
//封装的事随机显示名字的代码
function start(){
//数组，存放学生的名字
var arr = ['亚瑟','不知火舞','安琪拉','貂蝉','鲁班七号'];
timeId = setInterval(function(){
//随机从数组里去元素
var num = parseInt(Math.random() *arr.length)
names.innerHTML=arr[num];
},200)
}
function end(){
clearInterval(timeId);
}
</script>
</body>