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 相关文章推荐
nicejforms——美化表单不用愁
Feb 20 Javascript
javascript 操作文件 实现方法小结
Jul 02 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 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
域名查询代码公布
2006/10/09 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
JS分页效果示例
2013/10/11 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
layer 刷新某个页面的实现方法
2019/09/05 Javascript
Python使用turtule画五角星的方法
2015/07/09 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
python多线程同步之文件读写控制
2021/02/25 Python
Python的互斥锁与信号量详解
2019/09/12 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
银行进社区活动总结
2014/07/07 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
父亲去世追悼词
2015/06/23 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL