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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
js实现录音上传功能
Nov 22 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
Vue父组件监听子组件生命周期
Sep 03 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 jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
通过DOM脚本去设置样式信息
2010/09/19 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
Python中list初始化方法示例
2016/09/18 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
公务员的自我鉴定
2013/10/26 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
新学期决心书
2014/03/11 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
英文道歉信
2015/01/20 职场文书
欢迎词怎么写
2015/01/23 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
离婚答辩状范文
2015/05/22 职场文书
工作自我评价范文
2019/03/21 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书