目录

大转盘特效

本文实现了大转盘抽奖功能。有兴趣的可以下载此项目Demo

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 指针大转盘抽奖代码</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<style type="text/css">
	.wrap{
		width:50%;
		margin:30px auto;
		text-align: center;
		position: relative;
	}
	.image{
		width:100%;
	}
	.buttonImage{
		width:100%;
		margin-top: -22%;
	}
	.button{
		width: 29%;
		height: 29%;
		background-color: #ccc;
		position: absolute;
		top:50%;
		left: 50%;
		border-radius: 50%;
		z-index: 2;
		margin-top: -14.5%;
		margin-left: -14.5%;
	}
</style>
</head>
<body>
	<div class='wrap'>
		<div class='button' id='button' onClick='startRotate()'>
			<img src='3.png' class='buttonImage' />
		</div>
		<img src='2.png' class='image' id='target' />
	</div>
</body>
</html>

随机奖品的js代码：

var styleChange = function(obj){
	var style = '';
	for( var i in obj){
		style = style + i+':'+obj[i]+';';
	}
	return style;
}
var result_angle = [
	{angle:0,probability:0.1,text:'恭喜中了二等奖'},
	{angle:60,probability:0.2,text:'恭喜中了一等奖'},
	{angle:120,probability:0.2,text:'恭喜中了六等奖'},
	{angle:185,probability:0.2,text:'恭喜中了五等奖'},
	{angle:240,probability:0.1,text:'恭喜中了四等奖'},
	{angle:300,probability:0.2,text:'恭喜中了三等奖'}
];

var rotate = {
	rotateAngle : 0, //起始位置为0
	flatClick : true, //转盘转动过程中不可再次触发
	calculateResult:function(type,duringTime){//type:0,箭头转动,1,背景转动;duringTime:持续时间(s)
		var self = this;
		type = type || 0; // 默认为箭头转动
		duringTime = duringTime || 1; // 默认为1s

		var randNum = Math.ceil(Math.random() * 100); // 用来判断的随机数，1-100

		var resultIndex; // 最终要旋转到哪一块，对应result_angle的下标
		var startPos = endPos = 0; // 判断的角度值起始位置和结束位置

		for(var i in result_angle){
			startPos = endPos + 1; // 区块的起始值
			endPos = endPos + 100 * result_angle[i].probability; // 区块的结束值

			if(randNum >= startPos && randNum <= endPos){ // 如果随机数落在当前区块，那么获取到最终要旋转到哪一块
				resultIndex = i;
				break;
			}
		}

		var randCircle = Math.ceil(Math.random() * 2) + 1; // 附加多转几圈，2-3

		self.flatClick = false; // 旋转结束前，不允许再次触发
		if(type == 1){ // 转动盘子
			self.rotateAngle =  self.rotateAngle - randCircle * 360 - result_angle[resultIndex].angle - self.rotateAngle % 360;


			var elem = document.getElementById('target');
			var newStyle = {
				'transform': 'rotate('+self.rotateAngle+'deg)',
				'-ms-transform': 'rotate('+self.rotateAngle+'deg)',
				'-webkit-transform': 'rotate('+self.rotateAngle+'deg)',
				'-moz-transform': 'rotate('+self.rotateAngle+'deg)',
				'-o-transform': 'rotate('+self.rotateAngle+'deg)',
				'transition': 'transform ease-out '+duringTime+'s',
				'-moz-transition': '-moz-transform ease-out '+duringTime+'s',
				'-webkit-transition': '-webkit-transform ease-out '+duringTime+'s',
				'-o-transition': '-o-transform ease-out '+duringTime+'s'
			};
			var style = styleChange(newStyle);
			elem.setAttribute('style', style);
		}else{ // 转动指针
			self.rotateAngle = self.rotateAngle + randCircle * 360 + result_angle[resultIndex].angle - self.rotateAngle % 360;

			var elem = document.getElementById('button');
			var newStyle = {
				'transform': 'rotate('+self.rotateAngle+'deg)',
				'-ms-transform': 'rotate('+self.rotateAngle+'deg)',
				'-webkit-transform': 'rotate('+self.rotateAngle+'deg)',
				'-moz-transform': 'rotate('+self.rotateAngle+'deg)',
				'-o-transform': 'rotate('+self.rotateAngle+'deg)',
				'transition': 'transform ease-out '+duringTime+'s',
				'-moz-transition': '-moz-transform ease-out '+duringTime+'s',
				'-webkit-transition': '-webkit-transform ease-out '+duringTime+'s',
				'-o-transition': '-o-transform ease-out '+duringTime+'s'
			};
			var style = styleChange(newStyle);
			elem.setAttribute('style', style);
		}
		// 旋转结束后，允许再次触发
		setTimeout(function(){ 
			self.flatClick = true;
			// 告诉结果
			alert(result_angle[resultIndex].text);
		},duringTime*1000);
	}
}

function startRotate(){
	if(rotate.flatClick){ // 旋转结束前，不允许再次触发
		rotate.calculateResult(1,2);
	}
}

但是，如果我们跟后台协商好，随机奖品是后台确定好之后，通知我们前端的，那么，我们就需要再写一份奖品已定的js代码：

var styleChange = function(obj){
	var style = '';
	for( var i in obj){
		style = style + i+':'+obj[i]+';';
	}
	return style;
}
var resultAngle = [
	{angle:0,probability:0.1,text:'恭喜中了二等奖'},
	{angle:60,probability:0.2,text:'恭喜中了一等奖'},
	{angle:120,probability:0.2,text:'恭喜中了六等奖'},
	{angle:185,probability:0.2,text:'恭喜中了五等奖'},
	{angle:240,probability:0.1,text:'恭喜中了四等奖'},
	{angle:300,probability:0.2,text:'恭喜中了三等奖'}
];

var rotate = {
	rotateAngle : 0, //起始位置为0
	flatClick : true, //转盘转动过程中不可再次触发
	calculateResult:function(resultIndex,type,duringTime){//type:0,箭头转动,1,背景转动;duringTime:持续时间(s)
		var self = this;
		type = type || 0; // 默认为箭头转动
		duringTime = duringTime || 1; // 默认为1s

		var randCircle = Math.ceil(Math.random() * 2) + 1; // 附加多转几圈，2-3

		self.flatClick = false; // 旋转结束前，不允许再次触发
		if(type == 1){ // 转动盘子
			self.rotateAngle =  self.rotateAngle - randCircle * 360 - resultAngle[resultIndex].angle - self.rotateAngle % 360;


			var elem = document.getElementById('target');
			var newStyle = {
				'transform': 'rotate('+self.rotateAngle+'deg)',
				'-ms-transform': 'rotate('+self.rotateAngle+'deg)',
				'-webkit-transform': 'rotate('+self.rotateAngle+'deg)',
				'-moz-transform': 'rotate('+self.rotateAngle+'deg)',
				'-o-transform': 'rotate('+self.rotateAngle+'deg)',
				'transition': 'transform ease-out '+duringTime+'s',
				'-moz-transition': '-moz-transform ease-out '+duringTime+'s',
				'-webkit-transition': '-webkit-transform ease-out '+duringTime+'s',
				'-o-transition': '-o-transform ease-out '+duringTime+'s'
			};
			var style = styleChange(newStyle);
			elem.setAttribute('style', style);
		}else{ // 转动指针
			self.rotateAngle = self.rotateAngle + randCircle * 360 + resultAngle[resultIndex].angle - self.rotateAngle % 360;

			var elem = document.getElementById('button');
			var newStyle = {
				'transform': 'rotate('+self.rotateAngle+'deg)',
				'-ms-transform': 'rotate('+self.rotateAngle+'deg)',
				'-webkit-transform': 'rotate('+self.rotateAngle+'deg)',
				'-moz-transform': 'rotate('+self.rotateAngle+'deg)',
				'-o-transform': 'rotate('+self.rotateAngle+'deg)',
				'transition': 'transform ease-out '+duringTime+'s',
				'-moz-transition': '-moz-transform ease-out '+duringTime+'s',
				'-webkit-transition': '-webkit-transform ease-out '+duringTime+'s',
				'-o-transition': '-o-transform ease-out '+duringTime+'s'
			};
			var style = styleChange(newStyle);
			elem.setAttribute('style', style);
		}
		// 旋转结束后，允许再次触发
		setTimeout(function(){ 
			self.flatClick = true;
			// 告诉结果
			alert(resultAngle[resultIndex].text);
		},duringTime*1000);
	}
}

function startRotate(){
	if(rotate.flatClick){ // 旋转结束前，不允许再次触发
		rotate.calculateResult(3,1,2);
	}
}
Loading Disqus comments...