查看本章节

查看作业目录

需求说明：

使用 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. pyqt5 改写函数

    重新改写了keyPressEvent() class TextEdit(QTextEdit): def __init__(self): QtWidgets.QTextEdit.__init__(sel ...

  2. Android给页面添加横线和竖线

    竖线 <View      android:layout_width="1dip"     android:layout_height="match_parent& ...

  3. SpringMVC注解详情

    @Component.@Repository @Service.@Controller 看字面含义,很容易却别出其中三个: @Controller 控制层,就是我们的action层 @Service ...

  4. 运维笔记之yum,rpm,挂载，磁盘管理和raid详解

    yum 与 rpm centos6,7 主要有rpm和yum这两种包管理软件,两种包的管理各有用处,其中最主要区别是:  yum使用简单但需要联网,yum会去网上的yum包源去获取所需要的软件包.而r ...

  5. js调用高德地图API获取地理信息进行定位

    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=(需要自 ...

  6. 第7章　使用性能利器——Redis

    在现今互联网应用中,NoSQL已经广为应用,在互联网中起到加速系统的作用.有两种NoSQL使用最为广泛,那就是Redis和MongoDB.本章将介绍Redis和Spring Boot的结合.Redis ...

  7. 【Java 设计】如何优雅避免空指针调用

    空指针引入 为了避免空指针调用,我们经常会看到这样的语句 if (someobject != null) { someobject.doCalc();} 最终,项目中会存在大量判空代码,多么丑陋繁冗! ...

  8. Ajax请求（$.ajax()为例）中data属性传参数的形式

    首先定义一个form表单: <form id="login" > <input name="user" type="text&quo ...

  9. java通过JDBC访问数据库（最基本的查询）

    一.步骤介绍 1.通过Class.forName()加载驱动: 2.通过DriverManager.getConnection()获取Conncetion连接对象: 3.创建Statement对象传递 ...

  10. 30个类手写Spring核心原理之依赖注入功能（3）

    本文节选自<Spring 5核心原理> 在之前的源码分析中我们已经了解到,依赖注入(DI)的入口是getBean()方法,前面的IoC手写部分基本流程已通.先在GPApplicationC ...