这篇文章主要为大家详细介绍了射流研究…实现每日签到功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了射流研究…实现每日签到功能的具体代码，供大家参考，具体内容如下
js:
var calUtil={
getDaysInmonth : function(iMonth，iYear){ //当前年月的总天数
var dPrevDate=new Date(iYear，iMonth，0)；
返回dprevdate。getdate()；
},
bulidCal : function(iYear，iMonth) { //构建当前年月对应的日历
var aMonth=new Array()；
月[0]=新数组(7);
aMonth[1]=新数组(7);
aMonth[2]=新数组(7);
月[3]=新数组(7);
aMonth[4]=新数组(7);
月[5]=新数组(7);
月[6]=新数组(7);
var dCalDate=new Date(iYear，iMonth - 1，1)；
var iDayOfFirst=dcaldate。getday()；
var iDaysInMonth=calutil。getdaysinmonth(iMonth，iYear)；
var iVarDate=1；
var d，w；
在[0][0]='之间日；
"月[0][1]="一；
"月[0][2]="二；
"月[0][3]="三；
"月[0][4]="四；
"月[0][5]="五；
"月[0][6]="六；
for(d=iDayOfFirst；D7；d ) {
aMonth[1][d]=iVarDate；
iVarDate
}
for(w=2；w 7；w ) {
for(d=0；D7；d ) {
if (iVarDate=iDaysInMonth) {
aMonth[w][d]=iVarDate；
iVarDate
}
}
}
返回一个月；
},
ifHasSigned : function(signList，day){
var有符号=false
$.每个（符号列表，函数（索引，项目){
var日期=新日期(项。签字日期)；
if(date.getDate()==day) {
有符号=真；
返回错误的
}
});
已签名的退货；
},
drawCal : function(iYear，iMonth，signList) {
' var currentYearMonth=iYear '年伊蒙思月；
var my month=calutil。bulid cal(iYear，iMonth)；
var html s=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 _ span ' ' currentYearMonth '/div))；
html。push('/div ')；
htmls。push(' div class=' sign ' id=' sign _ cal ' ')；
htmls。push(' table class=' table ' ')；
html。push(' tr ')；
htmls。push(' th ' my month[0][0]'/th ')；
htmls。push(' th ' my month[0][1]'/th ')；
htmls。push(' th ' my month[0][2]'/th ')；
htmls。push(' th ' my month[0][3]'/th ')；
htmls。push(' th ' my month[0][4]'/th ')；
htmls。push(' th ' my month[0][5]'/th ')；
htmls。push(' th ' my month[0][6]'/th ')；
html。push('/tr ')；
var d，w；
for(w=1；w 7；w ) {
html。push(' tr ')；
for(d=0；D7；d ) {
var ifHasSigned=calutil。ifHasSigned(signList，my month[w][d])；
if(ifHasSigned){
htmls.push('td class='on ' '(！isNaN(myMonth[w][d])？我的月份[w][d]:' ')'/TD ')；
}否则{
html。推(' TD '(！isNaN(myMonth[w][d])？我的月份[w][d]:' ')'/TD ')；
}
}
html。push('/tr ')；
}
html。推('/table ')；
html。push('/div ')；
html。push('/div ')；
返回html。join(" ")；
}
};
页面效果代码：
style type='text/css '
@媒体屏幕和（最小宽度：1024px) {。富媒体{
宽度：500像素
左边距：自动；
右边距：自动；
填充：20px
}
}
/风格
/头
body style=' background-color:# fff；'
div class='富媒体'
div id='页面内容'
div style=' text-align:center；背景色：# 2FAA00高度：50px下边距：20px '
span style=' cursor:pointer；字体粗细：600;字体大小：20px颜色：# fff高度：50px行高：50px '每日签到/span
输入类型=' hidden ' id=' userId ' value=' $ { user。id } '/
/div
div class='容器流体'
div class=' row-fluid ' id=' calendar '
/div
div id=' BTN div ' style=' display:none；'
div class=" row-fluid text-居中"
' BTN BTN-默认'签到/span
/div
/div
/div
/div
/div
/body
射流研究…调用方法
var str=cal util . draw cal(current . get full year()，current.getMonth() 1，sign list)；
$('#calendar ')。html(str)；
注意：signList是后台查询的入住时间集合。传入js方法时，会判断哪一天已经入住，然后改变入住日的显示效果，如上图！
这个签到页面也适合手机浏览器！
提要：
以在当前时间环境下编写当月日历为例，用最简单的方法实现JavaScript日历，旨在展示JS世界中实用简单的解决思路。
一般来说，网页中的日历不能与表格分开，表格通常用于加载指定月份的日期等信息。所以，要写JS日历，首先必须解决的问题就是表格的行和列。列是固定的，七列，因为一周有七天。行需要动态计算，因为每个月的第一天是一周中的哪一天是一个变量，所以第一天表中的单元格数会相应变化。同时，各月总天数的不一致也会影响各月对行的需求。
一. 表格的行数问题
1.首先获取处理月份的总天数。
JS不提供这个参数，我们需要计算。考虑到闰年问题会影响二月的天数，我们先自己写一个判断闰年的函数：
函数是_闰年{
返回(year0==0？res=(year@0==0？1:0):res=(year%4==0？1:0));
}
然后定义一个包括十二个月在内的一个月的总天数数组：
m_days=new Array(31，28 is_leap(ynow)，31，30，31，31，30，31，30，31，31，30，31，30，31)；
在这个m_days数组中，添加了闰年信息：28 is_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=n1str . getday()；
有了两个已知条件：一个月中的总天数和一周中的第一天，就可以解决表中所需行数的问题：(当月第一天一周中的第一天的值)除以7。表需要整数，所以我们使用Math.ceil来处理它们：
tr _ str=math . ceil((m _ days[mnow]first day)/7)；
表中的tr标签实际上代表了表的行，所以变量tr_str是我们写表的重要依据。
二. 打印日历表格
可以通过嵌套两个for语句来实现：外层的for语句写行，内层的for语句写单元格。
for(I=0；itr _ strI) {//外部for语句-tr标记
document . write(' tr ')；
for(k=0；k7；K) {//inner for语句-td标记
idx=I * 7k；//表格单元格的自然序号
date _ str=idx-first day 1；//计算日期
//这里是处理生效日期代码。
}//for语句内部的结尾
document . write('/tr ')；
}//语句外层的结尾
单元格的自然序号是否代表生效日期很关键，所以必须增加一个过滤机制：只打印生效日期。的生效日期大于0且小于或等于处理月份的总天数。
三. 以下是完整的JS日历代码：
函数是_闰年{
返回(year0==0？res=(year@0==0？1:0):res=(year%4==0？1:0));
}//是闰年吗？
var nstr=new Date()；//当前日期信息
var ynow=nstr . get full year()；//年份
var mnow=nstr . getmonth()；//月份
var dnow=nstr . getdate()；//今天的日期
var n1str=新日期(ynow，mnow，1)；//当月第一天的日期信息
var first day=n1str . getday()；//这个月的第一天是星期几？
var m_days=new Array(31，28 is_leap(ynow)，31，30，31，30，31，31，30，31，30，31，30，31)；//每个月的总天数
var tr _ str=math . ceil((m _ days[mnow]first day)/7)；//表格所需的行数
//打印表单的第一行(标有星期)
document . write(' table border=' 1 ' align=' center ' width=' 220 ' cellspacing=' 0 ' trtdalign=' center ' day/tdtd align=' center ' one/tdtdtdtdalign=' center ' two/tdtd align=' center ' this/tdtd align=' center ' four/tdtd align=' center ' five/tdtd align=' center ' six/Td/tr))；
for(I=0；itr _ strI) {//表格的行
document . write(' tr ')；
for(k=0；k7；K) {//表格每一行中的单元格
idx=I * 7k；//单元格的自然序号
date _ str=idx-first day 1；//计算日期
(date _ str=0 | | date _ strm _ days[mnow])？date _ str=' nbsp':date _ str=idx-first day 1；//筛选无效日期(小于或等于零且大于一个月的总天数)
//打印日期：今天的背景色是红色。
date_str==dnow？document . write(' TD align=' center ' bgcolor=' red ' ' date _ str '/TD '):document . write(' TD align=' center ' ' date _ str '/TD ')；
}
document . write('/tr ')；//表格行的结尾
}
document . write('/table ')；//表的结尾
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。