jquery实现数字抽奖（版本2）

最新推荐文章于 2021-02-28 03:57:13 发布
原创最新推荐文章于 2021-02-28 03:57:13 发布 · 1.1k 阅读
0 ·
CC 4.0 BY-SA版权
js应用同时被 2 个专栏收录
20 篇文章
订阅专栏
jQuery
6 篇文章
订阅专栏
本文介绍了如何利用HTML和jQuery创建一个数字抽奖效果，通过代码示例展示具体实现过程。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
【HTML+Jquery代码】
<span style="font-size:14px;"><!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>现场抽奖</title>
	<link rel="stylesheet" type="text/css" href="jquery-ui-1.7.2.custom.css" />
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>


<style type="text/css">
body{
	background:#CF0101;
	color:#FFF;
	text-align:center;
	}

table{
	margin: 12px auto;
	border-collapse: collapse;
	width: 95%;
	background: #fff;
}

th, td{
	border: 2px solid #333;
}

label{
	margin: 6px 0;
	font-size: 14px;
	font-weight: bold;
	display: block;
}

input[type=text]{
	width:95%;
}
input{
	width: expression(this.type=="text"?"600px":"auto");
}   
textarea{
	width:95%;
}

#main{
	color: #000;
	margin: 0 auto;
	padding-top: 40px;;
	width:600px;
}

#event_title{
	margin: 26px;
	padding: 0;
	font-size: 56px;
	text-align: center;
}
#event_title span{
	padding: 0 32px;
}

#rolling_board{
	color: #000;
	line-height: 40px;
	font-size: 40px;
	font-weight: bold;
	margin: 34px auto;
	padding: 8px;
	text-align: center;
	background: #ff3;
	border: 6px solid #03f;
}

#current_step{
	line-height: 42px;
	font-size: 42px;
	font-weight: bold;
}

#tabs{
	padding: 0;
}



#tabs-2,
#tabs-3,
#tabs-4{
	border: 1px solid #ccc;
	background-color:#FFF;
	font-size:1.5em;
	padding:1em 2em 2em;
}

#tabs-3 h3,
#tabs-4 h3{
	padding-left: 6px;
	border-left: 6px solid #c00;
}
#tabs-3 h2{
	color:red
}

#rotate_div{
	padding-top: 60px;
	height: 400px;
}

#print_box{
	margin-top: 30px;
	font-weight: bold;
	font-size: 28px;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
#print_box span{
	margin: 4px;
	color: #fff;
	background: #36f;
}
</style>

</head>
<body>

<script type="text/javascript">
<!--
var game;


$(function(){
	$('#loading').hide();
	$('#tabs').slideDown('fast');
	$('#tabs').tabs();

	game = new Game();
	save_setting();
});

// 绑定回车键盘操作
$(document).keypress(function (e){
	switch(e.which){
		case 13:
			game.process();
			break;
		case 32:
			game.process();
			break;
	}
});

//-->
</script>


<div id="main">



<div id="loading" style="text-align: center;">
	<h2>Loading...</h2>
	<p><p>
</div> 




<div id="tabs">
<div id="tabs-1" style="background: #fff;border-radius: 10px;">
	<h1 id="event_title"><span>抽奖软件</span></h1>

	<div id="rotate_div">
		<div><span id="current_step"></span></div>

		<div id="rolling_board">...</div>
		
		<div id="print_box"></div>
	</div>
</div>
<!-- /#tabs-1 -->

<div id="tabs-2" style="background: #fff;">
	<label>活动标题</label>
	<div><input type="text" name="title" value="现场抽奖" /></div>

	<label>奖项设置</label>
	<div>每行一个奖项, 格式为竖线分隔的: 奖项名|数量|每次抽几个</div>
<textarea name="prizes" rows="6" cols="84">
三等奖|10|1
二等奖|6|1
一等奖|2|1
</textarea>

	<label>候选人列表</label>
	<div>每行一人, 或半角逗号分隔</div>
	
<textarea name="candidates" rows="6" cols="84">
0001，0002，0003，0004，0005，0006，0007，0008，0009，0010，0011，0012，0013，0014，0015，0016，0017，0018，0019，0020，0021，0022，0023，0024，0025，0026，0027，0028，0029，0030，0031，0032，0033，0034，0035，0036，0037，0038，0039，0040，0041，0042，0043，0044，0045，0046，0047，0048，0049，0050，0051，0052，0053，0054，0055，0056，0057，0058，0059，0060，0061，0062，0063，0064，0065，0066，0067，0068，0069，0070，0071，0072，0073，0074，0075，0076，0077，0078，0079，0080，0081，0082，0083，0084，0085，0086，0087，0088，0089，0090，0091，0092，0093，0094，0095，0096，0097，0098，0099，0100
</textarea>

	<label>跳动时间间隔</label>
	<div><input type="text" name="interval" value="50"/> ms</div>


	<label>背景图片</label>
	<div>可以输入图片链接使用网络上的图片, 也可以把图片拷贝到当前目录, 把图片文件名填入即可.</div>
	<div><input name="background_image" type="text" value="" /></div>


	<p><input type="button" value="保存" onclick="save_setting()" /></p>
</div>
<!-- /#tabs-2 -->

<div id="tabs-3">
	<h3>还未开始</h3>
</div>
<!-- /#tabs-3 -->

<div id="tabs-4">
	

	<h3>操作方便</h3>
	<p>抽奖过程全键盘操作, 只需要按回车(Enter)键即可, 类似播放PPT幻灯片, 非常简单.</p>

	<h3>配置灵活</h3>
	<p>可配置的选项有: 活动标题, 奖项, 候选人, 摇奖时的跳转速度, 背景图片. 其中, 每一个奖项, 可以一次开完, 也可以一次只开一部分. 例如, 三等奖一共6个, 每次只开2个, 需要开3次才能开完三等奖, 增加娱乐性. 图片可以更换为带自己公司Logo的图片, 以便适应当前节日, 所以, 本抽奖程序任何节日的任何类似的抽奖节目都可使用.</p>

	<h3>开放源码</h3>
	<p>对于带有Geek精神, 爱好编程的朋友, 想对这个小工具做一些小修改, 这是完全可以的. 这个小工具完全开放源码, 一般会做网站的人都能做个性化的修改. 如果你修改后觉得很满意, 可以告诉我^_^.</p>

	<h3>抽奖流程</h3>
<pre>
等待开始
开场(open): 奖项介绍
奖项循环: 如果多于一个奖项, 则循环
	奖项开场(step_open)
	摇奖循环: 如果不是一次开完一个奖项, 则循环
		摇奖开始(rotate_start)
		摇奖结束(rotate_stop)
	奖项结束(step_close): 单项中奖名单
闭场(close)
</pre>
</div>
<!-- /#tabs-4 -->


	<div style="margin:5px;"> </div>

	<ul>
		<li><a href="#tabs-1">抽奖</a></li>
		<li><a href="#tabs-2">设置</a></li>
		<li><a href="#tabs-3">结果</a></li>
		<li><a href="#tabs-4">帮助</a></li>
	</ul>
</div>




<script type="text/javascript">
<!--
function in_array(item, list){
	for(var i=0; i<list.length; i++){
		if(item == list[i]){
			return true;
		}
	}
	return false;
}

/**
 * 返回指定元素在数组中的索引, 如果没找到, 返回-1;
 */
function array_find(list, item){
	for(var i=0; i<list.length; i++){
		if(item == list[i]){
			return i;
		}
	}
	return -1;
}

// 从数组中删除元素. 返回新数组.
function array_del(list, item){
	var arr = [];
	for(var i=0; i<list.length; i++){
		if(item != list[i]){
			arr.push(list[i]);
		}
	}
	return arr;
}

// 从数组中删除元素. 返回新数组.
function array_del_all(list, items){
	var arr = [];
	for(var i=0; i<list.length; i++){
		if(array_find(items, list[i]) == -1){
			arr.push(list[i]);
		}
	}
	return arr;
}

/**
 * 把数组当作环形的, 返回从start开始, 一共count个元素.
 * 如果count大于数组长度, 返回整个数组.
 */
function array_slice(list, start, count){
	var ret;

	ret = list.slice(start, start + count);
	if(ret.length < count){
		ret = ret.concat(list.slice(0, count - ret.length));
	}

	return ret;
}

// 扰乱数组元素的顺序.
function array_shuffle(list){
	var len = list.length;
	for(var i=0; i<len*5; i++){
		var p1 = parseInt(len * Math.random());
		var p2 = parseInt(len * Math.random());
		var tmp = list[p1];
		list[p1] = list[p2];
		list[p2] = tmp;
	}
}


/*
状态/动作

开场(open)
循环{
	奖项开场(step_open)
	奖项抽奖(rotate_start)
	奖项抽奖(rotate_stop)
	奖项闭场(step_close)
}
闭场(close)

*/
var Game = function(){
	var self = this;

	this.step = -1;
	this.interval = 100;
	this.rotate_index = 0;
	self.action = 'open';

	this.prizes = [];
	this.candidates = [];
	this.results = [];

	this.init = function(){
		this.step = 0;
		this.stop = false;
		this.rotate_index = 0;
		self.action = 'open';
		this.results = [];

		for(var i=0; i<self.prizes.length; i++){
			var p = self.prizes[i];
			self.results[i] = [];
		}
		
		show_current_step('');
		var str = '请按空格开始';
		str += '<br/><br/>';
		print_box('请按空格开始');
		
		$('#rolling_board').hide();
		$('#rotate_div').css('background', '');
	}

	this.reset = function(){
		this.prizes = [];
		this.candidates = [];
		this.results = [];
	}

	this.process = function(){
		show_results();

		// 先更新状态再执行函数
		switch(self.action){
			case 'open':
				self.action = 'step_open';
				$('#rotate_div').hide();
				on_open();
				$('#rotate_div').fadeIn('slow');
				break;
			case 'close':
				self.action = '';
				on_close();
				break;
			case 'step_open':
				self.action = 'rotate_start';
				$('#rotate_div').hide();
				on_step_open();
				$('#rotate_div').fadeIn('fast');
				break;
			case 'step_close':
				if(self.step == self.prizes.length){
					self.action = 'close';
				}else{
					self.action = 'step_open';
				}
				on_step_close();
				break;
			case 'rotate_start':
				self.action = 'rotate_stop';
				on_rotate_start();
				break;
			case 'rotate_stop':
				on_rotate_stop();
				break;
			default:
				save_setting();
				break;
		}
	};
}

function on_open(){
	show_current_step('活动说明');

	var str = '<table align="center">';
	str += '<tr><th>奖项</th><th>数量</th></tr>\n';
	for(var i=game.prizes.length-1; i>=0; i--){
		var p = game.prizes[i];
		str += '<tr><td>' + p.name + '</td><td>' + p.num + '</td></tr>\n';
	}
	str += '</table>';
	print_box(str);
}

function on_close(){
	show_current_step('');

	$('#print_box').hide();
	var str = '';
	str += '<span><b style="font-size: 62px; background: #36f;">抽奖结束</b><span><br/>';
	print_box(str);
	$('#print_box').fadeIn('slow', function(){
		$('#rotate_div').css('background', 'url(framework.gif)');
	});
}

function on_step_open(){
	show_current_step();
	print_box('按空格开始');
	$('#rolling_board').html('...');
}

function on_step_close(){
	var str = '';
	str += '<span> * 中奖名单 * <br/><br/>';
	var r = game.results[game.step - 1];
	for(var n=0; n<r.length; n++){
		str += '  ' + r[n];
	}
	str += '</span>';
	
	print_box(str);
	$('#rolling_board').slideUp('normal');
}

function on_rotate_start(){
	$('#rolling_board').slideDown('normal');

	game.interval = parseInt($('input[name=interval]').val());

	game.stop = false;
	game.rotate_index = 0;

	// 打乱顺序
	array_shuffle(game.candidates);
	
	rotate_run();

	show_current_step();
	print_box('<p><img src="gongxi.gif"></p>按空格停止');
}


function on_rotate_stop(){
	// 等一段随机时间再停止.
	//game.interval += parseInt(0.9 * game.interval);
	//setTimeout('game.stop=true', 230 + parseInt(230*Math.random()));
	game.stop = true;
}


function rotate_run(){
	var num_a = game.prizes[game.step].num_a_time;
	var size = game.prizes[game.step].num - game.results[game.step].length;
	if(size > num_a){
		size = num_a;
	}

	var arr = array_slice(game.candidates, game.rotate_index, size);
	$('#rolling_board').html(arr.join(' '));

	game.rotate_index += num_a;
	if(game.rotate_index >= game.candidates.length){
		game.rotate_index -= game.candidates.length;
	}

	if(game.stop){
		game.action = 'rotate_start';
		
		game.results[game.step] = game.results[game.step].concat(arr);
		game.candidates = array_del_all(game.candidates, arr);

		show_results();
		print_box('按空格继续');

		if(game.results[game.step].length == game.prizes[game.step].num){
			game.step ++;
			game.action = 'step_close';
		}

		var h = '<span style="color: #f33">' + $('#rolling_board').html() + '</span>';
		$('#rolling_board').html(h)
	}else{
		setTimeout('rotate_run()', game.interval);
	}
}


function show_current_step(str){
	if(str == undefined){
		var found = game.results[game.step].length;
		var all = game.prizes[game.step].num;
		var num_a = game.prizes[game.step].num_a_time;
		var b = (num_a+found) > all? all : (num_a+found);

		var str = game.prizes[game.step].name + '(共' + game.prizes[game.step].num + '个';
		if(num_a != all){
			str += '#' + (found + 1) + '' ; //+ b
		}
		str +=  ')';
	}
	if(str == ''){
		$('#current_step').hide('fast');
	}else{
		$('#current_step').html(str);
		$('#current_step').show();
	}
}

function print_box(str){
	if(str == undefined){
		var str = '<span>';
		var r = game.results[game.step];
		for(var n=0; n<r.length; n++){
			str += r[n] + '  ';
		}
		str += '</span>';
	}
	if(str == ''){
		$('#print_box').hide('fast');
	}else{
		$('#print_box').html(str);
		$('#print_box').show();
	}
}

function show_results(){
	var str = '';
	for(var i=game.results.length-1; i>=0; i--){
		str += '<h2>' + game.prizes[i].name + '</h2>';
		var r = game.results[i];
		for(var n=0; n<r.length; n++){
			str += r[n] + '  ';
		}
		str += '<br/>';
	}
	$('#tabs-3').html(str);
}


function save_setting(){
	game.reset();

	var ps = $.trim($('textarea[name=prizes]').val()).split('\n');
	for(var i=0; i<ps.length; i++){
		var p = $.trim(ps[i]);
		if(p.length == 0){
			continue;
		}
		var ex = p.split('|');
		var prize = {
			name : $.trim(ex[0]),
			num : parseInt($.trim(ex[1])),
			num_a_time : parseInt($.trim(ex[2])),
			award : $.trim(ex[3])
		};
		game.prizes.push(prize);
	}

	var ps = $.trim($('textarea[name=candidates]').val()).replace(/,/g, '\n').split('，');
	for(var i=0; i<ps.length; i++){
		var p = $.trim(ps[i]);
		if(p.length == 0){
			continue;
		}
		game.candidates.push(p);
	}

	$('#event_title span').html($('input[name=title]').val());

	game.init();
}
//-->
</script>




</div>
<!-- /#main -->


</body>
</html></span>
具体完整的demo可以到我的资源中下载：http://download.youkuaiyun.com/detail/u011781769/9332285
【效果预览】