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 CSS菜单功能 改进版
Dec 20 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
js微信支付实现代码
Dec 22 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
微信小程序删除处理详解
Aug 16 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
javascript比较文档位置
2008/04/08 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
WebPack工具运行原理及入门教程
2020/12/02 Javascript
python判断windows隐藏文件的方法
2014/03/21 Python
Python判断Abundant Number的方法
2015/06/15 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
python数据爬下来保存的位置
2020/02/17 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
大学应届生求职简历的自我评价
2013/10/08 职场文书
大学生新闻专业个人自我评价
2013/11/12 职场文书
自主招生自荐书
2013/11/29 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
投标服务承诺书
2014/05/28 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
公司授权委托书范本
2014/09/18 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
学生检讨书
2015/01/27 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL