整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          國慶風格的活動抽獎頁面的示例代碼

          下是一個簡單的國慶風格的活動抽獎頁面的示例代碼。頁面中有一個醒目的十一標志,以及一些國慶相關的元素和活動信息。

          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、轉輪盤

          本來是想直接繪圖實現輪盤,但是沒有找到怎么填充文字,只好把輪盤弄成了背景圖,通常用于游戲抽道具,商城積分抽獎,公司年末員工抽獎

          1. 點擊抽獎觸發jquery的click事件;
          2. 通過ajax獲取后臺的隨機數;
          3. 后臺通過mt_rand得到隨機獎項(角度),返回給前臺;
          4. 通過jquery改變css transform、transition屬性,旋轉背景,也就是輪盤;

          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>

          說明:

          1. 因為改變css進行旋轉,開始的時候,直接執行了彈窗或者是console.log,這并不符合我們的要求,加入了setTimeout,在旋轉完成以后,再給出提示;
          2. time*1000*(5+result.angle/360) 是總得旋轉時間;

          后臺接口程序

              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);
          		   }
          		}
          	
          	}

          說明:

          1. 以上概率算法采用的是所有概率求和做分母、出現的概率做分子,如果才有百分比,實現方式是一樣的;
          2. 采用遞歸,依次判斷每一次的起始數字和結束數字,中獎的隨機數是否在該范圍內,在,就是中得該獎項,否則沒中,再判斷下一個;
          3. 最后一個數組元素是不需要判斷的,前邊的都不是,最后一個一定就是中獎;
          4. 記錄誰獲得了什么獎項,應該是在后臺返回數據之前,不能是前臺彈窗以后通過ajax通知后臺中獎信息;

          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));

          1. yuangong.length員工數組長度;
          2. Math.random() 0到1的小數,包含0,不包含1;
          3. Math.floor 小數向下取整,可以為0;

          綜上: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).用法

          1. $arr目標數組;
          2. $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)用法:

          1. $rearr目標數組;
          2. $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;

          輸出結果:


          主站蜘蛛池模板: 无码人妻精品一区二区三区99性| 国产一区三区三区| 国产成人一区二区三区在线| 性色av闺蜜一区二区三区| 久久er99热精品一区二区| 在线观看国产一区| 国产高清一区二区三区四区| 国产一区二区精品久久91| eeuss鲁片一区二区三区| 日韩高清国产一区在线 | 波多野结衣一区二区| 无码人妻少妇色欲AV一区二区| 国产一在线精品一区在线观看| 精品福利一区二区三区| 爆乳熟妇一区二区三区霸乳| 丰满岳乱妇一区二区三区| 日韩精品一区二区午夜成人版 | 午夜福利无码一区二区| 亚洲熟妇AV一区二区三区宅男| 国产大秀视频在线一区二区| 国产福利一区二区三区视频在线| 久久久久人妻一区二区三区vr| 激情亚洲一区国产精品| 99精品国产一区二区三区2021| 天堂va在线高清一区 | 国产在线精品一区二区高清不卡 | 国产伦精品一区二区三区免费迷| 日韩成人无码一区二区三区| 成人精品一区二区三区校园激情| 日韩成人一区ftp在线播放| 日本一区免费电影| 亚洲一区精品伊人久久伊人| 亚洲国产成人久久一区久久 | 91亚洲一区二区在线观看不卡| 一区二区中文字幕| 日本无码一区二区三区白峰美| 国产综合视频在线观看一区| AV怡红院一区二区三区| 无码精品一区二区三区免费视频| 无码国产精品一区二区免费 | 久久精品无码一区二区无码|