前台页面：

<!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);   //数据库

?>

原文：

http://www.helloweba.com/view-blog-216.html

一个好玩的jq+php实现转盘抽奖程序的更多相关文章

  1. 用jQuery和PHP来实现转盘抽奖程序

    准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div cl ...

  2. 幸运大转盘-jQuery+PHP实现的抽奖程序

    目前好多网站上应用的转盘抽奖程序大多是基于flash的,而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序,为了便于理解,作者分两部分来讲解,本文讲解第一部分,侧重使用jQuery实现转盘的转 ...

  3. jQuery幸运大转盘_jQuery+PHP抽奖程序

    http://www.thinkphp.cn/code/1153.html 网上转盘抽奖程序大多是flash完成的,而本文使用jQuery和PHP来实现转盘抽奖程序. 若是想看更多js特效.网站源码. ...

  4. 简单JS旋转实现转盘抽奖效果

    闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域 比如,我选择了"区域2",结果就是这样 具体可以见下 ...

  5. 简单的转盘抽奖——CSS动画优化

    前言 前两天去一家公司面试,被问到一些小游戏的东西.面试官提到了刷红包还有抽奖这些怎么实现,当时简单说了下思路,回来之后想想还是说的太轻描淡写了,干说不做就是耍流氓,所以就做了一个(Demo & ...

  6. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  7. javascript 转盘抽奖代码和计数器代码

    要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下  看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究...  效果预览: 一.模拟抽奖的实 ...

  8. js转盘抽奖

    这个是很简易的转盘,只用了html,css,js 通过css产生一个转盘上的指针,用js动态改变css中的transparent改变指针的角度.再添加一个背景图片类似于奖项的转盘 <!DOCTY ...

  9. canvas转盘抽奖

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...

随机推荐

  1. UC/OS操作系统 （转）

    1.和其他一些著名的嵌入式操作系统不同,uC/OS-II在单片机系统中的启动过程比较简单,不像有些操作系统那样,需要把内核编译成一个映像文件写入ROM中,上电复位后,再从ROM中把文件加载到RAM中去 ...

  2. iOS工程结构

          好的架构不是设计出来的,而是进化而来的! 写在前面 从2011年底开始学习iOS开发,到现在也已经快3年了,虽然中途没有一直进行iOS的开发(总是在Android和iOS间切换),但始终没 ...

  3. 安装Hadoop集群的最快的软件

    Quick Hadoop是一款安装Hadoop集群的桌面软件,只需要点两下鼠标,一分钟之内安装Hadoop到集群上,超快! 还在每台主机的Shell里一行一行地敲安装Hadoop的命令?别苦逼了! 用 ...

  4. Android 状态栏通知Notification、NotificationManager简介

    Notification(通知)一般用在电话,短信,邮件,闹钟铃声,在手机的状态栏上就会出现一个小图标,提示用户处理这个通知,这时手从上方滑动状态栏就可以展开并处理这个通知: 在Android系统中, ...

  5. AIR检测网络

    package com.juyou.util.net { import flash.events.StatusEvent; import flash.net.URLRequest; import ai ...

  6. SIP学习之网络链接

    风清扬的CSDN博客  文章分类SIP http://blog.csdn.net/ppy521/article/category/1227390

  7. 个性化定制——物流app

    众所周知,在互联网不断迈进的大环境下,各行各业都不免在这大潮下纷纷卷入.人们早已不再满足于传统行业,即便是所谓的新兴行业所带来的体验,他们更多的希望能够在便捷的基础上获取更加个性化的服务,个性化服务在 ...

  8. WEB 移动网站 手机点击 打电话 发短信

    原文地址: http://www.blesswe.com/portal.php?mod=view&aid=428 我们在手机浏览网页是希望用户看到手机号码点击就可以直接打电话或发短信,下面我们 ...

  9. (转)iOS7界面设计规范(6) - UI基础 - 模态情境

    继续规范.现在听着Clapton的Wonderful Tonight,想想看,整个高二暑假都在为这首歌着迷,经常夜里一边做英语暑期作业一边循环这首歌,心里特别静的赶脚.13年过去了,再听起来,就像隔着 ...

  10. AngularJs学习笔记4——四大特性之双向数据绑定

    双向数据绑定 方向1:模型数据(model)绑定到视图(view) 实现方法:①.{{model变量名}}  ②.常用指令(ng-repeat) 方向2:将视图(view)中用户输入的数据绑定到模型数 ...