jQuery大转盘
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/common/login.jsp"%>
<%@ include file="/common/alert.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>
<title>幸运大转盘</title>
<style>
/************************ base begin ************************/
body{
margin: 0;
padding: 0;
background: #fffceb;
font-family: Helvetica;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
ul, ol{
list-style: none;
padding: 0;
}
a{
text-decoration: none;
}
html{
font-size: 20px;
}
/************************ base end ************************/
.div_bg{
background: url(http://down.cashcashcash.cn/html/activity/images/img11/bg.png) 0 0 no-repeat;
background-size: 100%;
padding-top: 20px;
}
.img_bg1{
width:100%;
}
#img_bg2{
width:80%;
display: block;
margin: 0 auto;
}
.img_bg3{
width:100%;
}
.img_bg4{
width:90%;
}
.lottery_btn_wrapper{
display: block;
width:80px;
height:92px;
position: absolute;
top: 50%;
left:50%;
margin-left:-40px;
margin-top:-46px;
font-size: 0;
}
.img_btn, .img_btn2{
display: block;
width:80px;
height:92px;
}
.divMoney{
margin: 10px 20px;
}
.classFloat_l{
width:45%;
word-break:break-all;
float:left;
}
.classFloat_l p{
color:#888;
padding:0px;
margin:0px;
font-size:0.45rem;
line-height:18px;
}
.classFloat_r{
width:45%;
overflow: hidden;
float:right;
}
.bigFont{
font-size: 0.9rem;
color: #4e4e4e;
}
.balance_num{
color:#eb4444;
font-size:0.75rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.moneyNum{
font-size:1.3rem;
}
.img_record{
width:100%;
height:40px;
}
.myscroll {/*高度影响是否滚动*/
width: 90%;
height: 200px;
line-height: 24px;
font-size: 0.6rem;
overflow: hidden;
}
.name_list{
width: 100%;
height: 200px;
overflow: hidden;
color: #888;
}
.myscroll li {
height: 24px;
}
.myscroll a {
color: #333;
text-decoration: none;
}
.myscroll a:hover {
color: #ED5565;
text-decoration: underline;
}
.nameFont{
z-index:16;
font-size:0.9rem;
color: #4e4e4e;
width:100%;
text-align:center;
}
.pop_wrap{
position:fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*margin:auto;*/
background: rgba(0, 0, 0, .7);
z-index: 999;
display:none;
}
.pop_box{
/*width:60%;
height:150px;*/
background: #fff;
margin: 40% 10% 0;
padding-bottom: 20px;
display:none;
}
.pop_title_img{
position:relative;
top: -25px;
text-align: center;
}
.pop_title_img img{
width: 90%;
}
.pop_content,.pop_qualify{
font-size: 0.7rem;
text-align: center;
color: #666;
line-height: 24px;
margin: 0 0 20px;
}
.pop_content .lottery_count, .pop_content .reward_name{
color: #eb4444;
font-weight: bold;
}
.pop_btn_row{
text-align: center;
}
.pop_btn{
font-size: 0.7rem;
background: #eb4444;
display: inline-block;
padding: 12px 0;
margin: 0 5px;
width: 40%;
color: #fff;
border-radius: 6px;
webkit-border-radius: 6px;
}
.pop_btn.hover{
background: #d91212;
color: #f3afaf;
}
.popTwo{
display:none;
}
.lottery_btn_text{
font-family: '微软雅黑';
font-size: 0.4rem;
position: absolute;
text-align: center;
top: 69px;
width: 60px;
height: 11px;
line-height: 11px;
overflow: hidden;
left: 50%;
margin-left: -30px;
vertical-align: top;
}
.lottery_btn_text_active{
color: #a47044;
text-shadow: 0 1px 0 #fcea76;
}
.lottery_btn_text_disabled{
color: #838383;
text-shadow: 0 1px 0 #cbcbcb;
}
#pop_loading{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .6); display: none; z-index: 150; }
@-webkit-keyframes 'rotate'{ from{ -webkit-transform:rotate(0deg);transform:rotate(0deg); } to{ -webkit-transform:rotate(360deg);transform:rotate(360deg); } }
@keyframes 'rotate'{ from{ -webkit-transform:rotate(0deg);transform:rotate(0deg); } to{ -webkit-transform:rotate(360deg);transform:rotate(360deg); } }
.pop_loading_img{ display: inline-block; width: 50px; height: 50px; background: url(img/loading.png) 0 0 no-repeat; background-size: cover; -webkit-animation-name: "rotate";animation-name: "rotate"; -webkit-animation-duration: 1s;animation-duration: 1s; -webkit-animation-timing-function: linear;animation-timing-function: linear; -webkit-animation-iteration-count: infinite;animation-iteration-count: infinite; }
.pop_loading_text{ color: #fff; font-size: 0.8rem; margin-top: 10px; }
.pop_loading_inner { text-align: center; position: absolute; top: 50%; width: 100%; }
</style>
<body>
<input type="hidden" id="activityId" value="${curActivity.id}"/>
<div class="div_bg">
<img id="img_bg2" src="http://down.cashcashcash.cn/html/activity/images/img11/big_title.png"/>
<div style="background:url(http://down.cashcashcash.cn/html/activity/images/img11/cloud_bg.png) top center no-repeat; background-size:100%;">
<div style="background-size:100%;margin:0 auto;width:90%;position:relative;overflow:hidden;">
<img class="img_bg4" id="turntable" src="${curActivity.bannerImageUrl}" style="width:100%;" />
<c:if test="${curActivity.activate eq true}"><div class="lottery_btn_wrapper"><img class="img_btn" src="http://down.cashcashcash.cn/html/activity/images/img11/lottery_btn_01_2.png"><div class="lottery_btn_text lottery_btn_text_active">消耗<span>${curActivity.cutMoney}</span>积分</div></div></c:if>
<c:if test="${curActivity.activate ne true}"><div class="lottery_btn_wrapper"><img class="img_btn2" src="http://down.cashcashcash.cn/html/activity/images/img11/lottery_btn_03_2.png"><div class="lottery_btn_text lottery_btn_text_disabled">消耗<span>${curActivity.cutMoney}</span>积分</div></div></c:if>
</div>
</div>
<div class="divMoney">
<div style="overflow:hidden;background:#fcf4df;padding:15px 15px 0 15px;">
<div class="classFloat_l"><span class="bigFont">抽奖规则</span><p>${curActivity.activityContent}</p></div>
<div class="classFloat_r">
<span class="bigFont">我的余额</span>
<div class="balance_num">￥<span id="account" class="moneyNum">00.00</span></div>
</div>
</div>
<img class="img_record" src="http://down.cashcashcash.cn/html/activity/images/img11/content_bg.png" />
<div style="background:#fcf4df;padding:0 15px 15px 15px;">
<div class="nameFont">中奖姓名</div>
<div class="myscroll">
<ul class="name_list"></ul>
</div>
</div>
</div>
</div>
<div class="pop_wrap">
<div class="pop_box">
<div class="pop_title_img"><img class="img_pop" style="width:100%;" src="http://down.cashcashcash.cn/html/activity/images/img11/not_winning_icon.png" alt=""></div>
<div class="pop_content"></div>
<div class="pop_qualify"></div>
<div class="pop_btn_row popOne">
<a href="javascript:;" id="pop_btn_abandon" class="h_evt close_pop pop_btn">放弃，我怕</a>
<a href="javascript:;" id="pop_btn_again" class="h_evt continue_btn pop_btn">战！再抽</a>
</div>
<div class="pop_btn_row popTwo">
<a href="javascript:;" id="pop_btn_close" class="h_evt continue_btn pop_btn">关闭</a>
</div>
</div>
</div>
<div id="div_pop" style="width:40%;height:50%;position:absolute;top:34%;;left:32%;z-index:99;display:none;"></div>
<div id="pop_loading"><div class="pop_loading_inner"><div class="pop_loading_img"></div><div class="pop_loading_text">奖品准备中</div></div></div>
</body>
<script type="text/javascript" src="http://down.cashcashcash.cn/js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function (){
showActivityWinRecord();
});
//全部读取出 自动生成 代入滚动
function showActivityWinRecord(){
//$('.pop_wrap').css('height',$(window).height());
var chanceNum=1;
$.ajax({
async:false,
type: "POST",
url: "showActivityWinRecord.do",
data: "activityId="+$('#activityId').val(),
dataType:"json",
success: function(winRecordList){
if(winRecordList){
if(winRecordList != null && winRecordList.length > 0){
$.each(winRecordList,function(index,value){
if(this.darkPhoneNum){
var item =$('<li class="listName">'+this.darkPhoneNum+' 抽中'+this.activityReward.rewardName+'</li>');
$(".name_list").append(item);
}
})
if(animateTimer){
clearTimeout(animateTimer);
}
rollNameList();
}
}
},
error: function(){
AlertWin("网络连接失败，请稍后再试！");
}
});
setTimeout("showActivityWinRecord()",3600000);//一小时更新一次
}
var animateTimer;
// 中奖名单滚动
function rollNameList(){
var height = $('.name_list li:first-child').innerHeight();
$('.name_list li:first-child').animate({'margin-top': - height + 'px'}, 1000, function(){
$('.name_list').append($('.name_list li:first-child').css({'margin-top': 0}));
});
animateTimer = setTimeout(function(){rollNameList()}, 2000);//"rollNameList()"和function(){rollNameList()}效果一样
}
//当前可抽奖次数
var qualify = 3;
function startToLottery(){
//验证登陆
if(typeof(checkLoginStatus) == "function" && !checkLoginStatus()){
return;
}
_hmt.push(['_trackEvent', '${curActivity.activityName}', 'click', '${curActivity.activityName}//抽奖']);
MtaH5.clickStat('${curActivity.id}//lottery');
if(qualify<=0){
AlertWin("您的抽奖次数已用完!");
return;
}
lottery();
numL++;
}
var lotterying = false;//是否正在抽奖
function lottery(){
if(lotterying == true){//抽奖中...
return;
}
lotterying = true;
$.ajax({
async:false,
type: "POST",
url: "V11/lottery.do",
data: "activityId="+$('#activityId').val(),
dataType:"json",
success: function(lotteryResult){
$("#pop_loading").hide();//隐藏loading
if(lotteryResult && lotteryResult.errMsg){
AlertWin(lotteryResult.errMsg, 2000);
return;
}else if(lotteryResult){
qualify = lotteryResult.userRemainActivityCount;//用户当前可参与次数
$("#div_pop").show();//遮住按钮
var sum=2160*numL;//基础角度 开始转的圈数
if(lotteryResult.winReward){
var messageN=lotteryResult.winReward.rewardName;
sum+=(lotteryResult.winReward.turnTablePoint-1)*(360/parseInt("${fn:length(rewardList) }"))-3;
$("#turntable").css({"transition":"transform 6s","transform":"rotate("+sum+"deg)","-webkit-transition":"-webkit-transform 6s","-webkit-transform":"rotate("+sum+"deg)"});
if(lotteryResult.winReward.type == 2){
//中实物奖品
setTimeout(function(){location.href = "showUserAddressWithWinReward.do?winRecordId="+lotteryResult.winReward.winRecordId},6000);
return;
}
else{
$(".img_pop").attr("src","http://down.cashcashcash.cn/html/activity/images/img11/winning_icon.png");
$(".pop_content").html('恭喜您抽中了'+JSON.stringify(messageN));
$(".pop_qualify").html('还有<span class="lottery_count">'+qualify+'</span>次抽奖机会，再战吗？');
}
}
else{
$("#turntable").css({"transition":"transform 6s","transform":"rotate("+sum+"deg)","-webkit-transition":"-webkit-transform 6s","-webkit-transform":"rotate("+sum+"deg)"});
$(".img_pop").attr("src","http://down.cashcashcash.cn/html/activity/images/img11/not_winning_icon.png");
$(".pop_content").html('很遗憾，您未中奖。别气馁，');
}
if(qualify<=0){
$(".pop_qualify").html('今日抽奖机会已用完，我们明日再约~');
$('.popOne').hide();
$('.popTwo').show();
}
else{
$(".pop_qualify").html('还有<span class="lottery_count">'+qualify+'</span>次抽奖机会，再战吗？');
$('.popOne').show();
$('.popTwo').hide();
}
popShow();
resetAccount(lotteryResult.userRemainAsset);
}else{
AlertWin("抱歉，系统异常，请稍后再试");
}
},
error: function(){
$("#pop_loading").hide();//隐藏loading
AlertWin("网络连接失败，请稍后再试！");
}
});
lotterying = false;
}
var numL=1;
$('.img_btn').click(function () {
$("#pop_loading").show();//显示loading
startToLottery();
});
$('#pop_btn_close').click(function(){
$('.pop_wrap,.pop_box,#div_pop').hide();
})
$('#pop_btn_abandon').click(function(){
$('.pop_wrap,.pop_box,#div_pop,#pop_loading').hide();//改
$('.img_btn').bind("click");
})
$('#pop_btn_again').click(function(){
$('.pop_wrap,.pop_box').hide();//改
$("#pop_loading").show()//显示loading
startToLottery();
})
$('#btnCheck').click(function(){
refreshs();
})
function refreshs(){
window.location.reload();
}
//显示弹框
function popShow(){
setTimeout("$('.pop_box, .pop_wrap').show()", 6000);
}
//动态增加数字效果, target为最终达到的数字
function resetAccount(target){
$$("account").innerHTML = "00.00";
var delta = 0;
for(var i=40; i<50; i++){
if(target%i == 0){
continue;
}else{
delta = parseFloat((target-0)/i);
var current = 0;
accountChange(target, delta, current);
return;
}
}
}
//动态增加数字效果，循环组件
function accountChange(target, delta, current){
var current = delta+current;
var str = dealNum(current);
if(parseFloat(str)>target){
$$("account").innerHTML = dealNum(target);
}else{
$$("account").innerHTML = str;
setTimeout(function(){
accountChange(target, delta, current);
}, 50);
}
}
//数字内容格式化
function dealNum(num){
var arr = (num+"").split(".");
var result = "";
if(arr.length == 1){
var a = arr[0];
if(a.length==1){
a = "0"+a;
}
result = a+".00";
}else{
var a = arr[0];
if(a.length==1){
a = "0"+a;
}
var b = arr[1];
if(b.length==1){
b = b+"0";
}else if(b.length>2){
b = b.substr(0,2);
}
result = a+"."+b;
}
return result
}
//初始化可抽奖次数
function initActivityCount(){
$.ajax({
async:false,
type: "POST",
url: "getUserRemainActivityCount.do",
data:{activityId:$('#activityId').val()},
dataType:"json",
success: function(data){
qualify = data;
},
error: function(){
AlertWin("网络连接失败，请稍后再试！");
}
});
}
//登陆成功初始化
function initLogined(){
initActivityCount();
initUserRemainAsset();
}
function initUserRemainAsset(){//余额显示
$.ajax({
async:false,
type: "POST",
url: "getUserRemainAsset.do",
data:{},
success: function(userRemainAsset){
resetAccount(userRemainAsset);
},
error: function(data){
AlertWin("网络连接失败，请稍后再试！");
}
});
}
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?8a3c1daeee0074b3986dd54e80007b66";//cashcash.cn (活动)
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script type="text/javascript" src="http://tajs.qq.com/h5?sId=500000568" charset="UTF-8"></script>
</html>
678
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
