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( ...
随机推荐
- 音视频编解码——LAME
一.LAME简介 LAME是目前非常优秀的一种MP3编码引擎,在业界,转码成Mp3格式的音频文件时,最常用的就是LAME库.当达到320Kbit/s时,LAME编码出来的音频质量几乎可以和CD的音质相 ...
- Javascript高级编程学习笔记(75)—— 表单(3)表单字段
表单字段 表单作为web应用中不可或缺的一部分,当然也是可以使用原生的 DOM 元素来访问的 除了标准的访问方式之外,每个表单都拥有一个 elements 属性,该属性保存着该表单所有 表单元素 的集 ...
- 深入分析Java I/O的工作机制 (一)
此篇博客看至许令波的深入分析javaWeb内幕书籍, 此篇博客写的是自己看完之后理解的重点内容,加一些理解,希望对你有帮助. 1.Java的I/O类库的基本架构 先说一下什么是类库:可以说是类的集合, ...
- Spring整合MyBatis 你get了吗?
Spring整合MyBatis 1.整体架构dao,entity,service,servlet,xml 2..引入依赖 <dependencies> <dependency> ...
- AI - 机器学习常见算法简介(Common Algorithms)
机器学习常见算法简介 - 原文链接:http://usblogs.pwc.com/emerging-technology/machine-learning-methods-infographic/ 应 ...
- 推荐一篇关于java集合的博文,写的很nice
这也是我自己在网上看到的一篇博文,作者的博文都很棒,以后还会持续为大家推荐好的博文,只要大家不骂我只会转别人的博文,自己不会写,其实这些都是基础,前辈们已经在实践中总结的很细很全了,所以也没必要去总结 ...
- linux 清空历史命令
系统版本:CentOS 6 history -c 命令可以清空当前窗口的历史输出命令. 要彻底删除历史命令可以有如下几种方式: 在当前用户的-目录下执行: 方式1: echo > .bash_h ...
- IdentityServer4(1)- 特性一览
本地应用只本地客户端应用,例如QQ.微信 IdentityServer4是ASP.NET Core 2的OpenID Connect和OAuth 2.0框架.它可以在您的应用程序中提供以下功能: 它使 ...
- Socket进程通信机制及应用
Socket通常称为“套接字”,用于描述IP地址和端口,是一个通信链的句柄.应用程序通过套接字向网络发出请求或者应答网络请求.Socket即不是一个程序,也不是一个协议,其只是操作系统提供的通信层的一 ...
- 接口隔离原则(ISP)
设计应用程序的时候,如果一个模块包含多个子模块,那么我们应该小心对模块做出抽象.设想该模块由一个类实现,我们可以把系统抽象成一个接口.但是要添加一个新的模块扩展程序时,如果要添加的模块只包含原系统中的 ...