動策劃人員策劃這個抽獎頁面,用于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
個是我用htmlcssrScrip寫出來的東西,它包括兩個部分,一個是上面的轉盤,一個是下面的計時器。
·點擊spin旋轉,它就轉,stop停止,停止以后就會反饋,就是獲得了什么,學習兩個小時。獲得這個以后就可以start timer,開始學習。
·這個是重置,重置timer,計時器。如果學完了兩個小時再轉一次,轉完以后又是學習兩個小時,再開計時器,學完又重置一遍,再轉一下,學習30分鐘,再去學30分鐘,再開,再關。
這么一個東西要怎么做?等一下我教你們怎么做。
·首先先在桌面新建一個文本文檔,給它命名成learning,learning,will,叫什么?學習的轉盤,帶有WIS,WIS什么timer,計時timer,計時器。
·把它的后綴改一下,改成html覆蓋,保存。
·保存完了以后用vs code打開,打開完以后就是一個空白的頁面。
·接下來敲代碼的時間,寫一個前端代碼,實現剛剛那個小東西。
·首先把框架給卸了,然后是Id doctyper,html,這個好像是瀏覽器之類的問題的,管它HML后,這是language的縮寫,它就等于English的縮寫。
·下面是made,chaset,這是設置一個字符編碼的UTF-8,name,這是一個4口屬性。
·內容是content,content的寬度是等于設備的寬度。
·它的initial SCA,SCA就是它的初始規模,是等于1.0,就是跟網頁的大小是一樣的。
·接下來是一個title,就是標題,標題就是learning,learning,will學習的,轉盤帶有time,就是帶有計時器的一個學習的轉盤。
·下面是CS的內容,就是style樣式,這是CSS的內容。
·接下來就是到波底,接下來就是body的內容,body,head還沒結束是吧?不對,我的head去哪了?問題好大,這里有一個head,我是覺得是先寫大皇家是比較好的,就是the head。
·head里面包括幾個部分,就是title,標題還有style,就是CSS,body,body里面,波波底下面是h,是HGL結束了。
·body里面包含兩個東西,兩個div就是兩個塊,這塊一個是用來做抽獎的轉盤的,一個是用來做timer,就是計時器。
·記下來是叫script東西,就是script,screw script。
·這就是整個的框架,就是這里是CSS的地方,這里是title,它的標題就是網頁上它給出的標題,就是地址欄那里的標題。
·這里是兩個div,就是兩個塊,到時候就是用兩個容器來裝抽獎的轉盤和計時器。
·這里是加入script的代碼。
大概就講到這里。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。