码迷,mamicode.com
首页 > Web开发 > 详细

js 随机点名

时间:2018-12-30 14:41:26      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:tin   text   span   停止   代码   index   doc   false   math   

 

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

js 随机点名

标签:tin   text   span   停止   代码   index   doc   false   math   

原文地址:https://www.cnblogs.com/whnba/p/10199214.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!