image.png
image.png
image.png
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>春节抽奖</title>
<style type="text/css">
.rule-icon {text-align: right;}
.lottery-num {text-align: center;padding-bottom: 15px;}
.lottery-num h1 {font-size: 28px;color: #ff5858;}
@keyframes mypopup{ from {transition:opacity 0s ease;transform:scale(0);} to {transition:opacity 1s ease;transform:scale(1);}}
@-moz-keyframes mypopup Firefox{ from {transition:opacity 0s ease;transform:scale(0);} to {transition:opacity 1s ease;transform:scale(1);}}
@-webkit-keyframes mypopup Safari and Chrome{ from {transition:opacity 0s ease;transform:scale(0);} to {transition:opacity 1s ease;transform:scale(1);}}
@-o-keyframes mypopup Opera{ from {transition:opacity 0s ease;transform:scale(0);} to {transition:opacity 1s ease;transform:scale(1);}}
.popup {width: 100%;height: 100%;position: fixed;top: 0;padding: 40% 0;display: none;background: -webkit-linear-gradient(#ff5958,#802828,#b12525,#ff5958);background: -o-linear-gradient(#ff5958,#802828,#b12525,#ff5958);background: -moz-linear-gradient(#ff5958,#802828,#b12525,#ff5958);background: linear-gradient(#ff5958,#802828,#b12525,#ff5958);z-index: 9999;}
.popmsg { height: 66px; padding-top: 10px; color: #ff5959; font-size: 32px; position: relative;}
.poptitle { font-size: 36px; display: block; height: 150px; line-height: 150px; color: #ffffff; position: relative;}
.popupwin { width: 60%; height: auto; text-align: center; margin: 0 auto; display: none; border-radius: 25px; background: url(success.png); animation: mypopup 1.6s; -moz-animation: mypopup 1.6s; /* Firefox */ -webkit-animation: mypopup 1.6s; /* Safari 和 Chrome */ -o-animation: mypopup 1.6s; /* Opera */}
.popboxnull { width: 60%; height: auto; text-align: center; margin: 0 auto; display: none; border-radius: 25px; background: url(sorry.png);}
.poptextmsg { height: 66px; padding-top: 40px; color: #EA5151; font-size: 32px; position: relative;}
.popboxmax { width: 60%; height: auto; text-align: center; margin: 0 auto; display: none; border-radius: 25px; background: url(sorry.png);}
.popchance { height: 100px; color: #EA5151; font-size: 32px; position: relative;}
.popsee { height: 100px; line-height: 100px; color: white; font-size: 1rem;}
.popsee_a { height: 100px; line-height: 100px; color: white; font-size: 1rem;}
.popnosee { height: 100px; line-height: 100px; color: white; font-size: 1rem;}
.turnplate-box{ width: 550px;height: 550px;margin: 10px auto;position: relative;}
.turnplate-box canvas{ position: absolute;}
#myCanvas{ background-lottery.color: white;border-radius: 100%;}
#myCanvas01,#myCanvas03{left: 100px;top: 100px;z-index: 30;}
#myCanvas02{left: 150px;top: 150px;z-index: 20;}
#myCanvas{-o-transform: transform 6s;-ms-transform: transform 6s;-moz-transform: transform 6s; -webkit-transform: transform 6s;transition: transform 6s;-o-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;}
.turnplatw-btn{ width: 150px;height: 150px;left: 200px;top: 200px;border-radius: 100%;position: absolute;cursor: pointer;border: none;background: transparent;outline: none;z-index: 40;}
</style>
</head>
<body>
<section>
<div class="lottery-num"><!--你今天还剩几次机会-->
<h1>您还剩 <em class="count">0</em> 次机会</h1>
</div>
<div class="outercont">
<div class="outer-cont">
<div class="turnplate-box"><!-- 转盘 -->
<canvas id="myCanvas" width="550px" height="550px"></canvas>
<canvas id="myCanvas01" width="350px" height="350px"></canvas>
<canvas id="myCanvas03" width="350px" height="350px"></canvas>
<canvas id="myCanvas02" width="250px" height="250px"></canvas>
<button id="startLottery" class="turnplatw-btn"></button>
</div>
</div>
</div>
<div class="popup"><!--弹出框-->
<div class="popupwin"><!--中奖-->
<p class="poptitle">
恭喜您! <span class="popclose">中奖了</span>
</p>
<p class="popmsg"></p>
<p><img width="120px" height="120px" src="gift.png"></p>
<p class="popsee">
<a href="javascript:void(0);" onclick="hidePopBox()">
<img width="36%" height="auto" src="ok.png">
</a>
</p>
<p class="popsee_a">
<a href="javascript:void(0);" onclick="hidePopBox()">
<img width="36%" height="auto" src="ok_a.png">
</a>
<a href="javascript:void(0);" onclick="toAppShopping()">
<img width="36%" height="auto" src="use.png">
</a>
</p>
</div>
<div class="popboxnull"><!--未中奖继续游戏-->
<p class="poptitle">
再接再厉 <span class="popclose"></span>
</p>
<p class="poptextmsg">好运总在下一次，不要放弃!</p>
<p><img width="120px" height="120px" src="gift_no.png"></p>
<p class="popsee">
<a href="javascript:void(0);" onclick="hidePopBox()">
<img width="36%" height="auto" src="ok.png">
</a>
</p>
</div>
<div class="popboxmax"><!--抽奖次数达到上限-->
<p class="poptitle">
您的抽奖次数已用完<span class="popclose"></span>
</p>
<p class="popchance">可分享微信朋友圈、缴纳物业费获得抽奖次数</p>
<p><img width="120px" height="120px" src="gift_no.png"></p>
<p class="popnosee">
<a href="javascript:void(0);" onclick="hidePopBox()">
<img width="36%" height="auto" src="ok.png">
</a>
</p>
</div>
</div>
</section>
</body>
</html>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var lottery = {
angles:0,//旋转角度
clickNum:3,//可抽奖次数
rotNum:0,//旋转次数|速度
notice:'',// 弹出内容
info:[],// 奖品
infoUnit:[],
color:[],
init:function(){// 转盘初始化
// 初始化参数
lottery.color = ["#bd3434","#c76f6f","rgba(0,0,0,0.5)","#DCC722","white","#FF4350"];
lottery.info = ["谢谢参与"," 1000"," 10"," 500"," 100"," 4999"," 1"," 20"];
lottery.infoUnit = ['再接再厉',' 元',' 元',' 红包',' 元',' 红包',' 元',' 红包']
// 初始化圆盘
var canvas=document.getElementById('myCanvas');
var canvas01=document.getElementById('myCanvas01');
var canvas03=document.getElementById('myCanvas03');
var canvas02=document.getElementById('myCanvas02');
var ctx=canvas.getContext('2d');
var ctx1=canvas01.getContext('2d');
var ctx3=canvas03.getContext('2d');
var ctx2=canvas02.getContext('2d');
// 外圆
var startAngle = 0;// 扇形的开始弧度
var endAngle = 0;// 扇形的终止弧度
// 画一个8等份扇形组成的圆形
for (var i = 0; i< 8; i++){
startAngle = Math.PI*(i/4-1/8);
endAngle = startAngle+Math.PI*(1/4);
ctx.save();
ctx.beginPath();
ctx.arc(275,275,250, startAngle, endAngle, false);
ctx.lineWidth = 500;
if (i%2 == 0) {
ctx.strokeStyle = lottery.color[0];
}else{
ctx.strokeStyle = lottery.color[1];
}
ctx.stroke();
ctx.restore();
}
// 各奖项
ctx.textAlign='start';
ctx.textBaseline='middle';
ctx.fillStyle = lottery.color[3];
var step = 2*Math.PI/8;
for ( var i = 0; i < 8; i++) {
ctx.save();
ctx.beginPath();
ctx.translate(275,275);
ctx.rotate(i*step);
ctx.font = "28px Microsoft YaHei";
ctx.fillStyle = lottery.color[3];
ctx.fillText(lottery.info[i],-43,-225,80);
ctx.font = "24px Microsoft YaHei";
ctx.fillText(lottery.infoUnit[i],-43,-180,80);
ctx.closePath();
ctx.restore();
}
//箭头指针
ctx1.beginPath();
ctx1.moveTo(175,42);
ctx1.lineTo(157,108);
ctx1.lineTo(192,108);
ctx1.lineTo(175,42);
ctx1.fillStyle = lottery.color[5];
ctx1.fill();
ctx1.closePath();
//中间小圆
ctx3.beginPath();
ctx3.arc(175,175,70,0,Math.PI*2,false);
ctx3.fillStyle = lottery.color[5];
ctx3.fill();
ctx3.closePath();
//小圆文字
ctx3.font = "Bold 22px Microsoft YaHei";
ctx3.textAlign='start';
ctx3.textBaseline='middle';
ctx3.fillStyle = lottery.color[4];
ctx3.beginPath();
ctx3.fillText('开始',150,157,70);
ctx3.fillText('抽奖',150,192,70);
ctx3.fill();
ctx3.closePath();
//中间圆圈
ctx2.beginPath();
ctx2.arc(125,125,125,0,Math.PI*2,false);
ctx2.fillStyle = lottery.color[2];
ctx2.fill();
ctx2.closePath();
},
start:function(){// 启动
if (lottery.clickNum >= 1) {
if(lottery.angles != 0){
lottery.rotNum ++;
}
lottery.clickNum = lottery.clickNum-1;//可抽奖次数减一
$(".count").text(lottery.clickNum);
lottery.probability();// 初始化旋转角度
lottery.runCup();//转盘旋转
$('#tupBtn').attr("disabled", true);//转盘旋转过程“开始抽奖”按钮无法点击
setTimeout(function(){//“开始抽奖”按钮无法点击恢复点击
$(".popmsg").text(lottery.notice);
$(".popup").css("display","block");
if("谢谢参与再接再厉"==lottery.notice){
$(".popboxmax").css("display","none");
$(".popupwin").css("display","none");
$(".popboxnull").css("display","block");
$(".popsee").css("display","block");
$(".popsee_a").css("display","none");
}else {
$(".popboxnull").css("display","none");
$(".popboxmax").css("display","none");
$(".popupwin").css("display","block");
$(".popsee").css("display","none");
$(".popsee_a").css("display","block");
}
$('#tupBtn').removeAttr("disabled", true);
},6000);
} else{// 亲，您的机会已用完~
$(".popmsg").text(lottery.notice);
$(".popup").css("display","block");
$(".popboxnull").css("display","none");
$(".popupwin").css("display","none");
$(".popup").css("display","block");
$(".popboxmax ").css("display","block");
return;
}
},
runCup:function(){// 转盘旋转
var degValue = 'rotate('+lottery.angles+'deg'+')';
$('#myCanvas').css('-o-transform',degValue); //Opera
$('#myCanvas').css('-ms-transform',degValue); //IE浏览器
$('#myCanvas').css('-moz-transform',degValue); //Firefox
$('#myCanvas').css('-webkit-transform',degValue); //Chrome和Safari
$('#myCanvas').css('transform',degValue);
},
probability:function(){// 各奖项对应的旋转角度及中奖公告内容
//获取随机数
var num = parseInt(Math.random()*(7 - 0 + 0) + 0);
//概率
if ( num == 0 ) {
lottery.angles = 2160 * lottery.rotNum + 1800;
lottery.notice = lottery.info[0] + lottery.infoUnit[0];
} else if ( num == 1 ) {
lottery.angles = 2160 * lottery.rotNum + 1845;
lottery.notice = lottery.info[7] + lottery.infoUnit[7];
} else if ( num == 2 ) {
lottery.angles = 2160 * lottery.rotNum + 1890;
lottery.notice = lottery.info[6] + lottery.infoUnit[6];
} else if ( num == 3 ) {
lottery.angles = 2160 * lottery.rotNum + 1935;
lottery.notice = lottery.info[5] + lottery.infoUnit[5];
} else if ( num == 4 ) {
lottery.angles = 2160 * lottery.rotNum + 1980;
lottery.notice = lottery.info[4] + lottery.infoUnit[4];
} else if ( num == 5 ) {
lottery.angles = 2160 * lottery.rotNum + 2025;
lottery.notice = lottery.info[3] + lottery.infoUnit[3];
} else if ( num == 6 ) {
lottery.angles = 2160 * lottery.rotNum + 2070;
lottery.notice = lottery.info[2] + lottery.infoUnit[2];
} else if ( num == 7 ) {
lottery.angles = 2160 * lottery.rotNum + 2115;
lottery.notice = lottery.info[1] + lottery.infoUnit[1];
}
}
}
$(document).ready(function(){ lottery.init(); });
$("#startLottery").click(function(){lottery.start(); });
function hidePopBox(){ $(".popup").css("display","none"); }// 关闭成功弹出框
</script>
网友评论