JavaScript实现简单随机点名器


Posted in Javascript onNovember 21, 2019

本文实例为大家分享了js随机点名器的具体代码,供大家参考,具体内容如下

<html lang="zh">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>随机抽签</title>
</head>
<body>
 <center>
 <div id="d" style="background: #7A7A7A;width: 250px;"><!-- 设置背景框颜色和长度 -->
 <h1 id = 'name'></h1> <!-- 用于显示随机的人名 -->
 </div>
 <div>
 <button id = 'start' type="button">开始</button>
 </div>
 <div>
 <button id = 'temp' type="button">暂停</button>
 </div>
 </center>
</body>
</html>
<script type="text/javascript">
 window.onload=function(){
 var names = ['name','name','name','name','name']; //人名数组
 var clors = ['#EE0000','#CAE1FF','#008B8B','#CDC9C9','#F0F8FF'];//颜色数组
 var name = document.getElementById('name'); //获取id为name的元素
 var d = document.getElementById('d');
 var temp = document.getElementById('temp');
 var startR = -1; //记录计时器的序号
 var start = document.getElementById('start');
 function Random(){ //产生随机数,并更改h1中的内容与颜色
 var nNum = Math.floor(Math.random()*5); //这里的5为你当前人名的数量
 var cNum = Math.floor(Math.random()*5);
 name.innerHTML = names[nNum];
 d.style.color = clors[cNum];
 }
 start.onclick = function(){ //单击开始方法
 if(startR == -1) //不加限制,多次点击开始会有多个计时器启动
 startR = setInterval(Random,25);//设置计时器,每0.025秒执行一次
 }
 temp.onclick = function(){ //单击暂停方法
 clearInterval(startR);
 startR = -1;
 }
 }
</script>

当前代码仅实现了随机点名的功能,没有做任何界面美化。

具体展示

JavaScript实现简单随机点名器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 #Javascript
Vue实现按钮级权限方案
Nov 21 #Javascript
微信小程序实现星级评价
Nov 20 #Javascript
微信小程序音乐播放器开发
Nov 20 #Javascript
微信小程序实现音乐播放器
Nov 20 #Javascript
vue移动端模态框(可传参)的实现
Nov 20 #Javascript
微信小程序实现上拉加载功能
Nov 20 #Javascript
You might like
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
apache部署python程序出现503错误的解决方法
2017/07/24 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
keras导入weights方式
2020/06/12 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
html5绘制时钟动画
2014/12/15 HTML / CSS
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
高中英语教学反思
2014/02/04 职场文书
教师自我鉴定范文
2014/03/20 职场文书
小露珠教学反思
2014/04/30 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
廉洁自律证明
2015/06/24 职场文书
2016年国陪研修感言
2015/11/18 职场文书
数学复习课教学反思
2016/02/18 职场文书
Python 阶乘详解
2021/10/05 Python
MySQL多表查询机制
2022/03/17 MySQL
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js
win10搭建配置ftp服务器的方法
2022/08/05 Servers