查看本章节

查看作业目录

需求说明：

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

使用 JavaScript 中的 window 对象执行计时操作，完成一个抽奖程序的更多相关文章

  1. JavaScript中的window对象

    JavaScript中的window对象:http://www.cnblogs.com/kissdodog/archive/2013/01/01/2841464.html

  2. 理解JavaScript中的window对象

    前言 每个JavaScript环境都有一个全局对象(global object).在全局范围内创建的任何变量实际上都是这个对象的属性,而任何函数都是它的方法.在浏览器环境中,全局对象是window对象 ...

  3. JavaScript中的window对象的属性和方法；JavaScript中如何选取文档元素

    一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setIn ...

  4. java基础65 JavaScript中的Window对象（网页知识）

    1.javaScript组成部分 1.EMCAScript(基本语法)    2.BOM(Browser Object Model):浏览器对象模型            浏览器对象模型中的浏览器的各 ...

  5. JavaScript中的global对象，window对象以及document对象的区别和联系

    JavaScript中的global对象,window对象以及document对象的区别和联系 一.概念区分:JavaScript中的global对象,window对象以及document对象 1.g ...

  6. （转载）JavaScript中的Window窗口对象

    (转载)http://www.ijavascript.cn/jiaocheng/javascript-window-65.html 例子: <html> <head> < ...

  7. 【学习笔记】：JavaScript中的BOM对象

    JavaScript中的BOM对象 BOM(Browser Object Model):浏览器对象模型. BOM可用于对浏览器窗口进行访问,但BOM没有相关的标准,所以根据浏览器的不同,其中定义的对象 ...

  8. JavaScript权威设计--Window对象之Iframe(简要学习笔记十四)

    1.Window对象属性的文档元素(id) 如果在HTML文档中用id属性来为元素命名,并且如果Window对象没有此名字的属性,Window对象会赋予一个属性,它的名字是id属性的值,而他们的值指向 ...

  9. JavaScript权威指南--window对象

    知识要点 window对象及其客户端javascript所扮演的核心角色:它是客户端javascript程序的全局对象.本章介绍window对象的属性和方法,这些属性定义了不同的API,但是只有一部分 ...

随机推荐

  1. IntentFilter，PendingIntent

    1.当Intent在组件间传递时,组件如果想告知Android系统自己能够响应那些Intent,那么就需要用到IntentFilter对象. IntentFilter对象负责过滤掉组件无法响应和处理的 ...

  2. HongYun项目启动

    一个前后端分离项目的启动顺序: 数据库启动, stams 后台springboot启动 中间路由启动,比如nginx,如果有的话:有这一层,后台可以设置负载均衡,可以动态部署 前端启动

  3. JSP 文字乱码、${}引用无效

    问题: 代码:<form action="/test/requestPost.do" method="post"> <input type=& ...

  4. [BUUCTF]REVERSE——CrackRTF

    CrackRTF 附件 步骤: 例行查壳儿,32位程序,无壳儿 32位ida载入,main函数开始分析程序 破解第一个密码 sub_40100A()是一个加密函数,具体的写的算法没去分析,但是Cryp ...

  5. 逻辑判断（Power Query 之 M 语言）

    逻辑真:true 逻辑假:false 与函数:and true and true,结果为TRUE true and false,结果为FALSE false and false,结果为FALSE 或函 ...

  6. LuoguP7337 『MdOI R4』Fun 题解

    Content 有 \(n\) 个人去打比赛.给出第 \(i\) 个人的交通方式 \(t_i\) 和颓废值 \(q_i\)(均以 \(0/1\) 表示).如果 \(t_i=1,q_i=1\) 的人数 ...

  7. Sharepoint 列表分页开发

    虽然现在linq技术对列表操作都是对实体操作了,但是linq有一点不好,那就是分页舞从下手,假如查出满足条件的记录有1万条,而在分页的时候我每次只需要显示10条,那么我每次点击下一页的时候都查询的是1 ...

  8. libevent源码学习（13）：事件主循环event_base_loop

    目录开启事件主循环执行事件主循环校对时间 阻塞/非阻塞处理激活队列中的event事件主循环的退出event_base_loopexitevent_base_loopbreak开启事件主循环       ...

  9. libevent源码学习（5）：TAILQ_QUEUE解析

    目录 前言 结点定义 链表初始化 链表查询及遍历 链表查询 链表遍历 插入结点 头插法 尾插法 前插法 后插法 删除结点 替换结点 总结 前言 在libevent中使用到了TAILQ数据结构,看了一下 ...

  10. Spring学习（一）idea中创建第一个Spring项目

    1.前言 Spring框架是一个开放源代码的J2EE应用程序框架,由Rod Johnson发起,是针对bean的生命周期进行管理的轻量级容器(lightweight container). Sprin ...