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 随机点名的更多相关文章

  1. js随机点名

    定时器案例. <!-- Author: XiaoWen Create a file: 2016-12-08 12:27:32 Last modified: 2016-12-08 12:51:59 ...

  2. js随机点名系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JS: 随机点名程序与万年历

    随机点名程序 document.write(Math.random()); var stu = ["张三", "王五", "张二", &qu ...

  4. 原生JS实现简易随机点名功能

    定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...

  5. js - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

  6. 原生js实现简单的随机点名系统

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  7. javascript随机点名--案例

    主要知识点涉及if选择结构判断语句.数组的定义.定时器.清除定时器.日期对象的使用. 1.HTML结构 <!DOCTYPE html> <html> <head> ...

  8. js 随机星星 document.createElement(); setAttribute()

    js 随机星星 document.createElement(); setAttribute() <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  9. js随机更换

    如果想实现“随机”切换图像,那么我们要使用到几个Math()对象 第一个是random()函数,函数的功能是产生随机数,如果书写为 var a=Math.random() 那么所产生的随机数是0-1( ...

随机推荐

  1. Kali学习笔记17:OpenVAS安装部署

    正式介绍OpenVAS之前先说一些题外话 1.有一个网站记录了很多的漏洞: https://www.exploit-db.com/ 可以下载利用 2.如果觉得从网上寻找太麻烦,Kali自带工具:sea ...

  2. 开源深度学习架构Caffe

    Caffe 全称为 Convolutional Architecture for Fast Feature Embedding,是一个被广泛使用的开源深度学习框架(在 TensorFlow 出现之前一 ...

  3. Informatica

    安装 相关专题 关于Bulk加载模式 性能调优 性能瓶颈 性能瓶颈概览 性能瓶颈之Target 性能瓶颈之Source 性能瓶颈之Mapping 性能瓶颈之Session 性能瓶颈之System 性能 ...

  4. Object.defineProperty方法

    Object.defineProperty() (一次添加/修改一个属性) 用法:Object.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一 ...

  5. (转载)java内存模型

    java并发采用的是共享内存模型,线程之间的通信对程序员来说是透明的,内存可见性问题很容易困扰着java程序员,今天我们就来揭开java内存模型的神秘面纱. 在揭开面纱之前,我们需要认识几个基础概念: ...

  6. pip install 安装出现问题:UnicodeEncodeError: 'ascii' codec can't encode characters in position XX的解决办法

    pip install 安装出现问题:UnicodeEncodeError: 'ascii' codec can't encode characters in position XX的解决办法 转自c ...

  7. ubuntu mysql Access denied for user root@localhost

    解决办法: 1. vim mysqld.cnf  路径:/etc/mysql/mysql.conf.d 在[mysqld]下添加skip-grant-tables 2. 重启mysql服务 servi ...

  8. Spring Security + OAuth系统环境搭建(一)

    最近在做权限管理系统的重构工作,系统基于Spring Security + OAuth架构,整体架构.技术和之前调研的结果差不多,架构调研时有在这篇博客做过简单记录“Spring Cloud微服务下的 ...

  9. 支付宝PC端单笔支付同步回调session失效问题

    一次调用支付宝PC场景下单笔支付之后同步回调遇到的session失效问题记录 问题描述: 调用支付宝接口:alipay.trade.page.pay,该接口请求参数中有两个返回地址需要设置,retur ...

  10. 字符串不相同出现相同HashCode(算法)

    转自:https://blog.csdn.net/fly_grass_fish/article/details/81742794 在Java中有HashCode的说法,以前以为HashCode是唯一的 ...