javascript 实现简单点名器
- 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>