使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序
查看本章节
查看作业目录
需求说明:
使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序
实现思路:
- 在 HTML 页面中放置背景图片、转盘和指针 3 张图片,并设置指针的点击事件
- 使用 window 对象的 setInterval() 方法反复执行间歇性旋转操作,当获取旋转的度数后,调用 window 对象的 clearInterval() 方法取消间歇性旋转操作
- 调用 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 对象执行计时操作,完成一个抽奖程序的更多相关文章
- JavaScript中的window对象
JavaScript中的window对象:http://www.cnblogs.com/kissdodog/archive/2013/01/01/2841464.html
- 理解JavaScript中的window对象
前言 每个JavaScript环境都有一个全局对象(global object).在全局范围内创建的任何变量实际上都是这个对象的属性,而任何函数都是它的方法.在浏览器环境中,全局对象是window对象 ...
- JavaScript中的window对象的属性和方法;JavaScript中如何选取文档元素
一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setIn ...
- java基础65 JavaScript中的Window对象(网页知识)
1.javaScript组成部分 1.EMCAScript(基本语法) 2.BOM(Browser Object Model):浏览器对象模型 浏览器对象模型中的浏览器的各 ...
- JavaScript中的global对象,window对象以及document对象的区别和联系
JavaScript中的global对象,window对象以及document对象的区别和联系 一.概念区分:JavaScript中的global对象,window对象以及document对象 1.g ...
- (转载)JavaScript中的Window窗口对象
(转载)http://www.ijavascript.cn/jiaocheng/javascript-window-65.html 例子: <html> <head> < ...
- 【学习笔记】:JavaScript中的BOM对象
JavaScript中的BOM对象 BOM(Browser Object Model):浏览器对象模型. BOM可用于对浏览器窗口进行访问,但BOM没有相关的标准,所以根据浏览器的不同,其中定义的对象 ...
- JavaScript权威设计--Window对象之Iframe(简要学习笔记十四)
1.Window对象属性的文档元素(id) 如果在HTML文档中用id属性来为元素命名,并且如果Window对象没有此名字的属性,Window对象会赋予一个属性,它的名字是id属性的值,而他们的值指向 ...
- JavaScript权威指南--window对象
知识要点 window对象及其客户端javascript所扮演的核心角色:它是客户端javascript程序的全局对象.本章介绍window对象的属性和方法,这些属性定义了不同的API,但是只有一部分 ...
随机推荐
- IntentFilter,PendingIntent
1.当Intent在组件间传递时,组件如果想告知Android系统自己能够响应那些Intent,那么就需要用到IntentFilter对象. IntentFilter对象负责过滤掉组件无法响应和处理的 ...
- HongYun项目启动
一个前后端分离项目的启动顺序: 数据库启动, stams 后台springboot启动 中间路由启动,比如nginx,如果有的话:有这一层,后台可以设置负载均衡,可以动态部署 前端启动
- JSP 文字乱码、${}引用无效
问题: 代码:<form action="/test/requestPost.do" method="post"> <input type=& ...
- [BUUCTF]REVERSE——CrackRTF
CrackRTF 附件 步骤: 例行查壳儿,32位程序,无壳儿 32位ida载入,main函数开始分析程序 破解第一个密码 sub_40100A()是一个加密函数,具体的写的算法没去分析,但是Cryp ...
- 逻辑判断(Power Query 之 M 语言)
逻辑真:true 逻辑假:false 与函数:and true and true,结果为TRUE true and false,结果为FALSE false and false,结果为FALSE 或函 ...
- LuoguP7337 『MdOI R4』Fun 题解
Content 有 \(n\) 个人去打比赛.给出第 \(i\) 个人的交通方式 \(t_i\) 和颓废值 \(q_i\)(均以 \(0/1\) 表示).如果 \(t_i=1,q_i=1\) 的人数 ...
- Sharepoint 列表分页开发
虽然现在linq技术对列表操作都是对实体操作了,但是linq有一点不好,那就是分页舞从下手,假如查出满足条件的记录有1万条,而在分页的时候我每次只需要显示10条,那么我每次点击下一页的时候都查询的是1 ...
- libevent源码学习(13):事件主循环event_base_loop
目录开启事件主循环执行事件主循环校对时间 阻塞/非阻塞处理激活队列中的event事件主循环的退出event_base_loopexitevent_base_loopbreak开启事件主循环 ...
- libevent源码学习(5):TAILQ_QUEUE解析
目录 前言 结点定义 链表初始化 链表查询及遍历 链表查询 链表遍历 插入结点 头插法 尾插法 前插法 后插法 删除结点 替换结点 总结 前言 在libevent中使用到了TAILQ数据结构,看了一下 ...
- Spring学习(一)idea中创建第一个Spring项目
1.前言 Spring框架是一个开放源代码的J2EE应用程序框架,由Rod Johnson发起,是针对bean的生命周期进行管理的轻量级容器(lightweight container). Sprin ...