原生JavaScript实现随机点名

一，HTML代码

<div  id="center"><div id="showname">O_O 点名不求人！！！</div><button onclick="buttonname()" id="startname">开始点名</button>
</div>

二，CSS代码

   #center{width: 700px;height: 500px;background-color:#000000;margin: 0 auto;border: solid 1px #800080;position: relative;border-radius: 3px;}#startname{position: absolute;bottom: 0;left: 48%;color: white;background-color: green;}#showname{font-size: 40px;color: white;line-height: 500px;text-align: center;}

三，JavaScript代码

var startid=null;function buttonname(){var buttonid=document.getElementById('startname');var textvaule=buttonid.firstChild.nodeValue;if(textvaule=="开始点名"){buttonid.innerHTML="停止点名";buttonid.style.backgroundColor="red";startname();}else if(textvaule=="停止点名"){buttonid.innerHTML="开始点名";buttonid.style.backgroundColor="green";clearTimeout(startid);}}function startname(){var arr=["黄娜","吴嘉鑫","林仟",'张成','杨纹涓','曾建淞','李雯雯','胡文宇','梁鑫','龚欣洪','高凌燕','白雪','钱丽莎','李茜','庾小龙','陈杜春','裴俊杰','韩斌','张立成','黄博文','周卓瑶','唐子炜','殷泳豪','王雯','钟月','杨欣','彭言强','刘浩','陈思露','朱红桔','赵伟','陈美秀','曾杰','柳续隆','赵洋'];var randomnum=Math.floor(Math.random()*35);var showid=document.getElementById('showname');var showname=arr[randomnum];showid.innerHTML=showname;startid=setTimeout("startname()",100);}

四，实现效果

原生JavaScript实现随机点名相关推荐

使用原生Js实现随机点名
使用原生Js实现随机点名最近学了一点前端内容,老师让用js设计一个班里的随机点名器.就尝试写了一个,具体实现效果如图: 实现代码: <!DOCTYPE html> <html la ...
SASS+Compass基本使用，结合JavaScript实现随机点名小系统
SASS+Compass基本使用,以一个随机点名demo为例 demo 源码:https://github.com/XieTongXue/call-over,效果请看(5),代码解释请看源码. (1) ...
html中自动随机点名的程序,JavaScript实现随机点名程序
本文实例为大家分享了js实现随机点名程序的具体代码,供大家参考,具体内容如下效果: 录制的gif效果图没那么理想,其实速度是比这个快的思路: 1.定义一个数组,存放名单 2.启动定时器,设定间隔时 ...
原生JS实现随机点名项目
核心思想随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停. 所用知识 Math.random() * num: 产生从0到num的随机数 Math.floor(): 向下取整 ...
javascript实现随机点名
1.math随机数方法获取一个数,再根据这个随机数找到相应数组的索引,把索引对应的值取出来,进行展示,中间再利用setInterval()计时器实现循环,紧接着再利用settimeout()计时器只执 ...
javascript制作随机点名表
<html> <head> <meta http-equiv="Content-Type" content="text/html;chars ...
js html转盘点名,原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...
javascript 随机点名
javascript随机点名视频 https://www.bilibili.com/video/BV1PJ41177YW?p=4 代码 <!DOCTYPE html> <html ...
用php实现随机点名,使用javascript做的一个随机点名程序
这篇文章主要介绍了使用javascript做的一个随机点名程序,经测试,效果相当不错,需要的朋友可以参考下 /p> "http://www.w3.org/TR/html4/loose. ...

原生JavaScript实现随机点名

原生JavaScript实现随机点名

一，HTML代码

二，CSS代码

三，JavaScript代码

四，实现效果

原生JavaScript实现随机点名相关推荐

最新文章

热门文章