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( ...
随机推荐
- 如何优化Spring Cloud微服务注册中心架构?
作者: 石杉的架构笔记 1.再回顾:什么是服务注册中心? 先回顾一下什么叫做服务注册中心? 顾名思义,假设你有一个分布式系统,里面包含了多个服务,部署在不同的机器上,然后这些不同机器上的服务之间要互相 ...
- Android WebView 超大字号适配问题
目前在使用 Android WebView 展示H5页面的时候,存在当系统字号设置超大的时候,出现页面内容展示不全的问题. 此问题是因为Android WebView 默认使用系统字号进行展示. 解决 ...
- 使用Java面向对象单词必备
第一章 class 班级,用声明类 object 目标,整个程序集对大 static 静态的 final 不可更改的,用声明常量 private 私有的,用访问权限 public ...
- 基于C++Qt4开发的白鸽局域网聊天器
开源项目Github链接:https://github.com/u014427391/chitchat1.0 欢迎star (1)群聊主界面,有工具栏,工具栏功能分别是发送文件.打开音乐播放器.保存聊 ...
- 【Spark调优】Kryo序列化
[Java序列化与反序列化] Java序列化是指把Java对象转换为字节序列的过程:而Java反序列化是指把字节序列恢复为Java对象的过程.序列化使用场景:1.数据的持久化,通过序列化可以把数据永久 ...
- Android--UI之ImageSwitcher
前言 这篇博客来聊一聊AndroidUI开发中ImageSwitcher控件的使用.ImageSwitcher控件与ImageView类似,都可以用于显示图片,但是ImageSwitcher通过名字可 ...
- Python快速学习03:运算 & 缩进和选择
前言 系列文章:[传送门] 这篇昨晚本来要出的,去搭了帐篷,在学校的屋顶上. 运算 运算,不得不说的是运算符. 数学 +, -, *, /, **, %,// 判断 ==, !=, >, > ...
- SpringContextHolder 静态持有SpringContext的引用
import java.util.Map; import org.springframework.context.ApplicationContext; import org.springframew ...
- MyEclipse忽略js报错
MyEclipse对官网下载的js报错,解决办法如下: 1. 对js文件右键选择 MyEclipse --> Exclude From Validation 2. 然后继续右键执行MyEclip ...
- leetcode — set-matrix-zeroes
import java.util.Arrays; /** * Source : https://oj.leetcode.com/problems/set-matrix-zeroes/ * * * Gi ...