这个功能需要5个东西 php+html+css+jquery+js

php:data.php

//概率计算

function get_rand($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;

}

//奖品字段

$prize_arr = array(

'0' => array('id'=>1,'prize'=>'奖品1','v'=>1),

'1' => array('id'=>2,'prize'=>'奖品2','v'=>10),

'2' => array('id'=>3,'prize'=>'奖品3','v'=>10),

'3' => array('id'=>4,'prize'=>'奖品4','v'=>20),

'4' => array('id'=>5,'prize'=>'奖品5','v'=>20),

'5' => array('id'=>6,'prize'=>'奖品6','v'=>20),

);

//抽中获取

foreach ($prize_arr as $key => $val) {

$arr[$val['id']] = $val['v'];

}

$rid = get_rand($arr); //根据概率获取奖项id

$res['yes'] = $prize_arr[$rid-1]['prize']; //中奖项

unset($prize_arr[$rid-1]); //将中奖项从数组中剔除，剩下未中奖项

shuffle($prize_arr); //打乱数组顺序

for($i=0;$i

$pr[] = $prize_arr[$i]['prize'];

}

$res['no'] = $pr;

echo json_encode($res);

?>

js

首先引入插件：

$(function(){

$("#prize li").each(function(){

var p = $(this);

p.click(function(){

$("#prize li").unbind('click');

$.getJSON("data.php",function(json){

var prize = json.yes;

console.log(prize);

$("#pre").append(prize);

p.flip({

direction:'rl',

color:"#d6000f",

content:prize,

onEnd: function(){

p.css({"font-size":"22px","line-height":"168px",background:'url("img/f2.gif")',color:"#f6cf63","text-align":"center"});

p.attr("id","r");

$("#modf").show();

$("#prize li").unbind('click').css("cursor","default").removeAttr("title");

}

});

$("#data").data("nolist",json.no); //保存未中奖信息

});

});

});

});

html:index.html

css:type.css

.fanp{

position: absolute;

bottom: 2px;

left: 50%;margin-left: -600px;

width: 1200px;

height: 370px;

}

.fanp .u1{

width: 1120px;

margin: 0 auto;

}

.fanp .u1 li{

float: left;

width: 295px;

height: 185px;

position: relative;

background: url("../../img/f1.gif");

cursor:pointer;

}

.licen{

margin: 0 115px;

}

.lilef{

margin:0 115px 0 218px;

}

.fanp .u1 li p{

position: absolute;

top: -10px;left: 50%;margin-left: -30px;

font-size: 60px;

color: #f6cf63;

}