查看本章节
查看作业目录
需求说明：
使用 JavaScript 中的 window 对象执行计时操作，完成一个抽奖程序
实现思路：
- 在 HTML 页面中放置背景图片、转盘和指针 3 张图片，并设置指针的点击事件
- 使用 window 对象的 setInterval() 方法反复执行间歇性旋转操作，当获取旋转的度数后，调用 window 对象的 clearInterval() 方法取消间歇性旋转操作
- 调用 window 对象的 setTimeout() 方法，在 4 秒后提示用户中奖结果
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>抽奖</title>
<style type="texts">
#bg{
width: 650px;
height: 600px;
margin: 0 auto;
background:url(imgtable-bg.jpg.jpg)no-repeat ;
position: relative;
}
#pointer{
position: absolute;
z-index: 10;
top: 155px;
left: 247px;
}
#turntable{
position: absolute;
z-index: 5;
top: 60px;
left: 116px;
transition: all 4s;
}
</style>
</head>
<body>
<div id="bg">
<img id="pointer" src="img/pointer.png" alt="pointer" onClick="start()"/>
<img id="turntable" src="imgtable.png" alt="turntable"/>
</div>
<script type="text/javascript">
var pointer=document.getElementById("pointer");
var turntable=document.getElementById("turntable");
var gameover=true;
var cat=51.4;
var lenCloc=0;
function start(){
if (gameover) {
gameover=!gameover;
rotate();
}
}
function rotate(){
lenCloc++;
var timer=null;
clearInterval(timer);
timer=setInterval(function(){
var soBuom=parseInt(Math.floor(Math.random()*51.4)-30.7);
var rdm=lenCloc*3*360+soBuom;
turntable.style.transform="rotate("+rdm+"deg)";
clearInterval(timer);
setTimeout(function(){
gameover=!gameover;
num=rdm%360;
if (num<=cat*1) {
alert("恭喜您获得一等奖\n4999元免单");
}else if (num<=cat*2) {
alert("恭喜您获得二等奖\n50元免单");
} else if (num<=cat*3) {
alert("恭喜您获得三等奖\n10元免单");
}else if (num<=cat*4) {
alert("恭喜您获得四等奖\n5元免单");
}else if (num<=cat*5) {
alert("恭喜您获得五等奖\n免分期服务费");
}else if (num<=cat*6) {
alert("恭喜您获得六等奖\n提高白条额度");
}else if (num<=cat*7) {
alert("未中奖");
}
},4000);
},30);
}
</script>
</body>
<ml>