使用 JavaScript 中的 window 对象执行计时操作，完成一个抽奖程序

查看本章节

查看作业目录

需求说明：

使用 JavaScript 中的 window 对象执行计时操作，完成一个抽奖程序

实现思路：

  1. 在 HTML 页面中放置背景图片、转盘和指针 3 张图片，并设置指针的点击事件
  2. 使用 window 对象的 setInterval() 方法反复执行间歇性旋转操作，当获取旋转的度数后，调用 window 对象的 clearInterval() 方法取消间歇性旋转操作
  3. 调用 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>

 

posted @ 2020-10-31 23:59  明金同学  阅读(27)  评论(0)  编辑  收藏  举报