需求说明:
使用 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>