python小案例随机点名_小案例之随机点名系统

随机点名系统

近日,本人学习了对象和计时器,就想写一个小案例随机点名系统,这个小案例其实很简单只需要生成随机下标,从数组中取值并运用innerHTML方法将获取到的信息显示到网页上(这里有人会提出疑问,字符串也可以遍历为什么不用字符串呢?原因很简单字符串无法分隔每个名字。)话不多说直接上代码。

font-size: 60px;

text-align: center;

margin: 100px auto;

}

#start{

width: 180px;

height: 60px;

border: none;

background: dodgerblue;

display: block;

margin:0auto;

color: #fff;

font-size: 30px;

border-radius: 6px;

text-align: center;

line-height: 60px;

cursor: pointer;

}

#start:active{

background-color: hotpink;

}

随机点名系统

点击开始

var oName = document.getElementById("name");var oStart = document.getElementById("start");var names = "霍金,牛顿,爱因斯坦,达尔文,门捷列夫,瓦特,普希金,孔子,老子,庄子";var arr = names.split(",");//设置函数

var time = 1;var begin = null;

oStart.οnclick=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;

}

}

这里就是随机点名系统的所有代码,接下来就为大家讲解一下代码:

开始我们先设置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过程中获得的心得,作为一个小白来说难免会有理解不到位的情况,欢迎大家指出。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值