整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

国庆风格的活动抽奖页面的示例代码

下是一个简单的国庆风格的活动抽奖页面的示例代码。页面中有一个醒目的十一标志,以及一些国庆相关的元素和活动信息。

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;

输出结果: