動策劃人員策劃這個抽獎頁面，用于app內。

當時，這個轉盤布局我踩坑了，我本以為這么簡單的布局應該不用絕對定位的，是我想多了！然后改為絕對定位來實現，因為要簡單些。

抽獎轉盤

一、九個格子和開始按鈕，頁面布局的實現思路

這個用絕對定位，小格子相對于大轉盤定位，這個我就給個簡單例子就好了哈，我相信你們能懂起的，如果沒理解到我再詳說。

標注

如上圖所示，大框為父容器，九個小格子為子容器

<div class="parent">
 <div class="child child1"></div> 
 <div class="child child2"></div> 
 <div class="child child3"></div> 
 .......
 <div class="child child9" id="start"></div> 
</div>
<style>
 .parent{
 position: relative;
 .child{
 position: absolute;
 }
 .child1{
 top: 0;
 left: 0;
 }
 ......
 .active{
 background-color: darkgoldenrod;
 }
 }
</style>

二、轉動效果實現：（下面貼出vue文件的html和js代碼，css代碼沒有。因為全貼出來太多了，如果想看詳細代碼，就到我的github倉庫去觀看或者下載）

轉動前.png

轉動后.png

app.vue

// template
<template>
 <div id="rotary-table">
 <div class="award" v-for="(award,index) in awards" :class="['award'+index,{'active': index==current}]">
 {{award.name}}
 </div>
 <div id="start-btn" @click="start">開始</div>
 </div>
</template>
// js
export default {
 name: 'get-award',
 data() {
 return {
 current: 0, 
 awards: [ // 獎品數組
 { id: 1, name: '空' },
 { id: 2, name: '眼鏡' },
 { id: 3, name: '包' },
 { id: 4, name: '笨驢' },
 { id: 5, name: '書' },
 { id: 6, name: '手鏈' },
 { id: 7, name: '美女' },
 { id: 8, name: 'iphone' }
 ],
 speed: 200, // 速度
 diff: 15, // 速度增加的值
 award: {}, // 抽中的獎品
 time: 0 // 記錄開始抽獎時的時間
 };
 },
 methods: {
 start(){
 // 開始抽獎
 this.drawAward();
 this.time=Date.now();
 this.speed=200;
 this.diff=15;
 },
 drawAward(){
 // 請求接口, 這里我就模擬請求后的數據(請求時間為2s)
 setTimeout( ()=> {
 this.award={
 id: '4',
 name: '笨驢',
 };
 }, 2000 );
 this.move();
 },
 move(){
 window.timeout=setTimeout( ()=> {
 this.current++;
 if ( this.current > 7 ) {
 this.current=0;
 }
 // 若抽中的獎品id存在，則開始減速轉動
 if ( this.award.id && ( Date.now() - this.time ) / 1000 > 2 ) {
 this.speed +=this.diff; // 轉動減速
 // 若轉動時間超過4秒，并且獎品id等于小格子的獎品id，則停下來！
 if ( ( Date.now() - this.time ) / 1000 > 4 && this.award.id==this.awards[ this.current ].id ) {
 clearTimeout( window.timeout );
 setTimeout( ()=> {
 alert( this.award.name );
 }, 0 );
 return;
 }
 // 若抽中的獎品不存在，則加速轉動
 } else {
 this.speed -=this.diff; // 轉動加速
 }
 this.move();
 }, this.speed );
 }
 }
};

結尾發言

如果沒有理解到，可以留言問我哈。這是我專門寫的小demo，希望能幫到大家。謝謝！

代碼倉庫地址：https://github.com/lingziyb/get-award

獎概率

抽獎大轉盤演示：http://www.sucaihuo.com/php/3301.html

function getRand($proArr, $proCount) {

$result='';

$proSum=0;

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

if ($val <=0) {

continue;

} else {

$proSum=$proSum + $proArr[$key];

}

}

foreach ($proArr as $key=> $proCur) {

if ($proCount[$key] <=0) {

continue;

} else {

$randNum=mt_rand(1, $proSum);

if ($randNum <=$proCur) {

$result=$key;

break;

} else {

$proSum -=$proCur;

}

}

}

unset($proArr);

return $result;

}

獎品設置

$prizes=array(

0=> array(

"id"=> 0, //中獎id

"name"=> "謝謝參與", //獎品名稱

"count"=> "100", //庫存

),

1=> array(

"id"=> 1,

"name"=> "羅浮山門票",

"count"=> "40",

),

2=> array(

"id"=> 2,

"name"=> "羅浮山嘉寶田溫泉體驗券",

"count"=> "40",

),

3=> array(

"id"=> 3,

"name"=> "精美旅游書籍《山水釀惠州》",

"count"=> "40",

),

4=> array(

"id"=> 4,

"name"=> "碧海灣漂流門票",

"count"=> "40",

),

5=> array(

"id"=> 5,

"name"=> "南昆山門票",

"count"=> "40",

),

6=> array(

"id"=> 6,

"name"=> "云頂溫泉精美禮品",

"count"=> "40",

),

);

源碼來源：https://gitee.com/lanrenzhijia/codes/d342lk1yw5nm8x09euqag50