前端——JS之定時器的小案例（1）
阿新 • • 發佈：2019-01-08
定時器點名小案例（抽獎遊戲也同理）&&詳細註釋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head> <body> <div id="wrap"> <div id="btn"> <button id="star">開始</button> <button id="stop">停止</button> </div> <div id="conter" > </div> </div> <script> //宣告變數，把定時器賦值給timer 方便清除定時器 var timer; // 把全部名字存在陣列中 var java14=['圳章','陳大志','餘澤敏','呂先定','黃孔鈞','潘家葆','吳庭','嚴慶智','趙輝','覃文龍','黃錦渝','訾海','何一軒','劉強','覃愛的','張是','雷常程','黃家常','樊任','何仕奎','陳楚天','林傑成','刁強','黃富小','符為顯','楊浩棟','陸掃蕩彬','大d楠','謝為','姚全額傑','潘岳','吳於','馮斯','邱學強','林表','侯良中','俞霖','楊we','林為','謝定時','陳詩題','狄海霞','關堯斌','問琪'] // 寫一個一個函式，把document.getElementById()封裝起來，方便下次直接呼叫函式就可以 function aa(a){ return document.getElementById(a); } // 建立一個函式獲取陣列的索引值，通過索引值把陣列的值賦值給conter這個id的標籤，就是讓這些名字顯示在網頁上 function test(){ //獲取索引值， var num =parseInt(Math.random()*java14.length) // 獲取到的索引值，通過索引值獲取到陣列的值，之後把陣列的值賦值給conter這個id的標籤 document.getElementById('conter').innerHTML=java14[num] } // 建立一個函式 把定時器封裝起來，等下次直接呼叫就可以 ，不用重新寫。 function go(){ // 把定時器賦值給timer 方便清除定時器 timer=setInterval(test,1000) } // 建立一個點選事件 aa('star').onclick=function(){ // 使用定時器之前需要先清除定時器，因為定時器會疊加 ，當連續開啟定時器的時候，速度會翻倍， //也停不下來。在這裡效果就是當連續點選開始這個按鈕，速度變快， //並且點選停止 不能停下來，這就是定時器疊加，所以使用定時器之前需要先清除定時器 clearInterval(timer)//清除定時器 go();//呼叫定時器 } //當點選到停止按鈕的時候清除按鈕就不會動了 aa('stop').onclick=function(){ clearInterval(timer) } </script> </body> </html>