<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="https://bbs.csdn.net/scripts/ui/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<link href="https://bbs.csdn.net/images/style.css" rel="stylesheet" type="text/css" />
<link href="https://bbs.csdn.net/statics/global.css" rel="stylesheet" type="text/css" />
<script src="https://bbs.csdn.net/scripts/jquerye/jquery.tools.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="https://bbs.csdn.net/images/luckdraw/jquery.min.js"></script>
<script type="text/javascript" src="https://bbs.csdn.net/scripts/jquery/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://bbs.csdn.net/scripts/jquery/messages_cn.js"></script>
<script type="text/javascript" src="https://bbs.csdn.net/scripts/ui/js/ligerBuild.min.js"></script>
<script type="text/javascript" src="https://bbs.csdn.net/images/luckdraw/jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="https://bbs.csdn.net/images/luckdraw/jquery.easing.min.js"></script>
<link rel="stylesheet" href="https://bbs.csdn.net/images/Luckdraw/skin.css?20190516003&tcdsp" />
<script type="text/javascript" src="https://bbs.csdn.net/js/function.js"></script>
<script src="https://bbs.csdn.net/js/e/global.js" type="text/javascript"></script>
<script src="https://bbs.csdn.net/js/e/common.js" type="text/javascript"></script>
<style type="text/css">
* {
padding:0;
margin:0
}
body {
text-align:center;
background-color:#1664ad;
}
.ly-plate {
position:relative;
width:509px;
height:509px;
margin:50px auto;
}
.rotate-bg {
width:509px;
height:509px;
background:url(../images/luckdraw/ly-plate.png);
position:absolute;
top:0;
left:0;
margin-top:0%;
}
.ly-plate div.lottery-star {
width:214px;
height:214px;
position:absolute;
top:150px;
left:147px;
/*text-indent:-999em;
overflow:hidden;
background:url(rotate-static.png);
-webkit-transform:rotate(0deg);
*/
outline:none
}
.ly-plate div.lottery-star #lotteryBtn {
cursor:pointer;
position:absolute;
top:0;
left:0;
*left:-107px
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="wrapper default">
<div class="layer content">
<div class="ly-plate">
<div class="rotate-bg">
</div>
<div class="lottery-star">
<img src="https://img.uj5u.com/2021/03/25/170486250427461.png" id="lotteryBtn"></div>
</div>
<script type="text/javascript">
var dataId = '<%=dataId %>';
pid = '<%=pid %>';
$(function () {
var timeOut = function () { //超時函式
$("#lotteryBtn").rotate({
angle: 0,
duration: 10000,
animateTo: 2160, //這里是設定請求超時后回傳的角度，所以應該還是回到最原始的位置，2160是因為我要讓它轉6圈，就是360*6得來的
callback: function () {
messagebox('網路超時')
}
});
};
var rotateFunc = function (awards, angle, text) { //awards:獎項，angle:獎項對應的角度
$('#lotteryBtn').stopRotate();
$("#lotteryBtn").rotate({
angle: 0,
duration: 5000,
animateTo: angle + 1440, //angle是圖片上各獎項對應的角度，1440是我要讓指標旋轉4圈。所以最后的結束的角度就是這樣子^^
callback: function () {
messagebox(text)
}
});
};
$("#lotteryBtn").rotate({ bind: {
click: function () {
var time = [0, 1, 2, 3, 4, 5, 6, 7];
time = time[Math.floor(Math.random() * time.length)];
if (time == 0) {
//timeOut(); //網路超時
}
$.ajax({
type: "post",
dataType: "json",
data: "dataId=" + dataId + "&pid=" + pid + "&clienttime=" + Math.random(),
url: "/tools/luckdraw_ajax.aspx?oper=go",
error: function (XmlHttpRequest, textStatus, errorThrown) { alert(XmlHttpRequest.responseText); },
success: function (d) {
//alert(JSON.stringify(d));
//document.write(JSON.stringify(d));
switch (d.result) {
case '1':
var angle = [22, 157, 247];
angle = angle[Math.floor(Math.random() * angle.length)]
rotateFunc(1, angle, d.returnval)
break;
case '0':
var angle = [67, 112, 202, 292, 337];
angle = angle[Math.floor(Math.random() * angle.length)]
rotateFunc(0, angle, d.returnval)
break;
}
}
});
return;
if (time == 1) {
var data = [1, 2, 3, 0]; //回傳的陣列
data = data[Math.floor(Math.random() * data.length)];
if (data == 1) {
rotateFunc(1, 157, '恭喜您抽中的一等獎')
}
if (data == 2) {
rotateFunc(2, 247, '恭喜您抽中的二等獎')
}
if (data == 3) {
rotateFunc(3, 22, '恭喜您抽中的三等獎')
}
if (data == 0) {
var angle = [67, 112, 202, 292, 337];
angle = angle[Math.floor(Math.random() * angle.length)]
rotateFunc(0, angle, '很遺憾，這次您未抽中獎')
}
}
}
}
});
})
</script>
<div class="control-bar-wrapper">
<ul class="control-list">
<li class="current-award"><span class="text">當前抽獎：<asp:Label ID="lb_usercode" runat="server"></asp:Label></span>
<span class="award-list-wrapper"></span></li>
</ul>
</div>
</div>
</div>
</form>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/269642.html
標籤：JavaScript
下一篇：起始時間與終止時間顯示