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 相关文章推荐
Jquery插件 easyUI属性汇总
Jan 19 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
详解ES6 Symbol 的用途
Oct 14 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
微信小程序实现侧边栏分类
Oct 21 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安全配置方法
2007/06/16 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
实例Python处理XML文件的方法
2015/08/31 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
材料成型及控制工程专业求职信
2014/06/19 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js