实现一个随机点名功能,用到的有随机数、定时器、点击事件、数组,闲言
少叙直接上代码。
布局:
<div id="box">
<p>点名</p>
<button>开始</button>
<button>结束</button>
</div>
样式:
#box{
width: 300px;
height: 300px;
text-align: center;
border: 1px solid;
margin: 0 auto;
}
逻辑代码:
// 获取开始
var oStart = document.getElementsByTagName('button')[0];
// 获取结束
var oStop = document.getElementsByTagName('button')[1];
// 获取p标签
var oP = document.getElementsByTagName('p')[0];
// 定义一个数组
var arr = ['欧阳菁','李达康','韩美珍','郑伯鸿','孙大妞','王满堂','吴刚','
岳秀清','蔡英豪','邱莹','李维民','段凯文','何建国','李佳佳'];
// 声明定时器
var timer;
// 开始点击事件
oStart.onclick = function(){
// 关闭定时器
clearInterval(timer);
// 声明定时器
timer = setInterval(f,500);
// 定时器函数
function f(){
// 随机
var str = parseInt(Math.random()*arr.length);
// p的值
oP.innerHTML = arr[str];
}
}
// 结束点击事件
oStop.onclick = function(){
// 关闭定时器
clearInterval(timer);
}