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. 5.AutoCompleteTextView、自定义广播

    新建信息 布局:自动出来的是系统的组件,里面是listview,写ontextchanglis也行 <LinearLayout xmlns:android="http://schema ...

  2. IntelliJ IDEA 的下载和安装

    下载 官网地址:https://www.jetbrains.com/idea/ 直接点击 DOWNLOAD 下载 接下来跳转到一个页面,可以看到第一个红框中是选择操作系统的,IDEA分为收费的旗舰版和 ...

  3. Python find函数用法和概念

    概念: Python find() 方法检测字符串中是否包含子字符串 str ,如果指定 beg(开始) 和 end(结束) 范围,则检查是否包含在指定范围内,如果包含子字符串返回开始的索引值,否则返 ...

  4. sleep( ) 和 wait( ) 的这 5 个区别,你知道几个?

    sleep(休眠) 和 wait(等待) 方法是 Java 多线程中常用的两个方法,它们有什么区别及一些该注意的地方有哪些呢?下面给大家一一分解. 区别1:使用限制 使用 sleep 方法可以让让当前 ...

  5. 【转】CSS中的浮动和清除浮动

    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

  6. VP9 vs H.265——下一代视频编码标准的王道之争

    目前下一代主流的视频编码标准有 ITU-T VCEG 推出来的 H.265 和 Google 推出 VP9 . H.265 在 H.264 的基础上保留其中的部分技术,并对相关技术加以改进研发而成.新 ...

  7. Android--UI之ListView

    前言 今天讲解一下Android平台下ListView控件的开发,在本篇博客中,将介绍ListView的一些常用属性.方法及事件,还会讲解ListView在开发中常用的几种方式,以及使用不通用的适配器 ...

  8. springboot~让我习惯了TDD的开发模式

    TDD是什么 TDD就是测试驱动开发,以测试用例为主导,去开发项目,业务代码该怎么写还是怎么写,在实现UI之前,可以先实现Test用例,通过test来实现对业务场景的模拟,最终让你的代码更稳定. 大叔 ...

  9. Nginx里Header修改

    有时候,我们可能有修改Nginx默认Header的需求.本文就将常见的方法列出来供大家参考. 修改普通请求的Header Nginx内置的模块暂时仅支持修改响应头,使用add_header.其中: a ...

  10. SpringBoot2.0应用(三):SpringBoot2.0整合RabbitMQ

    如何整合RabbitMQ 1.添加spring-boot-starter-amqp <dependency> <groupId>org.springframework.boot ...