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 写类方式之二
Jul 05 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
vue实现百度搜索功能
Dec 28 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获取微信openid方法总结
2019/10/10 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
python实现数据写入excel表格
2018/03/25 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
python 动态绘制爱心的示例
2020/09/27 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
python中操作文件的模块的方法总结
2021/02/04 Python
AURALog面试题软件测试方面
2013/10/22 面试题
党校学习思想汇报
2014/01/06 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
怎么写自荐书范文
2014/02/12 职场文书
公证委托书模板
2014/04/03 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
年终工作总结范文
2019/06/20 职场文书
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
nginx设置资源请求目录的方式详解
2022/05/30 Servers