zoukankan      html  css  js  c++  java
  • js 随机点名

     

    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

  • 相关阅读:
    数组去重
    css盒模型
    px、em、rem的区别
    Html5新标签
    弹性布局
    相对定位与绝对定位
    Hadoop综合大作业
    分布式文件系统HDFS 练习
    安装Hadoop
    爬虫综合大作业
  • 原文地址:https://www.cnblogs.com/whnba/p/10199214.html
Copyright © 2011-2022 走看看