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

时间：2022-04-16 20:49:19

查看本章节

查看作业目录

需求说明：

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

使用 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>

相关文章