欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

web前端:HTML5抽奖转盘demo

程序员文章站 2022-06-21 22:44:27
网上下载了一些转盘demo来学习,记录如下: 实现方式 1、转盘要么为纯图片,利用rotate控制图片旋转 2、转盘要么是JS手绘的,使用canvas标签,通过控制CSS改变...

网上下载了一些转盘demo来学习,记录如下:

实现方式

1、转盘要么为纯图片,利用rotate控制图片旋转

2、转盘要么是JS手绘的,使用canvas标签,通过控制CSS改变来旋转

重要的地方

概率:初始化权重值,使用Math.floor(Math.random()*sum取得随机数

旋转基数:转盘旋转一圈后并不是回到原点,所以下次改变角度的时候要算上之前旋转过的度数,所以转盘转过一圈的时候要把旋转基数+1

旋转度数:旋转度数控制停留的位置,使用setTimeout来控制旋转的时间

代码带详细注释:【图片实现方式】

.bkgd{
	margin: auto;
	margin-top:10rem;
	background: url("../images/disc-bg.gif") no-repeat scroll 0 0 transparent;
	background-size: 100%;
	height:15rem;
	width:15rem;
	position: relative;
}
.imgs{
	position: absolute;
	width: 12rem;
	height: 12rem;
	margin-top:1.4rem;
	margin-left:1.6rem;
}
.arrow{
	background: url("../images/arrow.png") no-repeat scroll 0 0 transparent;
	background-size: 100%;
	height: 7rem;
	width: 1.1rem;
	margin-left: 7rem;
	margin-top: 3rem;
	position: absolute;
}
.lot-btn{
	background: url("../images/buttons_02.png") no-repeat scroll 0 0 transparent;
	background-size: 100%;
	height: 2.9rem;
	width: 2.9rem;
	overflow: hidden;
	position: absolute;
	border: none;
	cursor: pointer;
	margin-left: 6.1rem;
	margin-top: 6rem;
}
$(function(){
	var clickNum = 5;//可抽奖次数
	var rotNum = 0;//旋转基数,转盘转过一圈则旋转基数+1
	var angles;//旋转角度
	var notice = null;//中奖公告

	var data = [
		{
			"info":"100G永久免费空间",
			"probability":10
		},
		{
			"info":"360经验值",
			"probability":10
		},
		{
			"info":"100M空间",
			"probability":10
		},
		{
			"info":"36经验值",
			"probability":100
		},
		{
			"info":"360M空间",
			"probability":10
		},
		{
			"info":"100经验值",
			"probability":10
		},
		{
			"info":"36M空间",
			"probability":10
		}
	]
	
	$("#lot-btn").click(function(){
		if (clickNum >= 1){
			clickNum = clickNum-1;	//可抽奖次数减一
			rotNum ++;	//旋转基数加一
			runCup();	//转盘旋转
			$('#lot-btn').attr("disabled", true);
			setTimeout(function(){
				alert(notice);
				$("#lot-btn").attr("disabled", false);
			},1800);
		}
		else{
			alert("亲,抽奖次数已用光!");
		}
	})
	
	//转盘旋转,将各个变量结果赋值
	function runCup(){
		var resultinfo = getResult();
		notice = '恭喜获得:' + resultinfo;
		angles = rotNum*1080 + getAngles(resultinfo);
	
		$("#imgs").rotate({
			animateTo: angles,
			duration: 1800
		});
	}

	//随机一个结果用以展示
	function getResult(){
		var sum = 0;
		var rand = 0;	//随机数
		var result = 0;

		//取得权重总数
		for (var i = 0; i < data.length; i++) {
			sum += data[i].probability
		}
		console.log( sum );

		//从总数里面随机一个数,并对应输入随机的值
		for (var i = 0; i < data.length; i++) {
			rand = Math.floor(Math.random()*sum + 1);	
			if (data[i].probability >= rand) {
				result = data[i].info;
				break;
			} else {
			sum -= data[i].probability;
			}
		}
		console.log( result );
		return result;
	}

	//获得旋转结果对应的旋转度数
	function getAngles(resultinfo){
		var num
		//查找结果的位置
		for (var i = 0; i < data.length; i++) {
			if( resultinfo == data[i].info ){
				num = i;
				break
			}else{
				console.log( "不相等,继续循环" );
			}
		}
		console.log( num );
		if( num == 0 ){angles = 1825;
		}else if( num == 1 ){angles = 1775;
		}else if( num == 2 ){angles = 1725;
		}else if( num == 3 ){angles = 1675;
		}else if( num == 4 ){angles = 1625;
		}else if( num == 5 ){angles = 1925;
		}else if( num == 6 ){angles = 1875;
		}else{console.log( "error" );
		}
		return angles;
	}
})

原始demo来源网络,应该很容易搜到~~CSS修改是想弄个移动端自适应,但是并没有做得很好╮(╯-╰)╭