jquery 年会抽奖程序
更新时间：2011年12月22日 20:08:43 作者：
最近公司年会，有个流程要抽奖，特写了个一个简单的，纯jq代码，发给大家共享一下
看了一下，传不了源代码，特粘帖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.jb51.net/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>
复制代码 代码如下:
<!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.jb51.net/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>
相关文章
这篇文章主要为大家详细介绍了jquery实现边框特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要介绍了基于jQuery实现动态搜索显示功能的相关资料,输入数值自动匹配相关信息，感兴趣的小伙伴们可以参考一下2016-05-05
jQuery入门 构造函数，需要的朋友可以参考下。2009-10-10
jQuery Attributes(属性)的使用(二、类篇)
本系列文章主要讲述jQuery框架的属性(Attributes)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深，我的学习方法：先入门，后进阶！2009-12-12
这篇文章主要介绍了jQuery实现checkbox的简单操作，对复选框组的全选、全不选、不全选，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
JQuery 自定义CircleAnimation，Animate方法学习笔记
最近对看了一些JQuery的基础教程，被JQuery深深的吸引住了，以前用过Extjs，看了JQuery不禁感叹，javascript还能这么些，真是太神奇了！2011-07-07
这篇文章主要为大家详细介绍了jQuery实现全选、反选和不选功能 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
本文汇总介绍了常见的jQuery选择器知识，包含基本元素选择器、分层选择器、基本条件选择器、内容条件选择器、可见性条件选择器、属性选择器、子元素选择器、表单元素选择器、表单属性选择器。十分的详尽，有需要的小伙伴参考下吧2014-11-11
这篇文章主要介绍了jquery实现未经美化的简洁TAB菜单效果,涉及jquery鼠标click事件实现页面元素样式动态变换的功能,需要的朋友可以参考下2015-08-08
Android中的资源是指非代码部分，指外部文件，本文详细介绍资源使用概览，需要了解的朋友可以参考下2012-12-12
最新评论