网站建设公司下载/石家庄谷歌seo
查看本章节
查看作业目录
需求说明：
使用 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>