案例描述
点击开始按钮，名字开始在浏览器上滚动。点击结束按钮，名字滚动停止，浏览器上出现某一个人的名字，完成点名
案例展示
HTML + CSS
<body>
<div id="box">
<div id="name">点名即将开始</div>
<button id="begin">开始</button>
<button id="end">结束</button>
</div>
</body>
<style>
body {
text-align: center;
}
#box {
margin-top: 100px;
}
#name {
font-size: 20px;
margin-bottom: 20px;
}
</style>
JS代码
JS详解-----封装函数
这是一个封装函数，使之前获取元素的代码更加简洁
function $(id) {
return typeof(id) === 'string' ? document.getElementById(id):null;
}
JS详解----核心代码
在这里要定义一个数组变量存放姓名字符串。在监听begin事件中首先要清除定时器在设置一个定时器，防止定时器的重叠。取随机数要用到Math.random()方法（注意：取值范围 (0,1]），将其乘以数组长度就可以随机获得数组中的任何一个字符串。再使用innerText将其显示在浏览器上。监听结束事件清除定时器。
var arr = ['张三','李四','王五','张大麻子'];
var interval;
//监听begin事件
begin.addEventListener('click',function() {
//清除定时器 防止定时器重叠
clearInterval(interval);
interval = setInterval(function(){
//取随机数
var index = parseInt(Math.random()*arr.length);
name.innerText = arr[index] ;
},20);
});
//监听结束事件
end.addEventListener('click',function() {
clearInterval(interval);
});
JS全部代码展示
<script>
window.onload = function() {
//获取元素
var begin = $('begin');
var end = $('end');
var name = $('name');
//定义变量
var arr = ['张三','李四','王五','张大麻子'];
var interval;
//监听begin事件
begin.addEventListener('click',function() {
//清楚定时器 防止定时器重叠
clearInterval(interval);
interval = setInterval(function(){
//取随机数
var index = parseInt(Math.random()*arr.length);
name.innerText = arr[index] ;
},20);
});
//监听结束事件
end.addEventListener('click',function() {
clearInterval(interval)
});
//封装
function $(id) {
return typeof(id) === 'string' ? document.getElementById(id):null;
}
}
</script>
