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
js 随机点名的更多相关文章
- js随机点名
定时器案例. <!-- Author: XiaoWen Create a file: 2016-12-08 12:27:32 Last modified: 2016-12-08 12:51:59 ...
- js随机点名系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS: 随机点名程序与万年历
随机点名程序 document.write(Math.random()); var stu = ["张三", "王五", "张二", &qu ...
- 原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...
- js - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽
面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...
- 原生js实现简单的随机点名系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- javascript随机点名--案例
主要知识点涉及if选择结构判断语句.数组的定义.定时器.清除定时器.日期对象的使用. 1.HTML结构 <!DOCTYPE html> <html> <head> ...
- js 随机星星 document.createElement(); setAttribute()
js 随机星星 document.createElement(); setAttribute() <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- js随机更换
如果想实现“随机”切换图像,那么我们要使用到几个Math()对象 第一个是random()函数,函数的功能是产生随机数,如果书写为 var a=Math.random() 那么所产生的随机数是0-1( ...
随机推荐
- Kali学习笔记17:OpenVAS安装部署
正式介绍OpenVAS之前先说一些题外话 1.有一个网站记录了很多的漏洞: https://www.exploit-db.com/ 可以下载利用 2.如果觉得从网上寻找太麻烦,Kali自带工具:sea ...
- 开源深度学习架构Caffe
Caffe 全称为 Convolutional Architecture for Fast Feature Embedding,是一个被广泛使用的开源深度学习框架(在 TensorFlow 出现之前一 ...
- Informatica
安装 相关专题 关于Bulk加载模式 性能调优 性能瓶颈 性能瓶颈概览 性能瓶颈之Target 性能瓶颈之Source 性能瓶颈之Mapping 性能瓶颈之Session 性能瓶颈之System 性能 ...
- Object.defineProperty方法
Object.defineProperty() (一次添加/修改一个属性) 用法:Object.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一 ...
- (转载)java内存模型
java并发采用的是共享内存模型,线程之间的通信对程序员来说是透明的,内存可见性问题很容易困扰着java程序员,今天我们就来揭开java内存模型的神秘面纱. 在揭开面纱之前,我们需要认识几个基础概念: ...
- 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 ...
- ubuntu mysql Access denied for user root@localhost
解决办法: 1. vim mysqld.cnf 路径:/etc/mysql/mysql.conf.d 在[mysqld]下添加skip-grant-tables 2. 重启mysql服务 servi ...
- Spring Security + OAuth系统环境搭建(一)
最近在做权限管理系统的重构工作,系统基于Spring Security + OAuth架构,整体架构.技术和之前调研的结果差不多,架构调研时有在这篇博客做过简单记录“Spring Cloud微服务下的 ...
- 支付宝PC端单笔支付同步回调session失效问题
一次调用支付宝PC场景下单笔支付之后同步回调遇到的session失效问题记录 问题描述: 调用支付宝接口:alipay.trade.page.pay,该接口请求参数中有两个返回地址需要设置,retur ...
- 字符串不相同出现相同HashCode(算法)
转自:https://blog.csdn.net/fly_grass_fish/article/details/81742794 在Java中有HashCode的说法,以前以为HashCode是唯一的 ...