每日签到js
2019-12-31 本文已影响0人
多点干货少点废话
// 每日签到
var calUtil = {
//当前日历显示的年份
showYear: 2019,
//当前日历显示的月份
showMonth: 9,
//当前日历显示的天数
showDays: 1,
eventName: "load",
// 保存底部buttom
footTextDiv:null,
//初始化日历
init: function() {
this.setMonthAndDay();
// 获取数据
let signList = this.getData(this.changeUnix(this.getDateDay(this.showYear,this.showMonth)));
this.draw(signList);
this.bindEnvent();
},
draw: function(signList) {
//绑定日历
var str = this.drawCal(this.showYear, this.showMonth, signList);
$("#calendar").html(str);
$("#sign_cal").append(this.footTextDiv)
//绑定日历表头
var calendarName = this.showYear + "年" + this.showMonth + "月";
$(".calendar_month_span").html(calendarName);
},
//绑定事件
bindEnvent: function() {
var _this = this
//绑定上个月事件
$(".calendar_month_prev").click(function() {
_this.eventName = "prev";
_this.init();
});
//绑定下个月事件
$(".calendar_month_next").click(function() {
_this.eventName = "next";
_this.init();
});
$('.day-sign-close').click(function(){
$('.day-sign').hide();
})
},
//获取当前选择的年月
setMonthAndDay: function() {
switch (this.eventName) {
case "load":
var current = new Date();
this.showYear = current.getFullYear();
this.showMonth = current.getMonth() + 1;
break;
case "prev":
var nowMonth = $(".calendar_month_span").html().split("年")[1].split("月")[0];
this.showMonth = parseInt(nowMonth) - 1;
if (this.showMonth == 0) {
this.showMonth = 12;
this.showYear -= 1;
}
break;
case "next":
var nowMonth = $(".calendar_month_span").html().split("年")[1].split("月")[0];
this.showMonth = parseInt(nowMonth) + 1;
if (this.showMonth == 13) {
this.showMonth = 1;
this.showYear += 1;
}
break;
}
},
getDaysInmonth: function(iMonth, iYear) {
var dPrevDate = new Date(iYear, iMonth, 0);
return dPrevDate.getDate();
},
// 本月日期数组
bulidCal: function(iYear, iMonth) {
// 构建本月日期数组
var aMonth = new Array();
aMonth[0] = new Array(7);
aMonth[1] = new Array(7);
aMonth[2] = new Array(7);
aMonth[3] = new Array(7);
aMonth[4] = new Array(7);
aMonth[5] = new Array(7);
aMonth[6] = new Array(7);
// 找到当前月一号
var dCalDate = new Date(iYear, iMonth - 1, 1);
//返回一号是周几
var iDayOfFirst = dCalDate.getDay();
// 这个月有多少天
var iDaysInMonth = this.getDaysInmonth(iMonth, iYear);
// 实例化本月日期
var iVarDate = 1;
// 定义d：天 w：周
var d, w;
aMonth[0][0] = "S";
aMonth[0][1] = "M";
aMonth[0][2] = "T";
aMonth[0][3] = "W";
aMonth[0][4] = "T";
aMonth[0][5] = "F";
aMonth[0][6] = "S";
// 找到当月第一周第一天 开始排列
for (d = iDayOfFirst; d < 7; d++) {
aMonth[1][d] = iVarDate;
iVarDate++;
}
// 第二周开始排列
for (w = 2; w < 7; w++) {
for (d = 0; d < 7; d++) {
if (iVarDate <= iDaysInMonth) {
aMonth[w][d] = iVarDate;
iVarDate++;
}
}
}
return aMonth;
},
// 判断本月有没有签到
ifHasSigned: function(signList, day) {
var signed = false;
$.each(signList, function(index, item) {
if (item.signDay == day) {
signed = true;
return false;
}
});
return signed;
},
// 构建签到日历
drawCal: function(iYear, iMonth, signList) {
var myMonth = this.bulidCal(iYear, iMonth);
var htmls = new Array();
htmls.push("<div class='sign_main' id='sign_layer'>");
htmls.push("<div class='sign_succ_calendar_title'>");
htmls.push("<div class='calendar_month_prev'></div>");
htmls.push("<div class='calendar_month_span'></div>");
htmls.push("<div class='calendar_month_next'></div>");
htmls.push("</div>");
htmls.push("<div class='sign' id='sign_cal'>");
htmls.push("<div>");
htmls.push("<div class='sign-date-top'>");
htmls.push("<div>" + myMonth[0][0] + "</div>");
htmls.push("<div>" + myMonth[0][1] + "</div>");
htmls.push("<div>" + myMonth[0][2] + "</div>");
htmls.push("<div>" + myMonth[0][3] + "</div>");
htmls.push("<div>" + myMonth[0][4] + "</div>");
htmls.push("<div>" + myMonth[0][5] + "</div>");
htmls.push("<div>" + myMonth[0][6] + "</div>");
htmls.push("</div>");
var d, w;
for (w = 1; w < 7; w++) {
if(w==1){
htmls.push("<div class='sign-date-item' style='padding-top:10px'>");
}else{
htmls.push("<div class='sign-date-item'>");
}
for (d = 0; d < 7; d++) {
var ifHasSigned = this.ifHasSigned(signList, myMonth[w][d]);
if (ifHasSigned) {
htmls.push("<div class='sign-on-check'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</div>");
} else {
htmls.push("<div>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</div>");
}
}
htmls.push("</div>");
}
htmls.push("</div>");
return htmls.join('');
},
changeUnix: function(time) {
var date = new Date(time);
return date.getTime()
},
getDateDay: function(years,month){
var str = years +"-"+(month<10?'0'+month:month)+'-01 00:00:00';
return str
},
getData: function(data){
// 获取签到的日期
var list = [];
$.ajax({
url: '获取签到的日期',
dataType: 'json',
type: "GET",
data:{
time:data
},
async:false,
success: function(res) {
if (res.code == '0000') {
if(res.data.length == 0){
list = []
}else{
for(let i =0;i<res.data.length;i++){
let obj = {
"signDay": res.data[i]
}
list.push(obj)
}
}
}else{
list = []
}
}
})
return list
},
signIn:function(){
var _this = this;
$.ajax({
url: '/confirmRights/addFreeNumber',
dataType: 'json',
type: "GET",
async:false,
success: function(res) {
if (res.code == '0000') {
let arr = res.msg.split('，')
let html = '';
for(let i =0;i<arr.length;i++){
html+='<p>'+arr[i]+'</p>'
}
//业务逻辑s
$('.top-sign-btn').addClass('top-sign-on');
$('.top-sign-btn').removeClass('top-sign-in');
$('.sign-modal').show();
$('.sign-modal-con').empty();
$('.sign-modal-con').html(html);
_this.modalEventClose()
//业务逻辑e
}else{
$('.sign-modal').hide();
}
}
})
},
isCheckIn:()=>{
$.ajax({
url: '这个是判断当天有没有签到（业务逻辑可以不需要）',
dataType: 'json',
type: "POST",
async:false,
success: function(res) {
if (res.code == '0000') {
if(res.data.isCheckIn == 1){
$('.top-sign-btn').addClass('top-sign-on')
$('.top-sign-btn').removeClass('top-sign-in')
}else{
$('.top-sign-btn').removeClass('top-sign-on')
$('.top-sign-btn').addClass('top-sign-in')
}
}else{
}
}
})
},
getContSignDay:()=>{
var _this = this;
let text="";
$.ajax({
url: '获取本月哪日签到过',
dataType: 'json',
type: "GET",
async:false,
success: function(res) {
if (res.code == '0000') {
let arr = res.msg.split('，')
text+="<div class='day-sign-btn'>"+arr[0]+"</div><div class='day-sign-p'>"+arr[1]+"</div></div></div>";
calUtil.footTextDiv = text;
console.log(_this)
}else{
}
}
})
},
modalEventClose:()=>{
$('.sign-modal-close').on('click',()=>{
$('.sign-modal').hide();
})
$('.sign-modal-btn').on('click',()=>{
$('.sign-modal').hide();
})
}
};
// 判断是否签到
calUtil.isCheckIn();
// 查看签到/立即签到
$('.top-sign-btn').on('click',function(){
calUtil.eventName = "load";
//业务逻辑
//calUtil.signIn();
//业务逻辑
//calUtil.getContSignDay();
calUtil.init();
$('.day-sign').show();
})
效果图：
image.png
image.png
style:
.top-sign {
display: block;
width: 1170px;
height: 88px;
position: relative;
background: url('/resources/author/authorization/img/sign-bg.png');
background-size: 1170px 88px;
background-repeat: no-repeat;
}
.top-sign-btn{
display: block;
width: 240px;
height: 88px;
position: absolute;
background-size: 240px 88px;
background-repeat: no-repeat;
right: 167px;
cursor: pointer;
}
.top-sign-in{
background-image: url('/resources/author/authorization/img/sign-btn-now.png');
}
.top-sign-on{
background-image: url('/resources/author/authorization/img/sign-btn-on.png');
}
.day-sign{
display: none;
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.3);
top: 0;
left: 0;
z-index: 1000;
}
.sign-modal{
display: none;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
position: fixed;
top: 0;
left: 0;
z-index: 1500;
}
.sign-modal-center{
width: 320px;
height: auto;
position: absolute;
top: 40%;
left: 50%;
margin-left: -160px;
margin-top: -101px;
background: #fff;
border-radius: 6px;
padding: 0 24px;
}
.sign-modal-top{
height: 46px;
width: 100%;
position: relative;
line-height: 46px;
color: #333333;
font-size:16px;
font-family:Source Han Sans CN;
font-weight:bold;
}
.sign-modal-top span{
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
top: 16px;
right: 1px;
background: url('/resources/author/authorization/img/signmodalclose.png');
background-size: 16px 16px;
background-repeat: no-repeat;
cursor: pointer;
}
.sign-modal-con {
padding-top: 20px;
text-align: center;
}
.sign-modal-btn{
width: 214px;
height: 36px;
color: #fff;
background: #3999D8;
line-height: 36px;
margin: 24px auto;
border:1px solid rgba(227,229,232,1);
border-radius:3px;
text-align: center;
cursor: pointer;
}
.day-sign-outer{
width: 287px;
height: auto;
position: relative;
top: 25%;
margin-left: -143.5px;
left: 50%;
background: #fff;
border-radius:6px;
box-shadow:0px 2px 7px 0px rgba(102,102,102,0.22);
overflow: hidden;
}
.day-sign-title{
width: 100%;
height: 42px;
color: #fff;
text-align: center;
background: #6699FF;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.sign-on-check{
width: 25px;
height: 25px;
background: url('/resources/author/authorization/img/signcheck.png');
background-size: 25px 25px;
background-repeat: no-repeat;
}
.sign_main{
width: 100%;
height: auto;
overflow: hidden;
}
.sign_succ_calendar_title{
width: 100%;
height: 42px;
color: #fff;
text-align: center;
background: #6699FF;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding-top: 14px;
}
.calendar_month_next{
display: inline-block;
width: 8px;
height: 14px;
background: url('/resources/author/authorization/img/sign-right.png');
background-size:8px 14px;
background-repeat: no-repeat;
margin-left: 10px;
vertical-align: top;
cursor: pointer;
}
.calendar_month_prev{
display: inline-block;
width: 8px;
height: 14px;
background: url('/resources/author/authorization/img/sign-left.png');
background-size:8px 14px;
background-repeat: no-repeat;
margin-right: 10px;
vertical-align: top;
cursor: pointer;
}
.calendar_month_span{
width: 115px;
height: 14px;
display: inline-block;
font-size: 14px;
line-height: 14px;
vertical-align: top;
}
.sign{
/* padding: 0 20px; */
}
.sign-date-top{
display: inline-block;
width: 100%;
height: 38px;
border-bottom: 1px solid #369ED8;
padding: 0 20px;
}
.sign-date-top div{
display: inline-block;
width: 25px;
text-align: center;
line-height: 38px;
margin: 0 5px;
color: #333333;
}
.sign-date-item{
display: inline-block;
width: 100%;
height: auto;
padding: 0 20px;
float: left;
}
.sign-date-item div{
display: inline-block;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
margin:2px 5px;
float: left;
color: #333333;
}
.sign-date-item div:first-child{
color: #369ED7;
}
.sign-date-item div:last-child{
color: #369ED7;
}
.day-sign-btn{
width: 178px;
height: 32px;
float: left;
margin-left: 55px;
background:linear-gradient(90deg,rgba(253,200,86,1) 0%,rgba(255,162,86,1) 100%);
box-shadow:0px 2px 7px 0px rgba(255,169,99,0.22);
border-radius:16px;
text-align: center;
line-height: 32px;
font-size: 14px;
color: #fff;
}
.day-sign-p{
width: 100%;
text-align: center;
color: #999999;
font-size: 12px;
display: block;
float: left;
line-height: 12px;
margin-top: 12px;
margin-bottom: 21px;
}
.day-sign-close{
width: 14px;
height: 14px;
position: absolute;
top: 14px;
right: 14px;
background: url('');
background-size: 14px 14px;
background-repeat: no-repeat;
cursor: pointer;
}
html:
<div class="top-sign">
<div class="top-sign-btn top-sign-in"></div>
</div>
//弹框
<div class="day-sign">
<div class="day-sign-outer">
<div id="calendar"></div>
<div class="day-sign-close"></div>
</div>
<div class="sign-modal">
<div class="sign-modal-center">
<div class="sign-modal-top">提示<span class="sign-modal-close"></span></div>
<div class="sign-modal-con"></div>
<div class="sign-modal-btn">恭喜签到成功</div>
</div>
</div>
</div>
根据网上大佬写的代码结合实际业务进行二次开发。
