查看本章节

查看作业目录

需求说明：

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

实现思路：

  1. 在 HTML 页面中放置背景图片、转盘和指针 3 张图片，并设置指针的点击事件
  2. 使用 window 对象的 setInterval() 方法反复执行间歇性旋转操作，当获取旋转的度数后，调用 window 对象的 clearInterval() 方法取消间歇性旋转操作
  3. 调用 window 对象的 setTimeout() 方法，在 4 秒后提示用户中奖结果

实现代码：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>抽奖</title>
  6. 		<style type="texts">
  7. 			#bg{
  8. 				width: 650px;
  9. 				height: 600px;
  10. 				margin: 0 auto;
  11. 				background:url(imgtable-bg.jpg.jpg)no-repeat ;
  12. 				position: relative;
  13. 			}
  14. 			#pointer{
  15. 				position: absolute;
  16. 				z-index: 10;
  17. 				top: 155px;
  18. 				left: 247px;
  19. 			}
  20. 			#turntable{
  21. 				position: absolute;
  22. 				z-index: 5;
  23. 				top: 60px;
  24. 				left: 116px;
  25. 				transition: all 4s;
  26. 			}
  27. 		</style>
  28. 	</head>
  29. 	<body>
  30. 		<div id="bg">
  31. 		    <img id="pointer" src="img/pointer.png" alt="pointer" onClick="start()"/>
  32. 		    <img id="turntable" src="imgtable.png" alt="turntable"/>
  33. 		</div>
  34. 		<script type="text/javascript">
  35. 			var pointer=document.getElementById("pointer");
  36. 			var turntable=document.getElementById("turntable");
  37. 			var gameover=true;
  38. 			var cat=51.4;
  39. 			var lenCloc=0;
  41. 			function start(){
  42. 				if (gameover) {
  43. 					gameover=!gameover;
  44. 					rotate();
  45. 				}
  46. 			}
  48. 			function rotate(){
  49. 				lenCloc++;
  50. 				var timer=null;
  51. 				clearInterval(timer);
  52. 				timer=setInterval(function(){
  53. 					var soBuom=parseInt(Math.floor(Math.random()*51.4)-30.7);
  54. 					var rdm=lenCloc*3*360+soBuom;
  55. 					turntable.style.transform="rotate("+rdm+"deg)";
  56. 					clearInterval(timer);
  57. 					setTimeout(function(){
  58. 						gameover=!gameover;
  59. 						num=rdm%360;
  60. 						if (num<=cat*1) {
  61. 							alert("恭喜您获得一等奖\n4999元免单");
  62. 						}else if (num<=cat*2) {
  63. 							alert("恭喜您获得二等奖\n50元免单");
  64. 						} else if (num<=cat*3) {
  65. 							alert("恭喜您获得三等奖\n10元免单");
  66. 						}else if (num<=cat*4) {
  67. 							alert("恭喜您获得四等奖\n5元免单");
  68. 						}else if (num<=cat*5) {
  69. 							alert("恭喜您获得五等奖\n免分期服务费");
  70. 						}else if (num<=cat*6) {
  71. 							alert("恭喜您获得六等奖\n提高白条额度");
  72. 						}else if (num<=cat*7) {
  73. 							alert("未中奖");
  74. 						}
  75. 					},4000);
  76. 				},30);
  77. 			}
  79. 		</script>
  80. 	</body>
  81. <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. 从源码看RequestMappingHandlerMapping的注册与发现

    1.问题的产生 日常开发中,大多数的API层中@Controller注解和@RequestMapping注解都会被使用在其中,但是为什么标注了@Controller和@RequestMapping注解 ...

  2. webservice--cxf和spring结合

    服务端: 实体: package entity; import java.util.Date; /*** 实体 */ public class Pojo { //温度 private String d ...

  3. ubantu打开摄像头失败

    摘要-针对ubantu20 sudo apt install v4l-utils v4l2-ctl --list-devices - cv2 install on ubantu20```针对ubant ...

  4. [学习总结]2、android中的VelocityTracker(获得速率用的类)

    参考资料:http://blog.jrj.com.cn/4586793646,5298605a.html 感谢这位兄弟! android.view.VelocityTracker主要用跟踪触摸屏事件( ...

  5. Default arguments and virtual function

    Predict the output of following C++ program. 1 #include <iostream> 2 using namespace std; 3 4 ...

  6. VUE页面实现加载外部HTML方法

    前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的.所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件.需要搞点事情以达到想要的效果.本文主要和大家介绍VU ...

  7. 【Linux】【Commands】基础概念及常用基础命令

    命令的语法通用格式: ------------------------------------------------ #COMMAND OPTIONS ARGUMENTS 发起命令:请求内核将某个二 ...

  8. 如何使用gitHub管理自己的项目

    GitHub 与 Git Git是一种分布式版本控制系统,与svn是同样的概念 GitHub是一个网站,提供Git服务 前提:你的本机电脑已经安装了git,并且已经注册了gitHub账号 Git上传本 ...

  9. 多媒体音视频处理及FFmpeg使用技巧总结

    截图 ffmpeg -ss 00:02:06 -i input.mp4 -f image2 -y poster.jpg 连续截图 ffmpeg -y -i input.mp4 -vf "fp ...

  10. 特定场景下的PLC 远程控制和数据读取

    最近有位博友提出了一种应用场景,根据工作中实际遇到的类似的产品应用场景,记录下自己的解决方案. 场景: 需要在云端控制和采集各个站点的PLC数据.各个站点是分散的,每个站点有公网访问能力,但是分散站点 ...