查看本章节

查看作业目录

需求说明：

使用 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. Cx_Oracle 安装

    1. 下载安装 2.把oci.ddl  oraociei11.dll 放到C:\Python33\Lib\site-packages路径下

  2. spring boot druid数据源

    pom.xml配置 <!-- druid --> <dependency> <groupId>com.alibaba</groupId> <art ...

  3. spring boot项目创建与使用

    概述 spring boot通常使用maven创建,重点在于pom.xml配置,有了pom.xml配置,可以先创建一个空的maven项目,然后从maven下载相关jar包. spring boot d ...

  4. 加密时java.security.InvalidKeyException: Illegal key size or default parameters解决办法

    需 Java几乎各种常用加密算法都能找到对应的实现.因为美国的出口限制,Sun通过权限文件(local_policy.jar.US_export_policy.jar)做了相应限制.因此存在一些问题: ...

  5. MFC入门示例之列表框(CListControl)

    初始化: 1 //初始化列表 2 m_list.ModifyStyle(LVS_TYPEMASK, LVS_REPORT); //报表样式 3 m_list.InsertColumn(0, TEXT( ...

  6. C# 使用modbus 读取PLC 寄存器地址

    使用的组件Nmodbus 定义参数,全局变量: //创建modbus实体对象 private static ModbusFactory modbusFactory; private static IM ...

  7. tableau添加参考线

    一.将数据窗口切换至分析窗口-点击自定义-参考线 二.出现编辑参考线和参考区间的界面(整个表指的是整个视图,每区指的是如下2018就是一个区,每单元格指的是横轴的最小值) 三.我们分别为每区添加最大值 ...

  8. <转>Hadoop入门总结

    转自:http://www.cnblogs.com/skyme/archive/2012/06/01/2529855.html 第1章 引言 1.1 编写目的 对关于hadoop的文档及资料进行进一步 ...

  9. IO中同步异步，阻塞与非阻塞 -- 通俗篇

    一.同步与异步 同步/异步, 它们是消息的通知机制 1. 概念解释 A. 同步 所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回. 按照这个定义,其实绝大多数函数都是同步调用(例 ...

  10. [BUUCTF]PWN——[ZJCTF 2019]Login

    [ZJCTF 2019]Login 附件 步骤: 例行检查,64位程序,开启了canary和nx保护 2. 试运行一下程序 3. 64位ida载入,检索字符串,在程序里找到了用户名admin和密码2j ...