下是一個簡單的國慶風格的活動抽獎頁面的示例代碼。頁面中有一個醒目的十一標志,以及一些國慶相關的元素和活動信息。
html復制代碼
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>國慶抽獎活動</title> | |
<style> | |
body { | |
background-color: #f2f2f2; | |
font-family: Arial, sans-serif; | |
text-align: center; | |
} | |
.container { | |
max-width: 600px; | |
margin: 0 auto; | |
padding: 20px; | |
} | |
.logo { | |
width: 200px; | |
height: 200px; | |
background-image: url('path/to/logo.png'); | |
background-size: cover; | |
margin: 0 auto; | |
display: block; | |
} | |
.prizes { | |
list-style-type: none; | |
padding: 0; | |
} | |
.prize { | |
margin-bottom: 20px; | |
} | |
.prize-item { | |
font-weight: bold; | |
} | |
.button { | |
display: inline-block; | |
background-color: #ff0000; | |
color: #fff; | |
text-align: center; | |
padding: 10px 20px; | |
margin: 10px 2px; | |
cursor: pointer; | |
border: none; | |
border-radius: 5px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="logo"></div> | |
<h1>國慶抽獎活動</h1> | |
<p>歡慶國慶,贏取豐厚獎品!</p> | |
<ul class="prizes"> | |
<li class="prize"> | |
<div class="prize-item">iPhone 13</div> | |
<div class="prize-item">價值 6999 元</div> | |
</li> | |
<li class="prize"> | |
<div class="prize-item">Kindle Paperwhite</div> | |
<div class="prize-item">價值 1299 元</div> | |
</li> | |
<li class="prize"> | |
<div class="prize-item">國慶紀念品</div> | |
<div class="prize-item">價值 50 元</div> | |
</li> | |
</ul> | |
<a href="#" class="button">立即參與</a> | |
</div> | |
</body> | |
</html> |
動策劃人員策劃這個抽獎頁面,用于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
獎和開盲盒性質一樣的都是通過ajax讀取后臺的隨機數據。
圖1 轉輪盤抽獎
圖2 轉輪盤抽獎結果
1、轉輪盤
本來是想直接繪圖實現輪盤,但是沒有找到怎么填充文字,只好把輪盤弄成了背景圖,通常用于游戲抽道具,商城積分抽獎,公司年末員工抽獎
html代碼
<style>
.box{
width:500px;height:500px;border:0px solid #DDD;margin:100px;position:relative;
}
.beij{
background:url(cjbg.jpg) no-repeat center center;width:100%;height:100%;
}
.pointer{
cursor:pointer;position:absolute;top:50%;left:50%;margin-left:-40px;margin-top:-48px;background:url(c1.png) no-repeat center center;width:80px;height:96px;z-index:21;
}
</style>
<div class='box' >
<div class='beij'></div>
<div class='pointer'></div>
</div>
js代碼
<script>
$(document).ready(function() {
var time=0.4;//轉一圈所需時間 s
var count=10;//默認多轉幾圈
/*
var angle=new Array();
angle[0]=23;
angle[1]=53;
angle[2]=83;
angle[3]=110;
angle[4]=133;
angle[5]=163;
angle[6]=223;
*/
var i=1;
$(".pointer").click(function(){
$.ajax({
url: "/public/man/index.php/api/choujiang",
data:'',
type: "post",
dataType: "json",
success: function(result) {
//console.log(result.msg);
$('.beij').css({'transform':"rotate("+(i*count*360+result.angle)+"deg)","transition":" All "+(time*(5+result.angle/360))+"s ease-in-out"});
//彈窗提示
//setTimeout("alert('"+result.msg+"');",time*1000*(5+result.angle/360));
setTimeout("console.log('"+result.msg+"');",time*1000*(5+result.angle/360));
}
})
i++;
});
});
</script>
說明:
后臺接口程序
public function choujiang(){
/*
id 獎品編號
title 中獎提示
prec 中獎概率
angle 旋轉角度
*/
$arr[0]=array('id'=>1,'title'=>'恭喜抽中一等獎:蘋果手機一部!','prec'=>1,'angle'=>23);
$arr[1]=array('id'=>2,'title'=>'恭喜抽中二等獎:Ipad','prec'=>2,'angle'=>68);
$arr[2]=array('id'=>3,'title'=>'恭喜抽中三等獎:','prec'=>25,'angle'=>113);
$arr[3]=array('id'=>4,'title'=>'恭喜抽中四等獎','prec'=>50,'angle'=>155);
$arr[4]=array('id'=>5,'title'=>'恭喜抽中五等獎','prec'=>80,'angle'=>202);
$arr[5]=array('id'=>6,'title'=>'恭喜抽中六等獎','prec'=>150,'angle'=>245);
$arr[6]=array('id'=>7,'title'=>'恭喜抽中七等獎','prec'=>240,'angle'=>290);
$arr[7]=array('id'=>8,'title'=>'獲得50元優惠券,還需加油哦!','prec'=>380,'angle'=>337);
//中獎幾率求和
$cmun=0;
for($i=0;$i<=count($arr)-1;$i++){
$cmun+=$arr[$i]['prec'];
}
//中獎隨機數
$smrand=mt_rand(1,$cmun);
$this->getRand(1,0,$arr,count($arr),$smrand);
}
public function getrand($m,$im,$arr,$count,$smrand){
/*
$m 起始數
$im 第幾個數組元素
$count 數組總得元素個數
$arr 原始數組
$smrand 中獎隨機數
*/
//已經中獎
if($smrand>=$m&&$smrand<=$arr[$im]['prec']+$m-1){
//中獎返回
$msg=array('msg'=>$arr[$im]['title'],'angle'=>$arr[$im]['angle'],'smrand'=>$smrand);
exit(json_encode($msg,JSON_UNESCAPED_UNICODE));
}else{
//最后一個不需要判斷 直接返回
if($im+1==$count-1){
$msg=array('msg'=>$arr[$count-1]['title'],'angle'=>$arr[$count-1]['angle'],'smrand'=>$smrand);
exit(json_encode($msg,JSON_UNESCAPED_UNICODE));
}else{
//起始數字
$start=$arr[$im]['prec']+$m;
//遞歸 再次調用數組 讀取下一個數組元素
$this->getrand($start,$im+1,$arr,$count,$smrand);
}
}
}
說明:
2、隨機抽取一個幸運員工
點擊開始抽獎,單行文本框循環顯示員工,抽獎按鈕文字變為停止,點擊停止的時候,抽中的員工顯示在獲獎名單。
圖3 隨機抽取幸運員工
html代碼
<style>
body{
background:#DDD;
}
.title{
height:40px;line-height:40px;font-size:14px;font-weight:bold;margin:100px 0 0 100px;
}
.box{
width:700px;height:200px;border:1px solid #EEE;border-radius:8px;background:#FFF;margin-left:100px;
}
.box li{height:30px;line-height:30px;}
.cjbtn{
margin:10px 0 0 100px;
}
#ygname{
padding:3px 5px;;
}
</style>
<div class='title'>獲獎名單</div>
<div class='box' >
<ul>
</ul>
</div>
<div class='cjbtn'><input type='text' id='ygname' /> <button id='choujiang'>開始抽獎</button></div>
js代碼
<script>
var t;
var yuangong=new Array();
$.ajax({
url: "/public/man/index.php/api/yuangong",
data:'',
type: "post",
dataType: "json",
success: function(result) {
yuangong=result.msg
}
})
$(document).ready(function() {
$("#choujiang").click(function(){
if($(this).html()=='開始抽獎'){
if(yuangong.length>=3){
$(this).html("停止");
start();
}
}else{
$(this).html("開始抽獎");
stop();
}
});
});
function start() {
num = Math.floor(Math.random() * (yuangong.length-1));
$('#ygname').val(yuangong[num]['title']);
t = setTimeout(start, 0);
}
function stop() {
clearInterval(t);
//數組中刪除中獎員工信息防止重復中獎
yuangong.splice($.inArray(yuangong[num], yuangong), 1);
$(".box ul").append("<li>"+$('#ygname').val()+"</li>");
}
</script>
說明:
num = Math.floor(Math.random() * (yuangong.length));
綜上:num得到的是0到數組下標的隨機數。
clearInterval(t):用于停止t = setTimeout(start, 0);
后臺php接口程序
public function yuangong(){
$yuangong[0]=array('id'=>1,'title'=>'業務部【張三】');
$yuangong[1]=array('id'=>2,'title'=>'技術部【李四】');
$yuangong[2]=array('id'=>3,'title'=>'技術部【逍遙】');
$yuangong[3]=array('id'=>4,'title'=>'會計部【薛嫣】');
$yuangong[4]=array('id'=>5,'title'=>'行政部【王五】');
$yuangong[5]=array('id'=>6,'title'=>'行政部【王天林】');
$yuangong[6]=array('id'=>7,'title'=>'行政部【李笑和】');
$msg=array('msg'=>$yuangong);
exit(json_encode($msg,JSON_UNESCAPED_UNICODE));
}
3、隨機抽取多個幸運員工
沒有想到什么效果,只是單純地獲取了隨機數
html代碼
<style>
body{
background:#DDD;
}
.title{
height:40px;line-height:40px;font-size:14px;font-weight:bold;margin:100px 0 0 100px;
}
.box{
width:700px;height:200px;border:1px solid #EEE;border-radius:8px;background:#FFF;margin-left:100px;
}
.box li{height:30px;line-height:30px;}
.cjbtn{
margin:10px 0 0 100px;
}
#ygname{
padding:3px 5px;;
}
</style>
<div class='title'>獲獎名單</div>
<div class='box' >
<ul>
</ul>
</div>
<div class='cjbtn'> <button id='choujiang'>開始抽獎</button></div>
js代碼
<script>
var yuangong=new Array();
var ygstr='';//存取獲獎員工
var ygrs=5;//一次抽幾個
var t;
$.ajax({
url: "/public/man/index.php/api/yuangong",
data:'',
type: "post",
dataType: "json",
success: function(result) {
yuangong=result.msg
}
})
$(document).ready(function() {
$("#choujiang").click(function(){
if(yuangong.length>=ygrs){
start(1);
}
});
});
function start(ms) {
//ms 第幾次獲取員工信息
num = Math.floor(Math.random() * (yuangong.length));
console.log(num);
ygstr+="<li>"+yuangong[num]['title']+"</li>";
if(ms>=ygrs){
$(".box ul").html(ygstr);
ygstr="";
}else{
yuangong.splice($.inArray(yuangong[num], yuangong), 1);
start(ms+1);
}
}
</script>
4、在線開盲盒
需要我們點擊抽獎的時候通過ajax讀取后臺獲得的盲盒信息,直接顯示到前臺,前臺顯示同上邊的,都是一樣,說一下后臺程序。
使用array_rand().隨機獲取幾個數組元素
array_rand($arr,$count).用法
返回值是原數組的下標。
public function manghe(){
$goods[0]=array('id'=>1,'title'=>'手機');
$goods[1]=array('id'=>2,'title'=>'毛絨玩具');
$goods[2]=array('id'=>3,'title'=>'化妝品');
$goods[3]=array('id'=>4,'title'=>'啫喱水');
$goods[4]=array('id'=>5,'title'=>'面膜');
$goods[5]=array('id'=>6,'title'=>'學習用品');
$goods[6]=array('id'=>7,'title'=>'電腦');
$getarr=array_rand($goods,3);
$i=0;
foreach($getarr as $k){
$rearr[$i]=$goods[$k];
$i++;
}
$msg=array('msg'=>$rearr);
exit(json_encode($msg,JSON_UNESCAPED_UNICODE));
}
如果包含特殊獎項,需要滿足抽獎多少次,一定抽中,可以達到抽獎次數以后在array_rand內隨機數減一,然后把大獎塞進該次抽獎的返回信息。
array_push($rearr,$a)用法:
$tebie[999]=array('id'=>999,'title'=>'特別大獎');
$goods[0]=array('id'=>1,'title'=>'手機');
$goods[1]=array('id'=>2,'title'=>'毛絨玩具');
$goods[2]=array('id'=>3,'title'=>'化妝品');
$goods[3]=array('id'=>4,'title'=>'啫喱水');
$goods[4]=array('id'=>5,'title'=>'面膜');
$goods[5]=array('id'=>6,'title'=>'學習用品');
$goods[6]=array('id'=>7,'title'=>'電腦');
$getarr=array_rand($goods,3);
$i=0;
foreach($getarr as $k){
$rearr[$i]=$goods[$k];
$i++;
}
array_push($rearr,$tebie[999]);
dump($rearr);
exit;
輸出結果:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。