jquery 年会抽奖程序


Posted in Javascript onDecember 22, 2011

看了一下,传不了源代码,特粘帖html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<link href="Content/myPub.css" rel="stylesheet" type="text/css" /> 
<script src="Scripts/js/xfc.js" type="text/javascript"></script> 
<script src="http://demo.3water.com/jslib/jquery/jquery-1.6.2.min.js" type="text/javascript"></script> 
<!-- 导航切换 --> 
<style type="text/css"> 
.center 
{ 
text-align: center; 
height: auto; 
} 
.center span 
{ 
font-size: 50px; 
font-weight: 900; 
line-height: 50px; 
} 
.center img 
{ 
width: 1200px; 
height: 580px; 
} 
.s_chg 
{ 
float: left; 
width: 1240px; 
height: auto; 
margin-left:40px; 
} 
.s_chg img 
{ 
width: 240px; 
height: 120px; 
padding-top:10px; 
} 
.s_title 
{ 
color:Red; 
font-size :35px; 
font-weight:bold; 
} 
</style> 
</head> 
<body> 
<div class="w center hide "> 
<span id="chg" atg="0" >1</span> 
</div> 
<div class="w center" id="i_div"> 
<img id="chg_img" onclick="chg()" src="Content/images/JPEG/1 (1).jpg" /> 
</div> 
<div class="w " > 
<br/> 
<button onclick ="wshow(0)">查看全部获奖</button> 
<button onclick ="wshow(1)">查看一等奖获奖</button> 
<button onclick ="wshow(2)">查看二等奖获奖</button> 
<button onclick ="wshow(3)">查看三等奖获奖</button> 
<button onclick ="sshow()">开始抽奖</button></div> 
<div class="w s_chg" id="s_div"> 
</div> 
<script language="javascript" type="text/javascript"> 
var time = 0; 
var th = 9; 
var two = 5; 
var f =1; 
var max = 122; 
var t; 
var zhong = new Array(); 
function sshow() { 
$("#i_div").show(); 
$("#s_div").hide(); 
} 
function wshow(e) { 
var s_sum; 
switch (e) { 
case 0: 
s_sum = th + two + f; 
break; 
case 1: 
s_sum = th + two + f; 
break; 
case 2: 
s_sum = th + two; 
break; 
case 3: 
s_sum = th; 
break; 
} 
if (zhong.length < s_sum) { 
var cha = (s_sum) - (zhong.length); 
alert("名额还差 "+cha.toString()+" 名"); 
return; 
} 
$("#i_div").hide(); 
$("#s_div").show(); 
var sdiv = $("#s_div"); 
sdiv.children().remove(); 
if (e == 0 || e == 3) { 
var html = "<br/><br/><br/><span class='s_title'>三等奖</span><br/><br/><br/>"; 
sdiv.prepend(html); 
for (var i = 0; i < th; i++) { 
html = " <img src='Content/images/JPEG/1 (" + zhong[i] + ").jpg' /> "; 
sdiv.prepend(html); 
} 
} 
if (e == 0 || e == 2) { 
html = "<br/><br/><br/><span class='s_title'>二等奖</span><br/><br/><br/>"; 
sdiv.prepend(html); 
for (var i = (th); i < (th + two); i++) { 
html = " <img src='Content/images/JPEG/1 (" + zhong[i] + ").jpg' /> "; 
sdiv.prepend(html); 
} 
} 
if (e == 0 || e == 1) { 
html = "<br/><br/><br/><span class='s_title'>一等奖</span><br/><br/><br/>"; 
sdiv.prepend(html); 
for (var i = (th + two); i < (th + two + f); i++) { 
html = " <img src='Content/images/JPEG/1 (" + zhong[i] + ").jpg' /> "; 
sdiv.prepend(html); 
} 
} 
} 
function addtime() { 
if (time == max) 
time =0; 
time=time+1; 
$("#chg").html(time); 
$("#chg_img").attr("src", "Content/images/JPEG/1 (" +time+ ").jpg"); 
t = setTimeout("addtime()", 20); 
} 
function stoptime() { 
clearTimeout(t); 
while (chkzhong() == 1) { 
} 
zhong.push(time); 
$("#chg_img").attr("src", "Content/images/JPEG/1 (" + time + ").jpg"); 
} 
function chg() { 
if (zhong.length == (th + two + f)) { 
alert("抽奖名额已全,请查看"); 
return; 
} 
if ($("#chg").attr("atg") == "0") { 
$("#chg").attr("atg", "1"); 
addtime(); 
} else { 
$("#chg").attr("atg", "0"); 
stoptime(); 
if (zhong.length == (th )) { 
alert("三等奖已经抽完 "); 
return; 
} 
if (zhong.length == (th + two )) { 
alert("二等奖已经抽完 "); 
return; 
} 
if (zhong.length == (th + two + f )) { 
alert("一等奖已经抽完"); 
return; 
} 
} 
} 
function chkzhong() { 
for (var it in zhong) { 
if (it == time) { 
if (time == max) 
time=0 
time = time + 1; 
return 1; 
} else { 
return 0; 
} 
} 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
Javascript var变量隐式声明方法
Oct 19 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
JavaScript 原型继承
Dec 26 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
JS实现横向轮播图(中级版)
Jan 18 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 #Javascript
jquery随机展示头像代码
Dec 21 #Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 #Javascript
jquery $.getJSON()跨域请求
Dec 21 #Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 #Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 #Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 #Javascript
You might like
PHP导入Excel到MySQL的方法
2011/04/23 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python操作sqlite的CRUD实例分析
2015/05/08 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Django实现发送邮件功能
2019/07/18 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
商务英语专业自荐信
2013/10/14 职场文书
应届生新闻编辑求职信
2013/11/19 职场文书
优秀实习自我鉴定
2013/12/04 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
建筑投标担保书
2014/05/20 职场文书
完整版商业计划书
2014/09/15 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
终止合同协议书范本
2016/03/22 职场文书
责任书格式
2019/04/18 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
解决Pytorch中关于model.eval的问题
2021/05/22 Python