每日签到html手机版,每日签到js

// 每日签到

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("

");

htmls.push("

");

htmls.push("

htmls.push("

htmls.push("

htmls.push("

");

htmls.push("

");

htmls.push("

");

htmls.push("

");

htmls.push("

" + myMonth[0][0] + "

");

htmls.push("

" + myMonth[0][1] + "

");

htmls.push("

" + myMonth[0][2] + "

");

htmls.push("

" + myMonth[0][3] + "

");

htmls.push("

" + myMonth[0][4] + "

");

htmls.push("

" + myMonth[0][5] + "

");

htmls.push("

" + myMonth[0][6] + "

");

htmls.push("

");

var d, w;

for (w = 1; w < 7; w++) {

if(w==1){

htmls.push("

");

}else{

htmls.push("

");

}

for (d = 0; d < 7; d++) {

var ifHasSigned = this.ifHasSigned(signList, myMonth[w][d]);

if (ifHasSigned) {

htmls.push("

" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "

");

} else {

htmls.push("

" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "

");

}

}

htmls.push("

");

}

htmls.push("

");

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

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

html+='

'+arr[i]+'

'

}

//业务逻辑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+="

"+arr[0]+"

"+arr[1]+"

";

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:

//弹框

提示

恭喜签到成功

根据网上大佬写的代码结合实际业务进行二次开发。