HTML5随机点名,JavaScript实现随机点名器

本文实例为大家分享了JavaScript实现随机点名器效果图的具体代码，供大家参考，具体内容如下

js实现随机点名器的思路

利用setTimeout()计时器实现随机的效果，功能函数

function show(){

var box=window.document.getElementById("box");

var num=Math.floor((Math.random()*100000))%namelist.length;

box.innerHTML=namelist[num];

mytime=setTimeout("show()",1);

}

完整代码如下：

点击按钮随机点名-样式布局参考

#box {

margin: auto;

width: 660px;

font-size: 66px;

height: 94px;

color: #138eee;

text-align: center;

margin-top: 200px;

}

#bt {

margin: auto;

width: 200px;

text-align: center;

margin-top: 75px;

color: #fff;

font-size: 25px;

cursor: pointer;

}

var namelist=["张三","李四","王五","赵六","孙七"];

var mytime=null;

function doit(){

var bt=window.document.getElementById("bt");

if(mytime==null){

bt.innerHTML="停止";

show();

}

else{

bt.innerHTML="开始点名";

clearTimeout(mytime);

mytime=null;

}

}

function show(){

var box=window.document.getElementById("box");

var num=Math.floor((Math.random()*100000))%namelist.length;

box.innerHTML=namelist[num];

mytime=setTimeout("show()",1);

}

亲，准备好点名了吗？

开始点名

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。