1、對象構造函數 設置節點與人名 2、生成隨機對象 3、開始事件 4、結束事件 代碼下載地址:https://pan.baidu.com/s/1DgOWML9OoOoA2fiddeYCTQ ...
1、對象構造函數
設置節點與人名
constructor({ printElement, startElement, stopElement , person }) { this.list = person; this.printElement = printElement; this.startElement = startElement; this.stopElement = stopElement; this.interval = null; this.time = 100; }
2、生成隨機對象
/** * 隨機人名 */ random(){ // 獲取區間範圍內的數據 let num = Math.floor(Math.random() * this.list.length); return this.list[num] }
3、開始事件
/** * 開始 */ start() { let [startNode, printNode, index] = [ document.getElementById(this.startElement), document.getElementById(this.printElement) ] startNode.addEventListener("click", (event) => { this.interval = setInterval((event) => { printNode.textContent = this.random(); }, this.time, printNode); }, false); }
4、結束事件
/** * 停止 */ stop() { let node = document.getElementById(this.stopElement); node.addEventListener('click', (event) => { clearInterval(this.interval); }, false); }
代碼下載地址:https://pan.baidu.com/s/1DgOWML9OoOoA2fiddeYCTQ