jquery 年會(huì)抽獎(jiǎng)程序
更新時(shí)間:2011年12月22日 20:08:43 作者:
最近公司年會(huì),有個(gè)流程要抽獎(jiǎng),特寫了個(gè)一個(gè)簡(jiǎn)單的,純jq代碼,發(fā)給大家共享一下
看了一下,傳不了源代碼,特粘帖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>
<!-- 導(dǎo)航切換 -->
<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)">查看全部獲獎(jiǎng)</button>
<button onclick ="wshow(1)">查看一等獎(jiǎng)獲獎(jiǎng)</button>
<button onclick ="wshow(2)">查看二等獎(jiǎng)獲獎(jiǎng)</button>
<button onclick ="wshow(3)">查看三等獎(jiǎng)獲獎(jiǎng)</button>
<button onclick ="sshow()">開始抽獎(jiǎng)</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'>三等獎(jiǎng)</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'>二等獎(jiǎng)</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'>一等獎(jiǎng)</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("抽獎(jiǎng)名額已全,請(qǐng)查看");
return;
}
if ($("#chg").attr("atg") == "0") {
$("#chg").attr("atg", "1");
addtime();
} else {
$("#chg").attr("atg", "0");
stoptime();
if (zhong.length == (th )) {
alert("三等獎(jiǎng)已經(jīng)抽完 ");
return;
}
if (zhong.length == (th + two )) {
alert("二等獎(jiǎng)已經(jīng)抽完 ");
return;
}
if (zhong.length == (th + two + f )) {
alert("一等獎(jiǎng)已經(jīng)抽完");
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>
復(fù)制代碼 代碼如下:
<!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>
<!-- 導(dǎo)航切換 -->
<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)">查看全部獲獎(jiǎng)</button>
<button onclick ="wshow(1)">查看一等獎(jiǎng)獲獎(jiǎng)</button>
<button onclick ="wshow(2)">查看二等獎(jiǎng)獲獎(jiǎng)</button>
<button onclick ="wshow(3)">查看三等獎(jiǎng)獲獎(jiǎng)</button>
<button onclick ="sshow()">開始抽獎(jiǎng)</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'>三等獎(jiǎng)</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'>二等獎(jiǎng)</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'>一等獎(jiǎng)</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("抽獎(jiǎng)名額已全,請(qǐng)查看");
return;
}
if ($("#chg").attr("atg") == "0") {
$("#chg").attr("atg", "1");
addtime();
} else {
$("#chg").attr("atg", "0");
stoptime();
if (zhong.length == (th )) {
alert("三等獎(jiǎng)已經(jīng)抽完 ");
return;
}
if (zhong.length == (th + two )) {
alert("二等獎(jiǎng)已經(jīng)抽完 ");
return;
}
if (zhong.length == (th + two + f )) {
alert("一等獎(jiǎng)已經(jīng)抽完");
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.rotate.js實(shí)現(xiàn)可選抽獎(jiǎng)次數(shù)和中獎(jiǎng)內(nèi)容的轉(zhuǎn)盤抽獎(jiǎng)代碼
- jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法
- jquery 抽獎(jiǎng)小程序?qū)崿F(xiàn)代碼
- jquery實(shí)現(xiàn)九宮格大轉(zhuǎn)盤抽獎(jiǎng)
- jQuery實(shí)現(xiàn)類似老虎機(jī)滾動(dòng)抽獎(jiǎng)效果
- jquery輸入數(shù)字隨機(jī)抽獎(jiǎng)特效的簡(jiǎn)單實(shí)現(xiàn)代碼
- jquery實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)功能
- jquery——九宮格大轉(zhuǎn)盤抽獎(jiǎng)實(shí)例
- jQuery+PHP實(shí)現(xiàn)的擲色子抽獎(jiǎng)游戲?qū)嵗?/a>
- jQuery實(shí)現(xiàn)移動(dòng)端扭蛋機(jī)抽獎(jiǎng)
相關(guān)文章
基于jQuery實(shí)現(xiàn)動(dòng)態(tài)搜索顯示功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)動(dòng)態(tài)搜索顯示功能的相關(guān)資料,輸入數(shù)值自動(dòng)匹配相關(guān)信息,感興趣的小伙伴們可以參考一下2016-05-05jQuery Attributes(屬性)的使用(二、類篇)
本系列文章主要講述jQuery框架的屬性(Attributes)使用方法,我將以實(shí)例方式進(jìn)行講述,以簡(jiǎn)單,全面為基礎(chǔ),不會(huì)涉及很深,我的學(xué)習(xí)方法:先入門,后進(jìn)階!2009-12-12jQuery實(shí)現(xiàn)checkbox的簡(jiǎn)單操作
這篇文章主要介紹了jQuery實(shí)現(xiàn)checkbox的簡(jiǎn)單操作,對(duì)復(fù)選框組的全選、全不選、不全選,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11JQuery 自定義CircleAnimation,Animate方法學(xué)習(xí)筆記
最近對(duì)看了一些JQuery的基礎(chǔ)教程,被JQuery深深的吸引住了,以前用過(guò)Extjs,看了JQuery不禁感嘆,javascript還能這么些,真是太神奇了!2011-07-07jquery實(shí)現(xiàn)未經(jīng)美化的簡(jiǎn)潔TAB菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)未經(jīng)美化的簡(jiǎn)潔TAB菜單效果,涉及jquery鼠標(biāo)click事件實(shí)現(xiàn)頁(yè)面元素樣式動(dòng)態(tài)變換的功能,需要的朋友可以參考下2015-08-08