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 相关文章推荐
js 代码集(学习js的朋友可以看下)
Jul 22 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 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
实现树状结构的两种方法
2006/10/09 PHP
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
Django中Forms的使用代码解析
2018/02/10 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
python实现简单飞行棋
2020/02/06 Python
python里反向传播算法详解
2020/11/22 Python
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
高中微机老师自我鉴定
2014/02/16 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
《圆的周长》教学反思
2016/02/17 职场文书