<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nihao</title>
<style>
input{
background-color: greenyellow;
border: 1px solid green;
width:100px;
height:50px;
font-size: 20px;
font-family: "微软雅黑";
font-weight: bold;
}
</style>
</head>
<body>
<center>
<h3 color="red">恭喜您:</h3>
<div style="font-size: 20px;text-align: center;border: 2px solid green;width:200px;height: 50px;line-height: 50px;">
<span id="sp"></span>
</div>
<hr />
<input type="button" value="开始抽奖" id="start"/>
</center>
<script>
/*定义数组存放参与抽的人员名单*/
var arr=["小花","小明","小红","小丽","小强","小白","小黑","小刚"];
function fun() {
/*随机获取数组人名*/
var index=Math.floor(Math.random() * arr.length);
var name=document.getElementById("sp");
name.innerHTML=arr[index]+" 中奖了";
}
//点击开始按钮,定时器循环执行
var start=document.getElementById("start");
var time_ID=null;
start.onclick=function () {
if(time_ID==null){
time_ID=setInterval(fun,50);
start.value="结束抽奖";
}else {
clearInterval(time_ID);
start.value="开始抽奖";
time_ID=null;
}
};
</script>
</body>
</html>