<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04.抽奖</title>
<style>
*{
margin:0;
padding:0;
}
body{
background: black;
}
#btn{
position: absolute;
left:600px;
top:100px;
/*background-color: red;*/
font-size:80px;
color: green;
cursor: pointer;
}
#con{
width: 100%;
height: 600px;
text-align: center;
line-height: 600px;
font-size: 120px;
color: red;
}
</style>
</head>
<body>
<button id="btn">start</button>
<div id="con">某某某</div>
<script>
// 获取按钮
var btn = document.getElementById('btn');
// 获取div（名字显示区域）
var con = document.getElementById('con');
// 定义数组（所要点名的人）
var arr = ['郭德纲','钢的锅','宋丹丹','单单送','杨帆','起航','张海超','张海草','张海洋','海洋里的张海草'];
var sub;// 定义sub，用于存放arr数组的下标
var timer = null;// 用于存放定时器
function fun(){
// console.log('aaa');
if(arr.length > 0){
// 随机获取arr数组的下标 // 赋给sub
sub = Math.floor(Math.random()*arr.length);//
var str = arr[sub];// 将该下标内容赋给str
con.innerHTML = str;// 将str赋给div的innerHTML
}else{
btn.innerHTML = '抽奖完毕';
con.innerHTML = '';
removeEvent(btn,'click',begin,false);
clearInterval(timer);
}
}
// 定义添加事件兼容函数
function addEvent(ele,event,fun,tf){
if(ele.attachEvent){
ele.attachEvent('on'+event,fun);
}else{
ele.addEventListener(event,fun,tf);
}
}
// 定义移除事件兼容函数
function removeEvent(ele,event,fun,tf){
if(ele.detachEvent){
ele.detachEvent('on'+event,fun);
}else{
ele.removeEventListener(event,fun,tf);
}
}
// 定义函数（实现点击按钮，div的内容变化与停止）
function begin(){
// 判断按钮是开启或是关闭
if(btn.innerHTML == 'start'){
// 定时器
timer = setInterval(fun,10);
// 按钮开启则给出关闭条件
btn.innerHTML = 'stop';
}else if(btn.innerHTML == 'stop'){
// 关闭定时器
clearInterval(timer);
// 给出按钮开启条件
btn.innerHTML = 'start';
// 删除关闭时所显示的数组项
arr.splice(sub,1);
}
}
// 为按钮添加点击事件
addEvent(btn,'click',begin,false);
window.onkeyup = function(evt){
var event = evt || window.event;
event.preventDefault();
var keynum = event.keyCode||event.which;
// 当按下32（空格）时，执行bagin函数
if(keynum == 32){
begin();
}
}
</script>
</body>
</html>
结果如下：