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 相关文章推荐
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
js中时间格式化的几种方法
Jul 22 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
原生JS中应该禁止出现的写法
May 05 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新手NOTICE错误常见解决方法
2011/12/07 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
JSON 数据格式详解
2017/09/13 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
python中requests和https使用简单示例
2018/01/18 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
详解Python用户登录接口的方法
2019/04/17 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
python中get和post有什么区别
2020/06/19 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
linux面试题参考答案(4)
2014/09/21 面试题
《一株紫丁香》教学反思
2014/02/19 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
教师考察材料范文
2014/06/03 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
初中班主任培训心得体会
2016/01/07 职场文书