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 相关文章推荐
文本框文本自动补全效果示例分享
Jan 19 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
JS出现失效的情况总结
Jan 20 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
js实现上传图片到服务器
Apr 11 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
mysql+php分页类(已测)
2008/03/31 PHP
在php和MySql中计算时间差的方法
2011/04/22 PHP
php的debug相关函数用法示例
2016/07/11 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
跟老齐学Python之重回函数
2014/10/10 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
在Python中定义一个常量的方法
2018/11/10 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
公司活动策划方案
2014/01/13 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
教育见习报告范文
2014/11/03 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
小学毕业感言200字
2015/07/30 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js