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里的条件判断
Feb 27 Javascript
javascript显示选择目录对话框的代码
Nov 10 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
对TypeScript库进行单元测试的方法
Jul 18 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 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循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
一个简单的js动画效果代码
2010/07/20 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
浅谈css3中的前缀
2016/07/20 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
HTML5之语义标签介绍
2016/07/07 HTML / CSS
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
国贸专业个人求职信分享
2013/12/04 职场文书
初中地理教学反思
2014/01/11 职场文书
仓库文员岗位职责
2014/04/06 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
入党自传范文2015
2015/06/26 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers