前台頁面：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="html5,本地存儲" /> <meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" /> <title>幸運大轉盤-jQuery+PHP實現的抽獎程序</title> <style type="text/css"> *{ margin:0; padding:0;} img { border:none;} .w1000{ width:1000px; margin:0 auto;} .w1000 img, .gl img{ display:block;} /*中獎名單*/ button{padding:2px 8px;} .action{text-align:center; padding:10px; border-bottom:dashed 1px #ccc;} #rightDemo{width:257px; padding:10px;position:absolute; left:95px; top:90px;} #rightDemo li{ color:#825a00; font-size:13px;width:257px;} ul{ height:335px; overflow:hidden;} ul li{line-height:30px; height:30px; overflow:hidden; list-style:none; padding:0; margin:0;} /*頁面樣式*/ .box_11{ background:url(http://www.sansejin.com.cn/themes/laboci_2012/images/sales201308/box_r11_bg.jpg) no-repeat center center;} .gl{ background:#F00F4B;} /*轉盤樣式*/ #main{width:1000px; min-height:600px; margin:0 auto;} .demo{width:1000px; height:527px; position:relative; margin:0 auto; zoom:1;} #disk{width:1000px; height:527px; background:url(http://www.sansejin.com.cn/themes/laboci_2012/images/sales201308/disk.jpg) no-repeat} #start{width:111px; height:212px; position:absolute; top:149px; left:605px;} #start img{cursor:pointer} /*轉盤樣式*/ </style> <script type="text/javascript" src="http://www.helloweba.com/demo/js/jquery.js"></script> <script type="text/javascript" src="http://www.helloweba.com/demo/lottery/jQueryRotate.2.2.js"></script> <script type="text/javascript" src="http://www.helloweba.com/demo/lottery/jquery.easing.min.js"></script> <script type="text/javascript"> $(function(){ $("#startbtn").click(function(){ lottery(); }); }); function lottery(){ $.ajax({ type: 'POST', url: 'data.php', dataType: 'json', cache: false, error: function(){ alert('出錯了！'); return false; }, success:function(json){ $("#startbtn").unbind('click').css("cursor","default"); var a = json.angle; var p = json.prize; $("#startbtn").rotate({ duration:3000, //轉動時間 angle: 0, //默認角度 animateTo:1800+a, //轉動角度 easing: $.easing.easeOutSine, callback: function(){ alert('恭喜你，抽中'+'"'+p+'"!'); $("#startbtn").rotate({angle:0}); $("#startbtn").click(function(){ lottery(); }).css("cursor","pointer"); } }); } }); } </script> </head> <body> <div class="gl"> <!--抽獎區域[--> <div class="gl"> <div class="box_11"> <!--抽獎轉盤[--> <div class="demo"> <div id="disk"></div> <div id="start"><img src="http://www.sansejin.com.cn/themes/laboci_2012/images/sales201308/start.png" alt="抽獎" id="startbtn"/></div> <!--中獎名單[--> <div id="rightDemo"> <ul id="rightBox"> <li>手機尾號為***7884的用戶抽中100元現金券大禮包</li> <li>手機尾號為***7884的用戶抽中100元現金券大禮包</li> <li>手機尾號為***0573的用戶抽中大獎iphone5智能手機</li> <li>手機尾號為***3200的用戶抽中300元現金券大禮包</li> <li>手機尾號為***4520的用戶抽中300元現金券大禮包</li> <li>手機尾號為***2341的用戶抽中300元現金券大禮包</li> <li>手機尾號為***9687的用戶抽中3折搶購齒白健精品套裝</li> <li>手機尾號為***0931的用戶抽中300元現金券大禮包</li> <li>手機尾號為***1747的用戶抽中3折搶購紅酒木瓜豐胸靚湯</li> <li>手機尾號為***3748的用戶抽中100元現金券大禮包</li> <li>手機尾號為***0125的用戶抽中300元現金券大禮包</li> <li>手機尾號為***0063的用戶抽中3折搶購魔泥金裝精品套裝</li> <li>手機尾號為***7884的用戶抽中300元現金券大禮包</li> <li>手機尾號為***5892的用戶抽中100元現金券</li> <li>手機尾號為***7884的用戶抽中300元現金券大禮包</li> <li>手機尾號為***7224的用戶抽中3折搶購祛疤精華凝露組合二代</li> <li>手機尾號為***7910的用戶抽中300元現金券大禮包</li> <li>手機尾號為***2832的用戶抽中300元現金券大禮包</li> <li>手機尾號為***3488的用戶抽中3折搶購紅酒木瓜豐胸靚湯</li> <li>手機尾號為***6693的用戶抽中300元現金券大禮包</li> <li>手機尾號為***4787的用戶抽中3折搶購齒白健精品套裝</li> <li>手機尾號為***8547的用戶抽中3折搶購祛疤精華凝露組合二代</li> <li>手機尾號為***7884的用戶抽中300元現金券大禮包</li> <li>手機尾號為***2670的用戶抽中100元現金券</li> <li>手機尾號為***0811的用戶抽中300元現金券大禮包</li> <li>手機尾號為***5120的用戶抽中3折搶購魔泥金裝精品套裝</li> <li>手機尾號為***9229的用戶抽中300元現金券大禮包</li> <li>手機尾號為***4321的用戶抽中大獎ipad mini平板電腦</li> <li>手機尾號為***6693的用戶抽中300元現金券大禮包</li> <li>手機尾號為***8777的用戶抽中100元現金券</li> <li>手機尾號為***9968的用戶抽中300元現金券大禮包</li> <li>手機尾號為***4699的用戶抽中3折搶購祛疤精華凝露組合二代</li> <li>手機尾號為***8511的用戶抽中300元現金券大禮包</li> <li>手機尾號為***6665的用戶抽中300元現金券大禮包</li> <li>手機尾號為***5552的用戶抽中3折搶購紅酒木瓜豐胸靚湯</li> <li>手機尾號為***4321的用戶抽中300元現金券大禮包</li> <li>手機尾號為***1399的用戶抽中100元現金券大禮包</li> <li>手機尾號為***8455的用戶抽中3折搶購魔泥金裝精品套裝</li> <li>手機尾號為***8822的用戶抽中300元現金券大禮包</li> <li>手機尾號為***8224的用戶抽中3折搶購紅酒木瓜豐胸靚湯</li> <li>手機尾號為***5023的用戶抽中300元現金券大禮包</li> </ul> </div> <!--]end 中獎名單--> </div> <!--]end 抽獎轉盤--> </div> </div> <script type="text/javascript"> function maquer(){ setInterval(function(){ $('#rightBox li:first').animate({'height':'0','opacity': '0'}, 'slow', function() { $(this).removeAttr('style').insertAfter('#rightBox li:last'); }); },1000); $(this).attr('disabled',true); return; } maquer(); </script> </body> </html>
data.php
<?php include("config.php");//鏈接數據庫 $prize_arr = array( '0' => array('id'=>1,'min'=>55,'max'=>80,'prize'=>'3折搶購紅酒木瓜豐胸靚湯 ','v'=>10),//弧度：55°-80°范圍是：“3折搶購紅酒木瓜豐胸靚湯”獎， v=10是中獎率是10% '1' => array('id'=>2,'min'=>10,'max'=>35,'prize'=>'3折搶購自由呼吸魔泥金裝精品套裝','v'=>10), '2' => array('id'=>3,'min'=>320,'max'=>355,'prize'=>'100元現金券','v'=>20), '3' => array('id'=>4,'min'=>230,'max'=>265,'prize'=>'3折搶購218齒白健套裝','v'=>10), '4' => array('id'=>5,'min'=>185,'max'=>215,'prize'=>'3折搶購498元祛疤精華','v'=>10), '5' => array('id'=>6,'min'=>140,'max'=>170,'prize'=>'300元現金券大禮包','v'=>40) ); function getRand($proArr) { $result = ''; //概率數組的總概率精度 $proSum = array_sum($proArr); //概率數組循環 foreach ($proArr as $key => $proCur) { $randNum = mt_rand(1, $proSum); if ($randNum <= $proCur) { $result = $key; break; } else { $proSum -= $proCur; } } unset ($proArr); return $result; } foreach ($prize_arr as $key => $val) { $arr[$val['id']] = $val['v']; } $rid = getRand($arr); //根據概率獲取獎項id $res = $prize_arr[$rid-1]; //中獎項 $min = $res['min']; $max = $res['max']; $result['angle'] = mt_rand($min,$max); //隨機生成一個角度 $result['prize'] = $res['prize']; echo json_encode($result); ?>
config.php（其實也可以不鏈接數據庫，把data.php里面的鏈接數據庫注釋）
<?php $q=mysql_connect("localhost","root",""); if(!$q){ die('親，鏈接不到數據庫哦！'.mysql_error()); } mysql_query("set name utf8"); //以utf8讀取數據庫 mysql_select_db("test",$q); //數據庫 ?>
原文：