jquery實現數字抽獎（版本1）
阿新 • • 發佈：2019-01-21
實現數字抽獎，首先給使用者一個設定抽獎個數和抽獎數字範圍的設定頁面
STEP1：【HTML+Jquery程式碼】
此處需要用到jquery實現頁面的跳轉和引數傳遞
location.href = "/group/tool/choujiang?num="+num+"&min="+min+"&max="+max;
<!DOCTYPE html> <span style="font-size:14px;"><html> <head> <? $this->load->view('meta'); ?> <script> require(["jquery", "bootstrap"], function($) { $(function() { $('#save').on('click', function() { var num=$('input[name="form[num]"]').val(); var min=$('input[name="form[min]"]').val(); var max=$('input[name="form[max]"]').val(); location.href = "/group/tool/choujiang?num="+num+"&min="+min+"&max="+max;//jquery實現頁面的跳轉和引數傳遞 }); }); }); </script> <style> body{ background-position: center; background-repeat: no-repeat; background-attachment: fixed; } .demo{width:800px; margin:60px auto;height:500px;position: relative;padding: 3% 0;} #roll{padding: 3% 0;} .h1{font-size:6em; color: #ffb400;margin-bottom: 10px;} .col-sm-3{ font-size:3.8em; color: #fff;} .col-sm-12{ font-size:4em; color: #fff; line-height: 2em;} .huge{font-size:8em; margin-top: 60px;} #save{color: #fff;font-size:1.5em; } #stop{display:none;color: red;} #result{margin-top:20px; line-height:24px; font-size:16px; text-align:center} .label{color:#fff;} </style> </head> <body background="http://school.guzheng.name/statics/img/choujiang.jpg"> <div class="container-fluid"> <div class="demo"> <h1 class="center h1">新生音樂會現場抽獎</h1> <div id="roll"> <div class="form-group"> <h1 style="color:#fff">抽獎個數</h1> <input type="text" class="form-control" name="form[num]" value="1" required> </div> <div class="form-group"> <h1 style="color:#fff">起始編號</h1> <input type="text" class="form-control" name="form[min]" value="1" required> </div> <div class="form-group"> <h1 style="color:#fff">截止編號</h1> <input type="text" class="form-control" name="form[max]" value="1000" required> </div> <div class="form-group mt40"> <a href="#" type="button" class="btn btn-warning btn-lg btn-block" id="save" value="確認儲存進入抽獎頁面"> 確認儲存進入抽獎頁面</a> </div> </div> </div> </body> </html></span>
頁面跳轉choujiang函式
<span style="font-size:14px;">public function choujiang() { $num=$this->input->get('num')?$this->input->get('num'):1; $min=$this->input->get('min')?$this->input->get('min'):1; $max=$this->input->get('max')?$this->input->get('max'):1; $this->load->view('tool/choujiang',array( 'num'=>$num, 'min'=>$min, 'max'=>$max, </span>)); }
STEP2：設定頁面展示
STEP3：抽獎頁面的【HTML+jquery程式碼】
抽獎頁面的【PHP函式：function data() 】<!DOCTYPE html> <html> <head> <? $this->load->view('meta'); ?> <script> count = <? echo $num ?>; min = <? echo $min ?>; max = <? echo $max ?>; require(["jquery", "bootstrap"], function($) { $(function() { var _gogo; var start_btn = $("#start"); var stop_btn = $("#stop"); var json = {}; $('#start').on('click', function() { $("#hiden").hide(); //此處呼叫的是一個函式，也可以直接呼叫php檔案，具體方法：略。 $.post('/group/tool/data',{min:min,max:max},function(data) { if(data){ var obj = eval(data);//將JSON字串轉化為物件 var len = obj.length; _gogo = setInterval(function(){ var form = 0;//結合json[]避免重複性，已經中獎的數字加上標籤1 for(i=1;i<=count;i++){ var num = Math.floor(Math.random()*(len-form))+form;//獲取隨機數 if(!json[num]) { json[num]=1; $("#roll"+i).html(obj[num]['number']); } } },100); //每隔0.1秒執行一次 stop_btn.show(); start_btn.hide(); }else{ $(".roll").html('系統找不到資料來源，請先匯入資料。'); } }); }); $('#stop').on('click', function() { clearInterval(_gogo); stop_btn.hide(); start_btn.show(); }); }); }); </script> <style> body{ background-position: center; background-repeat: no-repeat; background-attachment: fixed; } .demo{width:800px; margin:60px auto; text-align:center;height:500px;position: relative;padding: 3% 0;} #roll{padding: 3% 0;} .h1{font-size:6em; color: #ffb400;margin-bottom: 10px;} .col-sm-3{ font-size:3.8em; color: #fff;} .col-sm-12{ font-size:4em; color: #fff; line-height: 2em;} .huge{font-size:8em; margin-top: 60px;} .btn{width:150px; height:55px; line-height:26px;border:1px solid #d3d3d3; cursor:pointer;font-weight: bold;font-size: 2em;} #start{color: green;} #stop{display:none;color: red;} #result{margin-top:20px; line-height:24px; font-size:16px; text-align:center} </style> </head> <body background="http://school.guzheng.name/statics/img/choujiang.jpg"> <div class="container-fluid"> <div class="demo"> <h1 class="center h1">新生音樂會現場抽獎</h1> <div id="roll"> <span class="col-sm-12 huge" id="hiden">準 備 !</span> <div class="child"> <?if($num==1):?> <span class="col-sm-12 huge" id="roll1"></span> <input type="hidden" id="mid1" value=""> <?elseif($num<=4):?> <?for($i=1;$i<=$num;$i++):?> <span class="col-sm-12" id="roll<?echo $i?>"></span> <input type="hidden" id="mid<?echo $i?>" value=""> <?endfor;?> <?else:?> <?for($i=1;$i<=$num;$i++):?> <span class="col-sm-3" id="roll<?echo $i?>"></span> <input type="hidden" id="mid<?echo $i?>" value=""> <?endfor;?> <?endif;?> </div> </div> </div> <div class="pull-right"> <p class="mt40" style="margin-right:50px;"> <input type="button" class="btn" id="start" value="開 始"> <input type="button" class="btn" id="stop" value="停 止"> </p> </div> </div> </body> </html>
<span style="font-size:14px;">public function data() {
$min=$this->input->post('min');
$max=$this->input->post('max');
$arr = array();
for($i=$min;$i<$max;$i++){
$arr[] = array(
'number' =>str_pad($i, 4, 0, STR_PAD_LEFT) ,//控制顯示數字固定位四位數
);
}
echo json_encode($arr);
}</span>STEP4：抽獎頁面的效果預覽
