整合营销服务商

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

免费咨询热线：

英雄联盟10月22日幸运召唤师活动地址入口 幸运召唤师抽奖攻略

雄联盟幸运召唤师10月22日有开放吗?本周幸运召唤师什么时候开放?以下是幸运召唤师今天的活动地址和抽奖攻略，一起来了解一下吧。

问：英雄联盟幸运召唤师10月22日有开放吗?

答：最新一期的幸运召唤师已经在10月21日开放，结束时间会到10月31日，大家可要把握好本期活动时间抽取折扣皮佛!

【幸运召唤师抽奖地址】

本期活动地址：http://lol.qq.com/act/a20180224lucky/index.html

【幸运召唤师抽奖攻略】

想要参与折扣抽奖，要先获得活动资格，一般当月没有购买过皮肤的玩家比较容易收到官方赠送的资格，或者登记较低，刚刚注册账号的玩家，所以如果自己一直收不到资格，可以用小号登录看看，没有小号等级又高的话就没办法了，只能看运气。

至于怎么抽到1折，建议参与网页版抽奖，比在游戏中概率高一点，此外，避开游戏高峰期要比高峰期概率大点，可以去试试看。

以上就是今天幸运召唤师活动攻略。

奖和开盲盒性质一样的都是通过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;

输出结果：

单的html和js做的抽奖效果，自己也做过抽奖程序，用作年会上面的抽奖，效果不错，赛光时代小编会后续的分享出来供大家使用得。近些年互联网飞速发展，周边的产业不断的完善微信、手机等等都需要我们企业不断的扩展和适应。

抽奖效果

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>抽奖程序-saiguangw.com</title>

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

<style>

* {

margin:0;

padding:0;

}

a {

text-decoration:none;

}

img {

border:none;

}

li {

list-style:none outside none;

}

body {

background:#c9c9c9;

font-size:14px;

font-family:"宋体";

}

.myBox {

margin:50px auto 0;

}

.myBox ul {

margin:0 auto 0;

position:relative;

width:500px;

height:100px;

overflow:hidden;

}

.myBox li {

width:100px;

height:100px;

text-align:center;

line-height:100px;

font-size:40px;

color:#fff;

background:rgba(222,122,155,0.5);

}

.myBox li.on {

background:rgba(66,56,222,0.5);

}

.text {

height:50px;

overflow:hidden;

width:500px;

margin:20px auto 0;

font-size:20px;

line-height:50px;

text-align:center;

}

.bt,.jg,.zt {

float:left;

width:200px;

}

.bt {

width:100px;

height:50px;

background:rgb(200,100,55);

color:#fff;

cursor:pointer;

}

em {

font-size:30px;

font-style:normal;

color:red;

}

</style>

</head>

<body>

<div class="myBox">

<ul class="cj2">

<li>1</li>

</ul>

<div class="text">

<div class="bt bt2">点我抽奖</div>

<div class="jg jg2">中奖者为"<em></em>"号</div>

</div>

</div><script>

//by zyp

;(function($, window, document, undefined) {

var LuckDraw = function(ele, opt) {

this.$element = ele,

this.defaults = {

row: 4, //行

column: 4, //列

spacing: 0,

click: null,

time: 3,

end: function(e) {}

},

this.target,

this.options = $.extend({}, this.defaults, opt);

}

LuckDraw.prototype = {

init: function() {

var $this = this.$element;

var row = this.options.row;

var col = this.options.column;

var spacing = this.options.spacing;

var click = this.options.click;

var allNumber = 2 * (row + col) - 4;

var line = row - 2; //除去上下de行数

var length = $this.children('li').length;

var options = this.options;

if (length < allNumber) {

for (var i = length; i <= (allNumber - length); i++) {

$this.append("<li>" + (i + 1) + "</li>");

}

}

var children = $this.children('li');

var width = children.eq(0).width() || 0;

var height = children.eq(0).height() || 0;

//元素初始化

$this.css({

position: 'relative',

width: col * width + (col - 1) * spacing,

height: row * height + (row - 1) * spacing

});

children.css({

position: 'absolute'

});

if (line == 0) {

initOne();

} else {

initTwo();

}

//初始化函数

//此时分成4个部分，上、右、下、左

//上： 0 ~ col-1

//右： col ~ col+line

//下： col+line+1 ~ 2*col+line-1

//左： else

//如果只有两行

//此时分成4个部分，上、右、下、左

function initOne() {

children.each(function(index) {

if (index >= 0 && index <= (col - 1)) {

$(this).css({

top: 0,

left: index * width + index * spacing

});

} else {

$(this).css({

bottom: 0,

right: index % col * width

});

}

});

}

//如果大于两行

function initTwo() {

children.each(function(index) {

if (index >= 0 && index <= (col - 1)) {

$(this).css({

top: 0,

left: index * width + index * spacing

});

} else if (index >= col && index <= (col + line - 1)) {

$(this).css({

top: ((index + 1 - col)) * (height + spacing),

right: 0

});

} else if (index >= (col + line) && index <= (2 * col + line - 1)) {

$(this).css({

bottom: 0,

right: (index - ((col + line))) * (width + spacing)

});

} else {

$(this).css({

left: 0,

bottom: (index - (2 * col + line - 1)) * (height + spacing)

});

}

});

}

var target = $this.target || Math.floor(Math.random() * allNumber + 1); //目标，指定或随机

var ix = 0; //位置

var stop;

var flg = false; //抽奖是否正在运行

/*

加速度公式

v1 = v0 + a*t;注意加速度的v代表时间

此时的t可以我们自己定义，所以是常量，所以只需要求a的值

*/

var a = -25.0;

var v0 = 500.0;

var t = 0.0,

v;

var time = this.options.time * 1000; //匀速运行的时间，单位秒

$(click).on('click', function() {

if (!flg) {

flg = true;

target = $this.target || Math.floor(Math.random() * allNumber + 1);

speedUp();

} else {

return;

}

});

//加速

function speedUp() {

runner(ix);

if (v <= 50) {

clearTimeout(stop);

v = 50;

t = 0.0;

uniform(); //跳转到匀速

} else {

t++;

v = v0 + a * t;

stop = setTimeout(speedUp, v);

}

}

//匀速

function uniform() {

stop = setTimeout(uniform, v);

if (t == time / 50) {

clearTimeout(stop);

t = 0.0;

speedDown();

} else {

t++;

}

runner(ix);

}

//减速

function speedDown() {

var stop3 = setTimeout(speedDown, v);

if (v >= 500) {

v = 500;

if (ix == target - 1) {

clearTimeout(stop3);

options.end(target);

flg = false;

}

} else {

t++;

v = v - a * t;

}

runner(ix);

}

//ix++

function runner(i) {

children.removeClass('on').eq(ix).addClass('on');

i++;

if (i == allNumber) {

ix = 0;

} else {

ix = i;

}

}

},

setTarget: function(options) {

var $this = this.$element;

$this.target = options;

}

}

$.fn.myLuckDraw = function(options, target) {

var Ld = new LuckDraw(this, options);

Ld.setTarget(target);

Ld.init();

return this;

}

})(jQuery, window, document);

$(function() {

var tar = 5;

$('.cj2').myLuckDraw({

row: 3, //行

column: 5, //列

spacing: 5, //空隙

click: '.bt2', //点击触发

time: 3, //匀速运动的时间

end: function(e) {

//抽奖执行完毕的回调函数,参数e为获奖编号

//因为这里是指定的，所以e == 12

$('.jg2 em').text(e);

}

});

});</script>

</body>

</html>


在线咨询
上一篇：JavaScript中方法的覆盖问题
下一篇：圣诞节马上到了，程序员用表白代码告白暗恋女友

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 腾冲县 神木县 额敏县 崇明县 鞍山 阜宁县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服