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>