小案例之随机点名系统
Posted lxylhj
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小案例之随机点名系统相关的知识，希望对你有一定的参考价值。
随机点名系统
近日，本人学习了对象和计时器，就想写一个小案例随机点名系统，这个小案例其实很简单只需要生成随机下标，从数组中取值并运用innerhtml方法将获取到的信息显示到网页上（这里有人会提出疑问，字符串也可以遍历为什么不用字符串呢？原因很简单字符串无法分隔每个名字。）话不多说直接上代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="public.js" type="text/javascript" charset="utf-8"></script>
<style>
#name
font-size: 60px;
text-align: center;
margin: 100px auto;
#start
width: 180px;
height: 60px;
border: none;
background: dodgerblue;
display: block;
margin: 0 auto;
color: #fff;
font-size: 30px;
border-radius: 6px;
text-align: center;
line-height: 60px;
cursor: pointer;
#start:active
background-color: hotpink;
</style>
</head>
<body>
<div class="main">
<div id="name">随机点名系统</div>
<span id="start">点击开始</span>
</div>
</body>
<script type="text/javascript">
var oName = document.getElementById("name");
var oStart = document.getElementById("start");
var names = "霍金,牛顿,爱因斯坦,达尔文,门捷列夫,瓦特,普希金,孔子,老子,庄子";
var arr = names.split(",");
// 设置函数
var time = 1;
var begin = null;
oStart.onclick = function()
if (time == 1)
begin = setInterval(function()
oName.innerHTML = arr[random(0, arr.length - 1)];
, 50)
oStart.innerHTML = "点击结束";
time = 2;
else
clearInterval(begin);
oStart.innerHTML = "点击开始";
time = 1;
</script>
</html>
这里就是随机点名系统的所有代码，接下来就为大家讲解一下代码：
开始我们先设置DOM结构，很简单的一个大div里面嵌套一个小的div用来放着名字，一个span标签用来设置按钮，关于DOM结构的css，代码中写的很详细可以自己看，这里就不多讲解了。
接下来进入我的正题js的编写，随机点名系统最关键的两点一个是定时器，一个是会将字符串转成数组在触发定时器的时候可以从中随机取值。
说到随机取值，就得会写随机数这个函数，由于本人将这类常用的函数写在了公共的js文件中，这里就单独拿出来放在这里（友情提醒各位将常用的函数方法放置在公共类js文件中真的很方便）
function random(a,b) return Math.round(Math.random()*(a-b)+b)
这就是产生随机数的函数。
最开始和大多js一样，先获取各个div和标签的id，然后就是设置名字的字符串，这里用逗号隔开，为了在将字符串转换成数组的时候有参考。
下面就是声明一个空数组将我们转换过后的数组赋值给空数组，使用的是split方法，这样我们就有名字的数组了。接下来就是如何将名字找到了，因为我们写的是随机点名系统，所以要配合按钮的点击事件写函数。
oStart.onclick = function() if (time == 1) begin = setInterval(function() oName.innerHTML = arr[random(0, arr.length - 1)]; , 50) oStart.innerHTML = "点击结束"; time = 2; else clearInterval(begin); oStart.innerHTML = "点击开始"; time = 1;
这就是配合点击事件写的函数，因为有开始和结束，所以我们要给开始和结束一个判断，所以这里我声明了一个time，根据time的值是否为1，来判断开始和结束。若if判断语句内的值为true我们就执行定时器函数，函数中我们根据random（）方法随机产生0~数组长度-1的数，对应每个名字的下标。将获取到的值通过innerHTML方法传到div中显示到网页上。在运用同样的方法给按钮设置名字。最后将time的值改为2，为了暂停时执行else语句。else中就很简单了，我们只需要将定时器暂停，并把按钮显示的字和time的值改回来就好了。最后我们简单的小案例随机点名系统就写好了。
以上是本人学习javascript过程中获得的心得，作为一个小白来说难免会有理解不到位的情况，欢迎大家指出。
以上是关于小案例之随机点名系统的主要内容，如果未能解决你的问题，请参考以下文章