js实现每日签到功能

本文实例为大家分享了射流研究…实现每日签到功能的具体代码，供大家参考，具体内容如下

js:

var calUtil={ getDaysInmonth :函数(iMonth，iYear){ //当前年月的总天数var dPrevDate=新日期(iYear，iMonth，0)；返回dprevdate。getdate()；}，bulidCal :函数(iYear，iMonth) { //构建当前年月对应的日历var aMonth=new Array()；aMonth[0]=新数组(7);aMonth[1]=新数组(7);aMonth[2]=新数组(7);aMonth[3]=新数组(7);aMonth[4]=新数组(7);aMonth[5]=新数组(7);aMonth[6]=新数组(7);var dCalDate=新日期(iYear，iMonth - 1，1)；var idayofyrist=DCALDATE。GetDay()；var iDaysInMonth=calutil。getdaysinmonth(iMonth，iYear)；var iVarDate=1；var d，w；' aMonth[0][0]='日；' aMonth[0][1]='一；' aMonth[0][2]='二；' aMonth[0][3]='三；' aMonth[0][4]='四；' aMonth[0][5]='五；' aMonth[0][6]='六；for(d=IDAYofRefist；D7；d){ aMonth[1][d]=iVarDate；(w=2；w 7；w){ for(d=0；D7；d){ if(iVarDate=idaysnmonth){ aMonth[w][d]=iVarDate；iVarDate} } }返回第{ 0 }个，如果已注册：函数(signList，day){ var signed=false；$.每个(签名列表，函数(索引，项目)){ var Date=new Date(项目)。签署日期)；如果(日期。getdate()==day){ signed=true；返回false } })；已签名的退货；}，drawCal :函数(iYear，iMonth，符号列表){ var currentyarmonth=iYear '年' iMonth '月；var myMonth=calutil。bulidcal(iYear，iMonth)；var html s=new Array()；html s . push(' div class=' sign _ main ' id=' sign _ layer ' ')；html s . push(' div class=' sign _ suc _ calendar _ title ' ')；html s . push(' div class=' calendar _ month _ span ' ' current yarmonth '/div ')；html s . push('/div ')；html s . push(' div class=' sign ' id=' sign _ cal ' ')；html s . push(' table class=' table ' ')；html s . push(' tr ')；html s . push(' th ' myMonth[0][0]'/th ')；html s . push(' th ' myMonth[0][1]'/th ')；html s . push(' th ' myMonth[0][2]'/th ')；html s . push(' th ' myMonth[0][3]'/th ')；html s . push(' th ' myMonth[0][4]'/th ')；html s . push(' th ' myMonth[0][5]'/th ')；html s . push(' th ' myMonth[0][6]'/th ')；html s . push('/tr ')；var d，w；for(w=1；w 7；w){ html s . push(' tr ')；for(d=0；D7；d){ var ifHasSigned=calutil。ifHasSigned(签名列表，我的月份[w][d])；if(ifHasSigned){ html s . push(' TD class=' on ')(！isNaN(myMonth[w][d])？myMonth[w][d]: ' ')'/TD ')；} else { htmls.push('td '(！isNaN(myMonth[w][d])？myMonth[w][d]: ' ')'/TD ')；} } html s . push('/tr ')；} html s . push('/table ')；html s . push('/div ')；html s . push('/div ')；返回html s . join(" ")；} };页面效果代码：

style type=' text/CSS ' @ media screen and(最小宽度：1024 px){ .富媒体{ width: 500px左边距左：汽车右边距：自动；padd : 20px } }/style/head body style='底色： # fff'div class=' rich _ media ' div id=' page-content ' div style=' text-align : center；背景-颜色： # 2fa 00高度： 50px边距-底部： 20pxspan style='cursor:指针；字体粗细： 600；font-size : 20pxcolor: # fff高度： 50px线高： 50px每日签到/span输入类型=' hidden ' id=' userId '值=' $ { user。id } '//div class=' container-fluid ' div class=' row-fluid ' id=' calendar '/div div id=' btnDiv ' style=' display : none；div=' row-fluid text-center ' span id=' sing _ for _ number ' class=' BTNBTN-default '签到/span/div/div/div/body js调用方法

var str=calutil . draw cal(current . getfullyear()、current.getMonth() 1、sign list)；$('#calendar ')。html(字符串)；注意：signList是后台查询的签到时间的集合。传入js方法时，会判断是哪天签到的，然后改变签到当天的显示效果，如上图！这个登录页面也适合手机浏览器！

总结：

以在当前时间环境下编写当月日历为例，用最简单的方法实现JavaScript日历，旨在展示JS世界中解决问题的实用简单的方法。

网页中的日历通常与表格分不开，表格通常用于加载指定月份的日期等信息。所以写JS日历，首先要解决的问题就是表的行和列。列是固定的，七列，因为一周有七天。行需要动态计算，因为每个月第一天的星期几是一个变量，所以第一天表格中的单元格数会相应变化。同时，每月总天数的不一致也影响了每月对表行的需求。

一、表格行数

1.首先，获取处理月份的总天数

JS没有提供这个参数，所以我们需要计算一下。考虑到闰年问题会影响2月份的天数，我们先编写一个自制的函数来判断闰年：

函数是_leap(year) { return (year0==0？res=(年份@0==0？1:0):res=(年份%4==0？1:0));}然后定义一个包含十二个月在内的一个月的总天数数组：

m_days=new Array(31，28 is_leap(ynow)，31，30，31，31，30，31，30，31，30，31，30，31，31)；在m_days数组中，闰年的信息已经添加到2月的天数中：28是_leap(ynow)。数组元素从0开始，正好对应JS提供的Date函数提供的getMonth的返回值，即0表示一月，1表示二月，2表示三月，依此类推。

这样，总月数可以得到如下：m_days[x]。其中x是从0到11的自然数。

2.在处理月份的第一天计算星期几

它可以通过使用Date函数的getDay获得，返回值的范围是0到6，其中0表示星期一，1表示星期二，2表示星期三，以此类推。代码如下(假设处理时间为2008年3月):

n1str=新日期(2008，3，1)；first day=n1 str . GetDay()；有了两个已知的条件：一个月的总天数和每月第一天的星期几，就可以解决表所需行数的问题：(当月第一天的星期几的值)除以七。表函数需要整数，所以我们使用Math.ceil来处理：

tr _ str=Math . ceil((m _ days[mnow]first day)/7)；表中的Tr标签实际上代表了表的行，所以变量tr_str是我们写下表的重要依据。

二.打印日历表单

可以通过嵌套两个for语句来实现：外部for语句写行，内部for语句写单元格。

for(I=0；itr _ strI) {//outer for statement-tr标记document . write(' tr ')；for(k=0；k7；K) {//语句的内层-td标记idx=I * 7k；//表单位date_str=idx-firstday 1的自然序号；//计算日期//这里是处理生效日期代码}//语句的内部for结束document . write('/tr ')；outer for语句的结束单元格的自然序号是否表示生效日期很重要，所以必须增加一个过滤机制：只打印生效日期。生效日期大于0且小于或等于处理月份的总天数。

3.以下是完整的JS日历代码：

函数是_leap(年份){ return (year0==0？res=(年份@0==0?1:0):res=(年份%4==0?1:0));} //是否为闰年var nstr=新日期();//当前日期资讯var ynow=nstr。GetFullyear()；//年份var mnow=nstr。GetMount()；//月份var dnow=nstr。GetDate()；//今日日期var n1str=新日期(ynow，mnow，1)；//当月第一天日期资讯var第一天=n1 str。GetDay()；//当月第一天星期几var m_days=new Array(31，28 is_leap(ynow)，31，30，31，30，31，31，30，31，30，30，30，31，30，30，31)；//各月份的总天数var tr _ str=数学。ceil((m _ days[mnow]第一天)/7)；//表格所需要行数//打印表格第一行（有星期标志)document.write('表格边框=' 1 ' align=' center ' width=' 220 '单元格间距=' 0 ' trtd align=' center '日/tdtd align="中心"一/tdtd align="中心"二/tdtd align="中心"三/tdtd align="中心"四/tdtd align="中心"五/tdtd align="中心"六/TD/tr ')；for(I=0；itr _ stri ) { //表格的行文件。write(' tr ')；for(k=0；k7；k ) { //表格每行的单元格idx=I * 7k//单元格自然序列号date _ str=idx-第一天1;//计算日期(date _ str=0 | | date _ strm _ days[mnow])？date _ str=' : date _ str=idx-第一天1;//过滤无效日期（小于等于零的、大于月总天数的) //打印日期：今天底色为红date_str==dnow？文件。编写(' TD align=' center ' bgcolor=' red ' ' date _ str '/TD '):文档。写(' TD align=' center ' ' date _ str '/TD ')；}文档。write('/tr ')；//表格的行结束}文档。write('/table ')；//表格结束以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。