JavaScript实现简单随机点名器
更新时间：2019年11月21日 08:37:36 作者：菜_稽
这篇文章主要为大家详细介绍了JavaScript实现简单随机点名器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
当前代码仅实现了随机点名的功能，没有做任何界面美化。
具体展示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于JS运算符优先级与表达式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要介绍了微信小程序学习笔记之本地数据缓存功能,结合实例形式分析了微信小程序wx.setStorage、wx.getStorage以及wx.removeStorage、wx.clearStorage针对数据缓存的存取、删除等相关操作技巧,需要的朋友可以参考下2019-03-03
本文给大家总结了一下常见的javascript检验各种规则的代码，通过正则表达式来实现，都是项目中经常需要用到的，有需要的小伙伴可以参考下。2015-07-07
Javascript遍历Html Table示例(包括内容和属性值)
这篇文章主要介绍了Javascript如何遍历Html Table(包括内容和属性值),需要的朋友可以参考下2014-07-07
BootStrap中Datepicker控件带中文的js文件
bootstrap-datepicker 是一个非常优秀的时间选择插件。这篇文章主要介绍了bootstrap-datepicker带中文的js文件的相关资料,需要的朋友可以参考下2016-08-08
本篇文章主要是对js跳转页面方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁，同时还比传统的属性访问方法更为清晰，下面这篇文章主要给大家介绍了关于在es6解构时应该注意的点，需要的朋友可以参考下。2017-08-08
这篇文章主要介绍了JS+html5实现异步上传图片显示上传文件进度条功能,结合完整实例形式分析了JavaScript前端结合HTML5实现post文件上传与进度条显示相关操作技巧,需要的朋友可以参考下2019-11-11
点击后僵硬的切换是不是很不爽，下面为大家介绍的是根据锚点offset值来实现动画切换，喜欢的朋友不要错过2014-09-09
BootStrap栅格系统可以把我们的container容器划分为若干等分，如果想要每个部分之间留出一定的空隙，那么应该怎么解决，本文就来介绍一下2021-08-08
最新评论