查看本章节

查看作业目录

需求说明：

使用 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. 【SpringBoot】几种定时任务的实现方式

    SpringBoot 几种定时任务的实现方式 Wan QingHua 架构之路  定时任务实现的几种方式: Timer:这是java自带的java.util.Timer类,这个类允许你调度一个java ...

  2. proguard 混淆工具的用法 （适用于初学者参考）

    一. ProGuard简介 附:proGuard官网 因为Java代码是非常容易反编码的,况且Android开发的应用程序是用Java代码写的,为了很好的保护Java源代码,我们需要对编译好后的cla ...

  3. Java Jar包压缩、解压使用

    什么是jar包JAR(Java Archive)是Java的归档文件,它是一种与平台无关的文件格式,它允许将许多文件组合成一个压缩文件. 如何打/解包使用jdk/bin/jar.exe工具,配置完环境 ...

  4. 【Java】【设计模式】单例设计模式

    思想: 为了避免其他程序过多建立该类对象,先禁止其他程序建立该类对象 为了让其他程序可以访问到该类对象,只好在本类中自定义一个对象 为了方便其他程序对自定义对象的访问,可以对外提供一些访问方式 代码体 ...

  5. Linux 性能优化笔记:应用监控

    指标监控 跟系统监控一样,在构建应用程序的监控系统之前,首先也需要确定,到底需要监控哪些指标.特别是要清楚,有哪些指标可以用来快速确认应用程序的性能问题. 对系统资源的监控,USE 法简单有效,却不代 ...

  6. 什么是maven（二）

    转自博主--一杯凉茶 maven项目构建ssh工程(父工程与子模块的拆分与聚合)   前一节我们明白了maven是个什么玩意,这一节就来讲讲他的一个重要的应用场景,也就是通过maven将一个ssh项目 ...

  7. HTTPS及流程简析

    [序] 在我们在浏览某些网站的时候,有时候浏览器提示需要安装根证书,可是为什么浏览器会提示呢?估计一部分人想也没想就直接安装了,不求甚解不好吗? 那么什么是根证书呢?在大概的囫囵吞枣式的百度之后知道了 ...

  8. podman wsl2在windows重启后出错

    1. error joining network namespace for container 如果没有先停止容器就重启windows,极大概率就会出现这个问题 解决方法 先停止停止的容器再启动已退 ...

  9. Abp Vnext 替换Redis的实现为csredis

    Host项目安装csredis的nuget包和data protect包并 移除 Microsoft.Extensions.Caching.StackExchangeRedis Microsoft.A ...

  10. Centos7源码部署Redis3.2.9

    目录 一.环境准备 二.安装 三.测试 四.编写启动脚本 一.环境准备 [Redis-Server] 主机名 = host-1 系统 = centos-7.3 地址 = 1.1.1.1 软件 = re ...