原生js-簡易點名冊實現
阿新 • • 發佈：2018-12-05
本人前端新手，最近實現了基於js點名冊的簡單實現，方便快捷，現在直接上程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } #box{ margin: 50px auto;width: 300px; background: #e8e8e8; padding-top: 50px; box-sizing: border-box; } #name{ text-align: center; /*display: block;*/ } #name{ color: #0000FF; font-size: 25px; } #box_bottom{ display: flex; justify-content: space-around; align-items: center; height: 200px; } button{ text-align: center; width: 50px; height: 50px; } </style> </head> <body> <divid="box"> <p id="name"></p> <div id="box_bottom"> <button id="begin">開始</button> <button id="end">結束</button> </div> </div> <script> window.onload=function () { //1.定義變數與定時器 var timer=null; var nameArr=['小林','小楊','小黃','小樑']; //2.獲取當前操作物件 var name=document.getElementById('name'); var begin=document.getElementById('begin'); var end=document.getElementById('end'); // var i=0; //3.操作初始化 name.innerText=nameArr[0]; //4.設定button1定時器 begin.onclick=function () { //4.1清除定時器 clearInterval(timer); timer=setInterval(function () { //4.2設定隨機數，規定隨機開始 var index=Math.floor(Math.random()*nameArr.length); // console.log(index); name.innerHTML=nameArr[index]; },200); }; //5.設定button2定時器 end.onclick=function () { //4.1清除定時器 clearInterval(timer); } } </script> </body> </html>
效果如下：
