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 radio 联动效果
Mar 04 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
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中计算时间差的几种方法
2009/12/31 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
mac使用python识别图形验证码功能
2020/01/10 Python
博士生导师推荐信
2014/07/08 职场文书
环境保护建议书
2014/08/26 职场文书
新兵入伍心得体会
2014/09/04 职场文书
工作调动申请报告
2015/05/18 职场文书
幼儿园见习总结
2015/06/23 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server