php+jquery+ajax實現抽獎系統模塊代碼如下:
首頁在抽獎前需要將所有人員的參與名單在屏幕上滾動顯示,所以就用jquery實現了,
1. 參與名單將放在一個txt文件裡面,我將放到 phones.txt:
首先用ajax讀取讀取數據:
<script type="text/javascript">
$(document).ready(function(){
var phones;
var list_phones = '';
$.ajax({
url: './get_set.php',
type: 'POST',
dataType: 'text',
data: {'action' : 'get'},
success: function(data){
if(data && data != ''){
phones = data;
phones = phones.split(',');
//開始將參與名單滾動
for(var j=0; j<phones.length; j++){
list_phones += phones[j] + '<br />';
}
var list_content = $('<div />').addClass('list-div').css({'position' : 'relative', 'top' : 0}).html(list_phones);
$('#list-phones').append(list_content);
//alert($('#list-phones').html());
//alert($('.list-div').height());
}
}
});
//list-phones : height=3162 - 200;
var list_phones_h = 0;
var list_start = setInterval(
function(){
if(parseInt($('.list-div').position().top) < -2962){
$('.list-div').animate({top : 0});
list_phones_h = 0;
}
$('.list-div').animate({top : '-' + list_phones_h + 'px'}, function(){list_phones_h+=34;});
}, 1000
);
var start;
//中獎名單
var $s = '';
//獎項
var jx;
//是否開始
var flag = false;
$('#start').click(function(){
start_chou();
});
$('#stop').click(function(){
stop_chou();
});
$(window).bind('keydown', function(event){
if(event.keyCode === 32){
!flag ? start_chou() : stop_chou();
}
});
//開始抽獎
function start_chou(){
if(phones.length == 0){
$('#texes').val('error: 都抽完了,沒有可參與的抽獎名單了!');
$('#current').val('');
return;
}
//關閉滾動
clearInterval(list_start);
$('#list-phones').detach();
jx = $("input[name='jx']:checked").val();
if(!jx || jx == ''){
$('#texes').val('您還沒有設置本次抽獎獎項!');
return;
}
if(!flag){
//alert(jx);
$('#current').val('');
$('#texes').val('正在隨機抽取,請耐心等待......');
flag = true;
setTimeout(function(){
start = setInterval(function(){
$('#rrss').val(function(){
var len = phones.length;
var rand = Math.floor(Math.random() * len);
//console.log(rand);
return phones[rand];
});
$('#current').val(Math.floor(Math.random() * 100000000000000000));
},1);
}, 500);
}
}
//停止抽獎
function stop_chou(){
if(flag){
flag = false;
clearInterval(start);
$('#current').val($('#rrss').val());
if(jx === 'tex'){
$s += '特等獎: ' + $('#current').val() + ',';
$('#texes').val('特等獎!');
}else if(jx === 'one'){
$s += '一等獎: ' + $('#current').val() + ',';
$('#texes').val('一等獎!');
}else if(jx === 'two'){
$s += '二等獎: ' + $('#current').val() + ',';
$('#texes').val('二等獎!');
}else if(jx === 'three'){
$s += '三等獎: ' + $('#current').val() + ',';
$('#texes').val('三等獎!');
}else{
$s += '';
$('#texes').val('您還沒有設置本次抽獎獎項!');
}
//本次抽獎完成後,自動移出本次獲獎名單,不參與之後的抽獎
getIndex(phones, $('#current').val());
//將獲獎名單寫入到rs.txt文件中,記錄獲獎名單
set($s);
//alert($s);
}
}
function getIndex(arr, val){
var index = -1;
for(var i=0; i<arr.length; i++){
if(arr[i] == val)
index = i;
}
arr.splice(index, 1);
//alert(index);
}
//將中獎信息寫入
function set(rs){
$.ajax({
url : 'get_set.php',
type: 'POST',
dataType: 'text',
data: {'action' : 'set', 'rs' : rs},
success: function(data){return true;}
});
}
$(document).ready(function(){
$(window).bind('keydown', function(event){
if(event.keyCode === 37 || event.keyCode === 38){
window.location.href = 'index.html';
}
});
});
});
</script>
get_set.php文件直接讀取phones.txt文件,將參與名單用“,”連接成字符串,然後利用js的Array split方法分隔成數組. 抽獎時是顯示一些隨機數字,跳動時間為10ms。
get_set.php:
<?php
if(isset($_POST['action']) && $_POST['action'] == 'get'){
$file = './phones.txt';
$phones = '';
if(file_exists($file) && is_readable($file)){
$phones = file_get_contents($file);
$phones = preg_replace('/\\r\\n\s*/', ',', $phones);
}else{
die('phones.txt文件不存在或者不可讀');
}
Echo $phones;
/* Echo '<pre>';
print_r($phones); */
//Echo $phones;
}
if(isset($_POST['action']) && $_POST['action'] == 'set'){
$rs = $_POST['rs'];
$data = str_replace(',', "\r\n", $rs);
$file = './rs.txt';
file_put_contents($file, $data);
return true;
}
?>
中獎的名單將自動寫入到 rs.txt文件,而且中獎後將不再參與下一輪抽獎。
開始抽獎(或者 按 Space空格鍵開始/停止)
*