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空格鍵開始/停止)
*