<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>签到即抽现金红包</title>
<script src="../scripts/viewport.js"></script>
<style>
*{margin:0;padding:0}@font-face{font-family:'YourWebFontName';src:url('../fonts/Bebas-Regular.otf')}.price{-font-family:'YourWebFontName'}li{list-style:none}html,body{width:100%;background:url('../images/evebg.png') center;background-size:cover;font-family:"Comic Sans MS","幼圆","黑体",sans-serif}div{width:100%}.clear{clear:both}.clear:after{clear:both;display:table;content:''}.sign-layer{position:fixed;top:0;bottom:0;left:0;z-index:888;display:none;width:100%}.darkcolor{color:#781fe9}.darkbcolor{background-color:#781fe9!important}.trh{border-bottom:1px solid #781fe9;width:100%}.trh th{width:80px;height:64px;text-align:center;line-height:64px}.trb{font-weight:bold}.trb td{width:80px;height:64px;-height:calc(width);line-height:64px;text-align:center;-font-family:'YourWebFontName'}.trb td div{height:100%;vertical-align:middle;position:relative;border:4px solid white;box-sizing:border-box}.radius5{border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px}.tbDiv{padding:20px;box-sizing:border-box}table{width:100%;border-collapse:collapse}.sign-cand{background-color:white;border-radius:4px}.sign-today{border:4px solid #781fe9!important;box-sizing:border-box}.btns{font-size:150%;padding:4px 10px;cursor:pointer}.sign-pin{position:absolute!important;left:0;top:0;margin:0}.svg-triangle{width:35px!important;height:35px!important;margin:0 auto}.svg-triangle polygon{fill:#781fe9;stroke:#781fe9;stroke-width:2}#spCurrentDay{font-size:120%;line-height:40px;padding-left:10px}.smallClose{color:grey;font-size:140%;float:right;margin-right:10px;cursor:pointer}.sign-history-body{width:100%;height:100%;text-align:center;vertical-align:middle;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.33)}.sign-history-bodymain{border:3px #33b23f solid;border-radius:5px;background-color:#fff;opacity:1}.sign-history-head{margin-top:25px;color:#666;text-align:center;font-size:14px}.sign-history-head li{float:left;width:25%}.sign-history-head li h4{color:#33b23f;font-size:40px;line-height:50px}.sign-history-table{overflow:hidden;border-radius:5px 5px 0 0}.sign-history-table table{width:100%;color:#666;text-align:center;font-size:1pc;border-spacing:0}.sign-history-table table th{width:33.3%;background-color:#f2f2f2;text-align:center;line-height:40px}.sign-history-table td{width:33.3%;border-bottom:1px #e5e5e5 dashed;line-height:34px}tbody{margin-top:10px}img{display:block}#divmain{position:relative;width:600px;margin:48px auto 24px auto}.eveTitle{width:542px;margin:10px auto}.eveRule{overflow:hidden}.eveRule a{float:right;color:white;font-size:22px;height:32px;line-height:32px;opacity:.8}.eveRule a img,.eveRule a span{float:right}.eveRule a img{width:32px;vertical-align:middle;margin-right:8px}.eve{color:white;font-size:32px;text-align:center;font-weight:bold;margin:28px 0 24px 0}table{font-size:24px}.mainWrap{width:100%;height:300px;border-radius:4px;padding:20px;box-sizing:border-box;margin:auto;background:white;-o-background-size:contain;background-size:contain;color:#781fe9}.mainWrap p{text-align:center;font-size:36px;font-weight:bold;padding:44px 0 4px}.mainTitle{overflow:hidden;padding-bottom:22px;border-bottom:1px solid #781fe9}.mainTitle div{font-size:24px;float:left;width:50%;-moz-box-sizing:border-box;box-sizing:border-box;text-indent:1.3em}.main{margin:16px 10px 10px 10px;height:174px;position:relative;overflow:hidden;border-left:4px solid #781fe9;box-sizing:border-box}.mainTitle,.main{-moz-box-sizing:border-box;box-sizing:border-box;font-weight:bold}.main ul{position:absolute;left:0;top:0;width:100%}.main li{overflow:hidden;padding:0 0 0 12px;-moz-box-sizing:border-box;box-sizing:border-box;line-height:44px}.main li>div{float:left;font-size:24px}.main_time{width:55%}.main_money{width:45%;-font-family:'YourWebFontName'}.main_phone{width:138px}.main_nickname{width:110px}.main_nickname img{margin-right:6px;width:30px;height:30px;border-radius:50%;vertical-align:middle;display:inline-block}.evelogo{width:176px;margin:12px auto 0 auto}#btnSign,.receive{width:400px;padding:26px 0;background-color:#fd0;border-radius:4px;font-weight:bold;font-size:28px;color:#410a7f}.receive{margin:24px 100px}.bgColor{background-color:#f4ebff}.dialog,.dialogIpt{position:fixed;z-index:99;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.3);color:#333;display:none}.dialog>div,.dialogIpt>div{background:white;z-index:100;position:absolute;width:480px;left:50%;top:50%;transform:translate(-50%,-50%);padding:24px;box-sizing:border-box;border-radius:4px;text-align:center;font-size:28px}.dialog img,.dialogIpt img{float:right;width:24px}.dialog span,.dialogIpt span{font-weight:bold;margin-top:24px;display:inline-block}.dialog p{font-size:24px;margin:30px 0 46px 0}
.dialogIpt p:nth-of-type(2){font-size:24px}.close,.sure{font-weight:bold;width:400px;padding:26px 0;margin:0 auto 16px auto;background-color:#fd0;border-radius:4px}button,input{outline:0;-webkit-tap-highlight-color:transparent;border:0}#dialogIpt{display:block}.price{font-size:72px;margin:48px 0;font-weight:bold}input{width:400px;height:80px;line-height:80px;background-color:#f4f4f4;border-radius:4px;text-align:center;font-size:28px;margin:22px 0 48px 0}
</style>
</head>
<body>
<div id="divmain">
<div class="dialog">
<div>
<img src="../images/eveclose.png" alt="">
<span>参与抽奖成功！</span>
<p>0点打开本页面即可查询获奖情况</p>
<div class="close">好的</div>
</div>
</div>
<div class="dialogIpt">
<div>
<img src="../images/eveclose.png" alt="">
<span>恭喜你获得</span>
<p class="price"></p>
<p>填写支付宝账户即可领取奖励</p>
<input type="text" name="" id="">
<div class="sure">确认提交</div>
</div>
</div>
<div class="eveRule">
<a href="../views/eve_rule.html"><span>活动规则</span><img src="../images/everule.png" alt=""></a>
</div>
<img class="eveTitle" src="../images/evetitle.png" alt="">
<div class="eve">· 十一月签到抽奖 ·</div>
<!--签到日历-->
<div class="sign-cand">
<!-- <div>
<table style="width:100%;">
<tbody>
<tr>
<td style="text-align:left;"><span class="darkcolor" id="spCurrentDay">2018年10月10日</span></td>
<td style="text-align:right;">
<a class="btns radius5 darkbcolor" id="btnHistory" style="color:white;font-size:120%;margin-right:10px;">我的签到</a>
</td>
</tr>
</tbody>
</table>
</div> -->
<div class="tbDiv">
<table id="tblSign" class="radius5">
<thead>
<tr class="darkcolor trh">
<th id="th0">Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody id="signTable">
<tr class="darkcolor trb">
<!-- <td>
<div>1</div>
</td>
<td>
<div><span>2</span></div>
</td>
<td>
<div><span>3</span></div>
</td>
<td>
<div>
<span>4</span>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="sign_pin svg-triangle ">
<polygon points="0,0 35,0 0,35" /></svg>
</div>
</td>
<td>
<div><span>5</span></div>
</td>
<td>
<div><span>6</span></div>
</td>
<td>
<div><span>7</span></div>
</td> -->
</tr>
</tbody>
</table>
</div>
</div>
<!--签到-->
<div style="width:100%;">
<div style="width:100%;text-align:center;vertical-align:middle;">
<div style="margin-top:20px;">
<div class="circle" style="margin: 0 auto;">
<button class="btns radius5 darkcolor" id="btnSign">签到</button>
<!-- <a class="btns radius5 darkcolor" style="font-weight:bold;font-size:28px;color: #410a7f;" id="btnSign">签到参与抽奖</a> -->
</div>
</div>
<div style="padding:5px 0 10px 0;display: none;"><span style="color:white;">已经连续签到 <strong id="spSignDays">3</strong> 天</span></div>
</div>
</div>
<!-- 中奖公示 -->
<div class="eve">· 昨日中奖公示 ·</div>
<div class="mainWrap">
<div class="mainTitle">
<div class="main_time">用户昵称</div>
<div class="main_money">  中奖金额</div>
</div>
<div class="main">
<ul>
<li>
<div class="main_time">阿尔卑斯流浪汉</div>
<div class="main_money">¥5.00</div>
</li>
<li>
<div class="main_time">BLUEEULB</div>
<div class="main_money">¥8.00</div>
</li>
<li>
<div class="main_time">阿柴也奋斗</div>
<div class="main_money">¥4.00</div>
</li>
</ul>
</div>
</div>
<!-- 领取奖励 -->
<button class="receive">未中奖</button>
<img class="evelogo" src="../images/evelogo.png" alt="">
<!--签到历史-->
<!-- <div id="divHistory" class="sign-layer">
<div class="sign-history-body">
<div class="radius sign-history-bodymain">
<a id="btnPopClose" class="smallClose">×</a>
<ul class="sign-history-head clear">
<li>
<p>连续签到</p>
<h4>5</h4>
</li>
<li>
<p>本月签到</p>
<h4>17</h4>
</li>
<li>
<p>总共签到数</p>
<h4>28</h4>
</li>
<li>
<p>签到累计奖励</p>
<h4>30</h4>
</li>
</ul>
<div class="sign-history-table">
<table>
<thead>
<tr>
<th>签到日期</th>
<th>奖励</th>
<th>说明</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<td>2016-1-6 14:23:45</td>
<td>0.20</td>
<td>连续签到19天奖励</td>
</tr>
<tr>
<td>2016-1-6 14:23:45</td>
<td>0.20</td>
<td>分享奖励</td>
</tr>
<tr>
<td>2016-1-6 14:23:45</td>
<td>0.20</td>
<td>连续签到19天奖励</td>
</tr>
<tr>
<td>2016-1-6 14:23:45</td>
<td>0.20</td>
<td>连续签到19天奖励</td>
</tr>
<tr>
<td>2016-1-6 14:23:45</td>
<td>0.20</td>
<td>连续签到19天奖励</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div> -->
</div>
</body>
</html>
<script src="../scripts/jquery-1.10.2.min.js"></script>
<script src="../scripts/common.js"></script>
<script type="text/javascript">
var userId = getURLParameter('userId')
var now = new Date();
var month = now.getMonth() + 1;
var year = now.getFullYear();
var markTime = year + '-' + month
var dataObjs = null;
var oUl = document.getElementsByTagName("ul")[0];
//Demo 参考了这个例子
//https://frankgu2014.github.io/%E7%AD%BE%E5%88%B0/demo.html
if (userId == -1) {
console.log(userId)
$('.dialog').show()
$('.dialog span').html('未登录账号！')
$('.dialog p').html('登录之后才能参与活动')
$('.dialog .close').html('好的')
//$("#btnSign").attr('disabled', 'disabled');
$("#btnSign").click(function() {
$('.dialog').show()
$('.dialog span').html('未登录账号！')
$('.dialog p').html('登录之后才能参与活动')
$('.dialog .close').html('好的')
})
}
window.onload = function() {
//构建日期数据
var da = buildData();
dataObjs = da;
//控件初始化
initControls(da);
//渲染
renderData(da);
//通过接口获取数据，合并再重新渲染
getData();
}
var u = navigator.userAgent;
var win_h = $(window).height();
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
//监听手机可视高度 ios无resize事件
window.addEventListener('resize', function() {
if ($(window).height() < win_h && isAndroid) {
} else {
}
});
$("input").focus(function() {
var target = this;
setTimeout(function() {
target.scrollIntoViewIfNeeded();
target.scrollIntoView(true);
}, 200);
}).blur(function() {
if (isiOS) {
window.scrollTo(0, document.body.scrollHeight);
}
});
$(".close").on('click', function() {
$('.dialog').hide();
});
$(".dialog img").on('click', function() {
$('.dialog').hide();
});
$(".dialogIpt img").on('click', function() {
$('.dialogIpt').hide();
});
//昨日中奖记录
$.submit({
type: "get",
url: "lottery/record/list?userId=" + userId,
func: function(res) {
var strLi = ''
if (res.data.lotteryRecordVOList.length) {
res.data.lotteryRecordVOList.forEach(ele => {
strLi += '<li><div class="main_time">' + ele.nickname +
'</div><div class="main_money">' + ele.lotteryGoodsName +
'</div></li>'
if (res.data.hitLotteryRecordId) { //是否中奖
id = res.data.hitLotteryRecordId
$('.receive').html('领取奖励')
$('.receive').removeAttr("disabled");
if (res.data.isReceive) {
$('.receive').html('已领取')
$(".receive").attr('disabled', 'disabled');
}
if (ele.id == res.data.hitLotteryRecordId) {
$('.price').html(ele.lotteryGoodsName)
}
$('.receive').click(function() {
$('.dialogIpt').show()
$('.sure').click(function() {
alipayAccount = $('input').val()
if ($('input').val() != '') {
$.submit({
type: "put",
url: "lottery/record",
data: {
id: id,
alipayAccount: alipayAccount
},
func: function(res) {
console.log(res)
$('.dialogIpt').hide()
$('.dialog').show()
$('.dialog span').html('感谢参与！')
$('.dialog p').html('我们会在三个工作日内发放奖励')
$('.dialog .close').html('好的')
$('.receive').html('已领取')
$(".receive").attr('disabled', 'disabled');
}
})
}
})
})
} else {
$('.receive').html('未中奖')
$(".receive").attr('disabled', 'disabled');
}
})
if (res.data.lotteryRecordVOList.length > 1) {
$('.main ul').empty()
if (res.data.lotteryRecordVOList.length > 4) {
setInterval(function() {
moveImg(-$(".main ul").height() + 174, 0)
}, 60)
}
}
$('.main ul').append(strLi)
}
}
})
//控件
function initControls(da) {
$("#spCurrentDay").text(da.current);
//$('td').height($('#th0').width());
$("#btnHistory").on('click', function() {
$('#divHistory').fadeIn();
})
$("#btnPopClose").on('click', function() {
$('#divHistory').fadeOut();
});
//签到
$("#btnSign").on('click', function() {
//if (dataObjs && dataObjs.isSigned) return;
//调用服务器的签到方法
$.submit({
type: "get",
url: "lottery/calendar/signIn/" + userId,
func: function(res) {
$("#btnSign").attr('disabled', 'disabled');
$("#btnSign").html('已签到');
$('.sign-today').addClass('bgColor')
$('.dialog').show()
$('.dialog span').html('参与抽奖成功！')
$('.dialog p').html('0点打开本页面即可查询获奖情况')
$('.close').click(function() {
$('.dialog').hide()
})
$('.dialog img').click(function() {
$('.dialog').hide()
})
}
})
// var btn = $("#btnSign");
// btn.attr('disabled', 'disabled');
// btn.removeClass('actived');
// btn.text('已签到');
//WH.getAjax(baseUrl + 'Sign').done(function (d) {
// if (!d.IsSuccess) {
// Msg.notifyWarn(d.ResultMessage);
// return;
// }
// dataObjs.signToday();
// var btn = $("#btnSign");
// btn.attr('disabled', 'disabled');
// btn.removeClass('actived');
// btn.text('已签到');
//}).fail(ajaxError);
});
}
$('.receive').click(function() {
})
//从服务器获取数据
function getData() {
//是否已经签到，签到日期
var arr = []
$.submit({
type: "post",
url: "lottery/calendar/list",
data: {
userId: userId,
markTime: markTime
},
func: function(res) {
if (res.data.length) {
res.data.forEach(ele => {
arr.push(RiQi(ele))
})
var d = {
IsSigned: true,
SignDays: arr
};
var da = dataObjs;
if (!da) return;
da.isSigned = d.IsSigned;
for (var i = 1; i <= da.days; i++) {
var dx = da.dates[i];
dx.isSigned = d.SignDays.indexOf(dx.num) >= 0;
}
renderData(da);
}
//判断是否签到
if ($('.sign-today').hasClass("bgColor")) {
$("#btnSign").attr('disabled', 'disabled');
$("#btnSign").html('已签到');
} else {
$('#btnSign').html('签到参与抽奖')
}
}
})
}
//生成日期数据
function buildData() {
var da = {
dates: [], //日期数据，从1号开始
current: '', //当前日期
monthFirst: 1, //获取当月的1日等于星期几
month: 0, //当前月份
days: 30, //当前月份共有多少天
day: 0, //今天几号了
isSigned: false, //今天是否已经签到
signLastDays: 3, //连续签到日子
signToday: function() {
this.isSigned = true;
this.dates[this.day].isSigned = true;
},
};
var ds = [];
//初始化日期数据
var dt = new Date();
da.current = dt.getFullYear() + '年' + (dt.getMonth() + 1) + '月' + dt.getDay() + '日'; //dt.ToString('yyyy年M月d日');
da.monthFirst = new Date(dt.getFullYear(), dt.getMonth(), 1).getDay();
da.month = dt.getMonth() + 1;
da.days = new Date(dt.getFullYear(), parseInt(da.month), 0).getDate(); //获取当前月的天数
da.day = dt.getDate();
for (var i = 1; i < da.days + 1; i++) {
var o = {
isSigned: false, //是否签到了
num: i, //日期
isToday: i == da.day, //是否今天
isPass: i < da.day, //时间已过去
};
ds[i] = o;
}
da.dates = ds;
return da;
}
//渲染数据
function renderData(da) {
var signDays = document.getElementById('spSignDays');
signDays.innerText = da.signLastDays;
var root = document.getElementById("signTable");
root.innerHTML = '';
var tr, td;
var st = da.monthFirst;
var dates = da.dates;
var rowcount = 0;
//最多6行
for (var i = 0; i < 42; i++) {
if (i % 7 == 0) {
//如果没有日期了，中断
if (i > (st + da.days))
break;
tr = document.createElement('tr');
tr.className = 'darkcolor trb';
root.appendChild(tr);
rowcount++;
}
//前面或后面的空白
// if (i < st || !dates[i - st + 1]) {
// td = document.createElement('td');
// td.innerHTML = '<div class="sign-blank"><span></span></div>';
// tr.appendChild(td);
// continue;
// }
if (i < st) {
td = document.createElement('td');
td.innerHTML = '<div class="sign-blank"><span>•</span></div>';
tr.appendChild(td);
continue;
}
if (!dates[i - st + 1]) {
td = document.createElement('td');
td.innerHTML = '<div class="sign-blank"><span></span></div>';
tr.appendChild(td);
continue;
}
//填充数字部分
var d = dates[i - st + 1];
td = document.createElement('td');
var tdcss = '';
if (d.isToday)
tdcss = 'sign-today';
else if (d.isPass)
tdcss = 'sign-pass';
else
tdcss = 'sign-future';
if (d.isSigned) { //已经签到
tdcss = 'sign-signed ' + tdcss;
td.innerHTML = '<div class="' + tdcss + ' bgColor" style="border: 4px solid #f4ebff"><span>' + d.num + '</span></div>';
} else {
tdcss = 'sign-unsign ' + tdcss;
td.innerHTML = '<div class="' + tdcss + '"><span>' + d.num + '</span></div>';
}
tr.appendChild(td);
}
//计算是否需要添加最后一行
if ((st + da.days + 1) / 7 > rowcount)
root.appendChild(tr);
}
//运动函数
function moveImg(iTarget, value) {
if (iTarget > value) {
speed = 1
} else {
speed = -1
}
if (oUl.offsetTop === iTarget) {
oUl.style.top = value;
} else {
oUl.style.top = oUl.offsetTop + speed + "px"
}
}
//时间戳取日期
function RiQi(sj) {
var now = new Date(sj * 1000);
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//console.log(year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second);
return date
}
</script>
883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
