<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>大转盘活动</title>
<link rel="stylesheet" href="css/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="turbg">
<img src="images/turbanner.png" class="img-responsive">
<img src="images/1.png" id="shan-img" style="display:none;" />
<img src="images/2.png" id="sorry-img" style="display:none;" />
<div class="banner">
<div class="turnplate" style="background-image:url(images/turnplate-bg.png);background-size:100% 100%;">
<canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
<img class="pointer" src="images/turnplate-pointer.png"/>
</div>
</div>
<div class="">
<img src="images/turshadow1.png" class="img-responsive" style="position:relative;top:-5px;">
<img src="images/turshadow2.png" class="img-responsive" style="position:relative;bottom:-5px;">
</div>
</div>
<div class="pt10lr10 mt20">
<div class="pline"></div>
<div class="prizebox">
<div class="ptitle"><strong>中奖榜单</strong><span class="pull-right font12">累计<span class="text-red">58</span>人中奖</span></div>
<div class="prizelistwrap" id="demo" style="position:relative;">
<div class="prizelist" id="demo1">
<div class="clearfix pb10">
<div class="col-xs-4 clearPadding text-red">15690843819</div>
<div class="col-xs-6 clearPadding">恒大矿泉水一瓶</div>
<div class="col-xs-2 clearPadding">18:55:30</div>
</div>
<div class="clearfix pb10">
<div class="col-xs-4 clearPadding text-red">15690843819</div>
<div class="col-xs-6 clearPadding">恒大矿泉水一瓶</div>
<div class="col-xs-2 clearPadding">18:55:30</div>
</div>
<div class="clearfix pb10">
<div class="col-xs-4 clearPadding text-red">15690843819</div>
<div class="col-xs-6 clearPadding">恒大矿泉水一瓶</div>
<div class="col-xs-2 clearPadding">18:55:30</div>
</div>
<div class="clearfix pb10">
<div class="col-xs-4 clearPadding text-red">15690843819</div>
<div class="col-xs-6 clearPadding">恒大矿泉水一瓶</div>
<div class="col-xs-2 clearPadding">18:55:30</div>
</div>
<div class="clearfix pb10">
<div class="col-xs-4 clearPadding text-red">15690843819</div>
<div class="col-xs-6 clearPadding">恒大矿泉水一瓶</div>
<div class="col-xs-2 clearPadding">18:55:30</div>
</div>
<div class="clearfix pb10">
<div class="col-xs-4 clearPadding text-red">15690843819</div>
<div class="col-xs-6 clearPadding">恒大矿泉水一瓶</div>
<div class="col-xs-2 clearPadding">18:55:30</div>
</div>
</div>
<div class="prizelist" id="demo2"></div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/awardRotate.js"></script>
<script type="text/javascript">
var speed=40;
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML;
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight;
else{
demo.scrollTop++;
}
}
console.log(demo.scrollTop);
MyMar=setInterval(Marquee,speed)
var turnplate={
restaraunts:[], //大转盘奖品名称
colors:[], //大转盘奖品区块对应背景颜色
outsideRadius:192, //大转盘外圆的半径
textRadius:155, //大转盘奖品位置距离圆心的距离
insideRadius:68, //大转盘内圆的半径
startAngle:0, //开始角度
bRotate:false //false:停止;ture:旋转
};
$(document).ready(function(){
//动态添加大转盘的奖品与奖品区域背景颜色
turnplate.restaraunts = ["50M免费流量包", "10闪币", "谢谢参与", "5闪币", "10M免费流量包", "20M免费流量包", "20闪币 ", "30M免费流量包", "100M免费流量包", "2闪币"];
turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"];
var rotateTimeOut = function (){
$('#wheelcanvas').rotate({
angle:0,
animateTo:2160,
duration:8000,
callback:function (){
alert('网络超时，请检查您的网络设置！');
}
});
};
//旋转转盘 item:奖品位置; txt：提示语;
var rotateFn = function (item, txt){
var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
if(angles<270){
angles = 270 - angles;
}else{
angles = 360 - angles + 270;
}
$('#wheelcanvas').stopRotate();
$('#wheelcanvas').rotate({
angle:0,
animateTo:angles+1800,
duration:8000,
callback:function (){
alert(txt);
turnplate.bRotate = !turnplate.bRotate;
}
});
};
$('.pointer').click(function (){
if(turnplate.bRotate)return;
turnplate.bRotate = !turnplate.bRotate;
//获取随机数(奖品个数范围内)
var item = rnd(1,turnplate.restaraunts.length);
//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
rotateFn(item, turnplate.restaraunts[item-1]);
/* switch (item) {
case 1:
rotateFn(252, turnplate.restaraunts[0]);
break;
case 2:
rotateFn(216, turnplate.restaraunts[1]);
break;
case 3:
rotateFn(180, turnplate.restaraunts[2]);
break;
case 4:
rotateFn(144, turnplate.restaraunts[3]);
break;
case 5:
rotateFn(108, turnplate.restaraunts[4]);
break;
case 6:
rotateFn(72, turnplate.restaraunts[5]);
break;
case 7:
rotateFn(36, turnplate.restaraunts[6]);
break;
case 8:
rotateFn(360, turnplate.restaraunts[7]);
break;
case 9:
rotateFn(324, turnplate.restaraunts[8]);
break;
case 10:
rotateFn(288, turnplate.restaraunts[9]);
break;
} */
console.log(item);
});
});
function rnd(n, m){
var random = Math.floor(Math.random()*(m-n+1)+n);
return random;
}
//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
window.onload=function(){
drawRouletteWheel();
};
function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
//根据奖品个数计算圆周角度
var arc = Math.PI / (turnplate.restaraunts.length/2);
var ctx = canvas.getContext("2d");
//在给定矩形内清空一个矩形
ctx.clearRect(0,0,422,422);
//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
ctx.strokeStyle = "#FFBE04";
//font 属性设置或返回画布上文本内容的当前字体属性
ctx.font = '16px Microsoft YaHei';
for(var i = 0; i < turnplate.restaraunts.length; i++) {
var angle = turnplate.startAngle + i * arc;
ctx.fillStyle = turnplate.colors[i];
ctx.beginPath();
//arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
//锁画布(为了保存之前的画布状态)
ctx.save();
//----绘制奖品开始----
ctx.fillStyle = "#E5302F";
var text = turnplate.restaraunts[i];
var line_height = 17;
//translate方法重新映射画布上的 (0,0) 位置
ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
//rotate方法旋转当前的绘图
ctx.rotate(angle + arc / 2 + Math.PI / 2);
/** 下面代码
H5，微信签到页面
5星 · 超过95%的资源 需积分: 50 144 浏览量
2018-03-14
14:59:30
上传
评论 1
收藏 1.13MB ZIP 举报 
H5手机签到转盘抽奖页面.zip （57个子文件） 
H5手机签到转盘抽奖页面 
index2.html 7KB index.html 6KB images 
qdCanlendar.png 32KB qdbanner.png 72KB turnplate-pointer.png 3KB turbanner.png 63KB qiandao_sprits.png 16KB turshadow2.png 2KB dou.png 7KB qdCanbg.png 41KB qiandao_day.png 16KB qiandao_icon.png 2KB turbg.png 52KB
calenbg.jpg 121KB qiandao_warp_bg.jpg 63KB turshadow1.png 13KB qiandao_banner.jpg 123KB turnplate-bg.png 5KB 1.png 498B 2.png 754B gift.png 59KB
Thumbs.db 68KB qdBanner.jpg 123KB qiandao_con.jpg 31KB btn-qiandao.png 5KB qiandtip.png 12KB myPrizeList.html 3KB turnlate.html 10KB js awardRotate.js 11KB qiandao_js.js 3KB jquery-1.10.2.min.js 92KB calendar.js 5KB calendar.html 7KB 日历.html 3KB css qiandao_style.css 6KB bootstrap3 js npm.js 496B bootstrap.js 67KB bootstrap.min.js 35KB iconfont ux_1445245506_502856 
iconfont.svg 3KB demo.css 0B iconfont.woff 3KB iconfont.eot 6KB iconfont.ttf 5KB iconfont.css 706B fonts glyphicons-halflings-regular.ttf 44KB glyphicons-halflings-regular.woff2 18KB glyphicons-halflings-regular.eot 20KB glyphicons-halflings-regular.svg 106KB glyphicons-halflings-regular.woff 23KB css bootstrap-theme.css.map 42KB bootstrap.min.css 114KB bootstrap-theme.min.css 19KB bootstrap-theme.css 23KB bootstrap.css.map 371KB bootstrap.css 145KB style2.css 9KB style.css 9KB资源评论
漂泊云外2018-06-04更多的资源课程，关注我，一个群给你搞定103086975，很不错的资源
哈佩斯2019-09-29比较简单一些，具有一定的实用性
