jq實現手機號抽獎（一）

篇只說抽獎頁面的html和css，想看js的請看下一篇

下一篇的鏈接：https://www.toutiao.com/i6724845137031070215/

html：

<!DOCTYPE html>

<head>

<title>手機號抽獎</title>

</head>

<body>

</select>

</div>

</div>

</body>

</html>

css：

*{ margin:0; padding: 0; }

html,body{ width: 100%; height: 100%; background:radial-gradient(#f50607,#800807);

background:-webkit-radial-gradient(#f50607,#800807); background:-o-radial-gradient(#f50607,#800807); background:-moz-radial-gradient(#f50607,#800807); }

.container{width: 500px; margin: 0 auto;padding: 100px;overflow: hidden;}

.left{ width: 250px; float: left; }

.left h2{ color: #fff; text-align: center; line-height: 50px; }

.level,.resule-box,.start{ width: 250px; height: 40px; margin-top: 10px; border-radius: 5px; font-size: 18px;}

.resule-box{ color: #555; background: #fff; text-align: center; line-height: 40px;}

.start{ background: #428bca; color: #fff; border:none; text-align: center; line-height: 40px; }

.list{ width: 200px; min-height: 250px; background: #fff; border-radius: 5px; float: right; padding: 10px;}

.bg{width:250px;height:40px;background: none; color: #fff; border:none; text-align: center; line-height: 40px; margin-top: 13px;}

獎和開盲盒性質一樣的都是通過ajax讀取后臺的隨機數據。

圖1 轉輪盤抽獎

圖2 轉輪盤抽獎結果

1、轉輪盤

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

點擊抽獎觸發jquery的click事件；
通過ajax獲取后臺的隨機數；
后臺通過mt_rand得到隨機獎項（角度），返回給前臺；
通過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>

說明：

因為改變css進行旋轉，開始的時候，直接執行了彈窗或者是console.log，這并不符合我們的要求，加入了setTimeout，在旋轉完成以后，再給出提示；
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);
		   }
		}
	
	}

說明：

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

yuangong.length員工數組長度；
Math.random() 0到1的小數，包含0，不包含1；
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).用法

$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)用法：

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

輸出結果：

家好，今天給大家介紹一款，JavaScript實現的轉盤抽獎html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

點擊中間的開始按鈕，就可以轉動轉盤（圖2）

圖2

源碼完整，需要的朋友可以下載學習（圖3）

圖3

本源碼編碼：10165，需要的朋友，點擊下面的鏈接后，搜索10165，即可獲取。

就愛UI - 分享UI設計的點點滴滴

在線咨詢

上一篇：資深程序員推薦七大JavaScript編程工具
下一篇：CSS 01：基礎

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

jq實現手機號抽獎（一）

家好，今天給大家介紹一款，JavaScript實現的轉盤抽獎html頁面前端源碼 （圖1）。送給大家哦，獲取方式在本文末尾。

點擊中間的開始按鈕，就可以轉動轉盤（圖2）

源碼完整，需要的朋友可以下載學習（圖3）

本源碼編碼：10165，需要的朋友，點擊下面的鏈接后，搜索10165，即可獲取。

您的項目需求

家好，今天給大家介紹一款，JavaScript實現的轉盤抽獎html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

點擊中間的開始按鈕，就可以轉動轉盤（圖2）

源碼完整，需要的朋友可以下載學習（圖3）

本源碼編碼：10165，需要的朋友，點擊下面的鏈接后，搜索10165，即可獲取。