新手学习,欢迎大家讨论并指出错误o^ v ^o
效果如图
点击开始,名字变化,点击停止,停止在随机的名字上,使用random随机数实现
html代码如下
<!-- 随机点名 -->
<div class="box">
<div class="namae">奇犽</div>
<button class="haji">开始</button>
<button>停止</button>
</div>
css代码如下
.box {
width: 400px;
height: 300px;
background-color: #cbcbcb;
margin: auto;
}
.namae {
width: 400px;
height: 100px;
background-color: #0aa1a9cc;
font-size: 22px;
text-align: center;
line-height: 100px;
}
button {
width: 50px;
height: 30px;
margin-top: 40px;
}
.haji {
margin-left: 140px;
margin-right: 20px;
}
js代码如下
// 点名
var namae = document.getElementsByClassName('namae')[0];
var btn = document.getElementsByTagName('button');
// 名字库
var arrn = ['奇犽', '亚路嘉', '伊尔迷', '库洛洛', '飞坦', '酷拉皮卡', '侠客', '梅路艾姆', '尼飞彼多', '玛琪', '枭亚普夫', '小麦', '庞姆', '莫老五', '纳库鲁', '小滴'];
var timer; //放外面,不然是局部变量
btn[0].onclick = function () {
// 先清一下定时器
clearInterval(timer);
// 名字随机出现,定时器
timer = setInterval(auto, 80);
}
btn[1].onclick = function () {
clearInterval(timer);
}
function auto() {
var ming = arrn[getRandomIntInclusive(0, arrn.length - 1)];
namae.innerText = ming;
}
/* setInterval(function(){
var ming = arrn[getRandomIntInclusive(0,arrn.length-1)];
namae.innerText = ming;
},50) */