学了点js，先写一个定时器抽奖的代码。这样万一在年会或者什么场合可以用到。但是这东西写起来并不像，看视频那么简单。
基本的思路很简单。在页面里设置一个“开始”按钮，一个“结束”按钮，一个显示数字的div。当点击开始的时候，div里面开始随机滚动数字。但是点击结束的时候，div上面显示数字是几，就证明谁中奖了。
<input type="button" value="star" id="starcount">
<input type="button" value="stop" id="stopcount">
<div id="countzone"></div>
然后开始用js拿到dom元素，写代码绑定事件。
<script> window.onload = function(){
var starcount = document.querySelector('#starcount');
var stopcount = document.querySelector('#stopcount');
var countzone = document.querySelector('#countzone');
// 设置一个定时器函数
var csrdm = function(){
// 给定时器增加名字
sjsz = setInterval(function(){
countzone.innerHTML = Math.floor(Math.random()*10)
}, 100)}
starcount.addEventListener('click', function(){
csrdm();
})
stopcount.addEventListener('click', function(){
// 这里传入的是定时器的名字，不是包含定时器的函数名字
clearInterval(sjsz);
})
}
</script>
现在的代码，是已经改正过的。但是在写的时候犯了错误。在clearInterval的括号里面清除的是计时器的id（名字）。而不是包含计时器的函数的名字。前面做错的时候，是给函数设定了名字，但是在这个函数的内部的setInterval的前面，没有给这个计时器设定名字。导致了后面的clearInterval的时候，虽然填入了函数名，缺没有清掉计时器。所以一直没有实现想要的效果。反复尝试，回忆视频教学时候老师怎么讲的，还百度了一些文章，才逐渐领悟到，应该给计时器设定名字，然后清除计时器的名字。然后就正常表现了。
然后想了想直接显示人名不是更好吗。真要用的时候，还要每个人记住自己的编号吗。所以就建立了一个数组，把办公室的几个人的名字放了进去。生成的随机数，乘以10，作为数组的索引，用来取值。还好办公室的人不够10个。我这里乘以10就够用了。写了一个if判断，只有在数组长度以内的随机整数，才可以用来改变div的innerHTML的值。超过这个范围的，就进入下一次循环。改造后的整体页面变为。
<!DOCTYPE html>
<html lang="zh_CN.UTF-8">
<head>
<meta charset="zh_CN.UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试页面</title>
<style>
#countzone { width:240px; height:50px; background:#A7E9AF; color:#75B79E; font-size:40px; text-align:center; }
</style>
</head>
<body>
<input type="button" value="star" id="starcount">
<input type="button" value="stop" id="stopcount">
<div id="countzone"></div>
<script>
window.onload = function(){
var starcount = document.querySelector('#starcount');
var stopcount = document.querySelector('#stopcount');
var countzone = document.querySelector('#countzone');
var people = ['老张', '张永亮', '小刘刘', '宋宏彬', '小老衣', '老梁', '老乔', '赵琳琳', '赵明兴', '王洪涛'];
// 设置一个定时器函数
var csrdm = function(){
// 给定时器增加名字
sjsz = setInterval(function(){
var rdmnum = Math.floor(Math.random()*10);
if (rdmnum < people.length){
countzone.innerHTML = people[rdmnum]
} }, 300)}
starcount.addEventListener('click', function(){
csrdm();
})
stopcount.addEventListener('click', function(){
// 这里传入的是定时器的名字，不是包含定时器的函数名字
clearInterval(sjsz);
})
}
</script>
</body>
</html>
网友评论