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 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
javascript判断office版本示例
Apr 11 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
js实现网页定位导航功能
Mar 07 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
openlayers4实现点动态扩散
Aug 17 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 fsockopen伪造post与get方法的详解
2013/06/14 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
javascript回调函数详解
2018/02/06 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
python3中eval函数用法使用简介
2019/08/02 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
推荐信怎么写
2014/05/09 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
小学远程教育工作总结
2015/08/13 职场文书
创业计划书之家教中心
2019/09/25 职场文书
Python实现排序方法常见的四种
2021/07/15 Python
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
docker-compose部署Yapi的方法
2022/04/08 Servers