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. Docker学习笔记-两种发布方式

    第一种,自己手写dockerfile发布,上传至hubDocker 正常发布到文件夹中,发布文件上传至linux机器上.如 /www/app 将Dockerfile文件也复制到同目录 ./www/ap ...

  2. Git使用详细教程(3):git add, git commit详解

    在使用git之前,我们首先要初始化一个git管理的仓库,这里以博客(blog)为例 git init blog 我们进入目录,执行git status查看git状态,可以看到一个新的git管理的项目目 ...

  3. Spark基础-scala学习(四、函数式编程)

    函数式编程 将函数赋值给变量 匿名函数 高阶函数 高级函数的类型推断 scala的常用高阶函数 闭包 sam转换 currying函数 return 将函数赋值给变量 scala中的函数是一等公民,可 ...

  4. 我面试过没有上万人也有十几个,简历要这么写才有hr要你

    今天终于有时间好好给大家写写关于如何写简历,给自己加分了. 这篇文章拖了很久了应该说,本来想在上周写的,但是事情实在是太多,又不想草草了事,所以搁置到现在.今天早上正好空出来了,就马上给大家码出来了. ...

  5. 基于 Consul 实现 MagicOnion(GRpc) 服务注册与发现

    0.简介 0.1 什么是 Consul Consul是HashiCorp公司推出的开源工具,用于实现分布式系统的服务发现与配置. 这里所谓的服务,不仅仅包括常用的 Api 这些服务,也包括软件开发过程 ...

  6. Linux编程 18 安装软件程序(yum工具对软件包安装,删除,更新介绍)

    一.   概述 本篇介绍在linux上见到的各种包管理系统(package management system,PMS)用来进行软件安装,管理,删除的命令行工具.PMS是利用一个数据库来记录各种相关内 ...

  7. 介绍 JSON(摘自网络)

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Programming Lan ...

  8. Netty源码分析(五):EventLoop

    上一篇主要介绍了一下EventLoopGroup,本篇详细看下它的成员EventLoop. 类结构 NioEventLoop继承自SingleThreadEventLoop,而SingleThread ...

  9. leetcode — search-for-a-range

    import java.util.Arrays; /** * Source : https://oj.leetcode.com/problems/search-for-a-range/ * * Cre ...

  10. 深度解读阿里巴巴云原生镜像分发系统 Dragonfly

    Dragonfly 是一个由阿里巴巴开源的云原生镜像分发系统,主要解决以 Kubernetes 为核心的分布式应用编排系统的镜像分发难题.随着企业数字化大潮的席卷,行业应用纷纷朝微服务架构演进,并通过 ...