您的位置：首页 > Web前端 > HTML5

【web前端】HTML5抽奖转盘demo学习笔记

2017-10-26 17:36 1036 查看

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

实现方式

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

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

重要的地方

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5抽奖转盘代码</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
<script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="js/main.js" ></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="bkgd" >
<img class="imgs" id="imgs" src="images/disc-rotate.gif" />
<div class="arrow"></div>
<button class="lot-btn" id="lot-btn" type="button"></button>
</div>
</body>
</html>
.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修改是想弄个移动端自适应，但是并没有做得很好╮(╯-╰)╭

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web前端 html5

相关文章推荐

新的分享

章节导航