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组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
解决Vue watch里调用方法的坑
Nov 07 Javascript
javascript对象3个属性特征
Nov 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测试程序运行时间的类
2012/02/05 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
Javascript倒计时代码
2010/08/12 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
Python按行读取文件的简单实现方法
2016/06/22 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
python 调用Google翻译接口的方法
2020/12/09 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
英国健身专家:WIT Fitness
2021/02/09 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
2015毕业生实习期工作总结
2015/04/09 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
Python基础之变量的相关知识总结
2021/06/23 Python