js jq实现日历的签到,类似这种的

2023-04-23 12:27:02JavaScript031

js jq实现日历的签到,类似这种的,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>签到效果实现</title>

$(function(){

//ajax获取日历json数据

var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}]

calUtil.init(signList)

})

</script>

</head>

<body>

</body>

<html>

<title>日期选择 - BY ziyue</title>

/*=======Calendar.js=======By Jiang Hongbin=======*/

var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月")

var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)

var days = new Array("日","一", "二", "三", "四", "五", "六")

var today

document.writeln("<div id='Calendar' style='position:absolutez-index:1visibility: hiddenfilter:\"progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3)\"'></div>")

function getDays(month, year)

{

//下面的这段代码是判断当前是否是闰年的

if (1 == month)

return ((0 == year % 4) &&(0 != (year % 100))) || (0 == year % 400) ? 29 : 28

else

return daysInMonth[month]

}

function getToday()

{

//得到今天的年,月,日

this.now = new Date()

this.year = this.now.getFullYear()

this.month = this.now.getMonth()

this.day = this.now.getDate()

}

function getStringDay(str)

{

//得到输入框的年,月,日

var str=str.split("-")

this.now = new Date(parseFloat(str[0]),parseFloat(str[1])-1,parseFloat(str[2]))

this.year = this.now.getFullYear()

this.month = this.now.getMonth()

this.day = this.now.getDate()

}

function newCalendar() {

var parseYear = parseInt(document.all.Year.options[document.all.Year.selectedIndex].value)

var newCal = new Date(parseYear, document.all.Month.selectedIndex, 1)

var day = -1

var startDay = newCal.getDay()

var daily = 0

if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))

day = today.day

var tableCal = document.all.calendar

var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear())

for (var intWeek = 1intWeek <tableCal.rows.lengthintWeek++)

for (var intDay = 0intDay <tableCal.rows[intWeek].cells.lengthintDay++)

{

var cell = tableCal.rows[intWeek].cells[intDay]

if ((intDay == startDay) &&(0 == daily))

daily = 1

if(day==daily) //今天，调用今天的Class

{

cell.style.background='#6699CC'

cell.style.color='#FFFFFF'

//cell.style.fontWeight='bold'

}

else if(intDay==6) //周六

cell.style.color='green'

else if (intDay==0) //周日

cell.style.color='red'

if ((daily >0) &&(daily <= intDaysInMonth))

{

cell.innerText = daily

daily++

}

else

cell.innerText = ""

}

function GetDate(InputBox)

{

var sDate

//这段代码处理鼠标点击的情况

if (event.srcElement.tagName == "TD")

if (event.srcElement.innerText != "")

{

sDate = document.all.Year.value + "-" + document.all.Month.value + "-" + event.srcElement.innerText

eval("document.all."+InputBox).value=sDate

HiddenCalendar()

}

function HiddenCalendar()

{

//关闭选择窗口

document.all.Calendar.style.visibility='hidden'

}

function ShowCalendar(InputBox)

{

var x,y,intLoop,intWeeks,intDays

var DivContent

var year,month,day

//var o=document.getElementById(InputBox)

var o=InputBox

var oid=o.id

var thisyear//真正的今年年份

if(!oid)oid=o.name

thisyear=new getToday()

thisyear=thisyear.year

today = o.value

if(isDate(today))

today = new getStringDay(today)

else

today = new getToday()

//显示的位置

x=o.offsetLeft

y=o.offsetTop

while(o=o.offsetParent)

{

x+=o.offsetLeft

y+=o.offsetTop

}

document.all.Calendar.style.left=x+2

document.all.Calendar.style.top=y+20

document.all.Calendar.style.visibility="visible"

//下面开始输出日历表格(border-color:#9DBAF7)

DivContent="<table border='0' cellspacing='0' style='border:1px solid #0066FFbackground-color:#EDF2FC'>"

DivContent+="<tr>"

DivContent+="<td style='border-bottom:1px solid #0066FFbackground-color:#C7D8FA'>"

//年

DivContent+="<select name='Year' id='Year' onChange='newCalendar()' style='font-family:Verdanafont-size:12px'>"

for (intLoop = thisyear - 100intLoop <(thisyear + 2)intLoop++)

DivContent+="<option value= " + intLoop + " " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop + "</option>"

DivContent+="</select>"

//月

DivContent+="<select name='Month' id='Month' onChange='newCalendar()' style='font-family:Verdanafont-size:12px'>"

for (intLoop = 0intLoop <months.lengthintLoop++)

DivContent+="<option value= " + (intLoop + 1) + " " + (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop] + "</option>"

DivContent+="</select>"

DivContent+="</td>"

DivContent+="<td style='border-bottom:1px solid #0066FFbackground-color:#C7D8FAfont-weight:boldfont-family:Wingdings 2,Wingdings,Webdingsfont-size:16pxpadding-top:2pxcolor:#4477FFcursor:hand' align='center' title='关闭' onClick='javascript:HiddenCalendar()'>S</td>"

DivContent+="</tr>"

DivContent+="<tr><td align='center' colspan='2'>"

DivContent+="<table id='calendar' border='0' width='100%'>"

//星期

DivContent+="<tr>"

for (intLoop = 0intLoop <days.lengthintLoop++)

DivContent+="<td align='center' style='font-size:12px'>" + days[intLoop] + "</td>"

DivContent+="</tr>"

//天

for (intWeeks = 0intWeeks <6intWeeks++)

{

DivContent+="<tr>"

for (intDays = 0intDays <days.lengthintDays++)

DivContent+="<td onClick='GetDate(\"" + oid + "\")' style='cursor:handborder-right:1px solid #BBBBBBborder-bottom:1px solid #BBBBBBcolor:#215DC6font-family:Verdanafont-size:12px' align='center'></td>"

DivContent+="</tr>"

}

DivContent+="</table></td></tr></table>"

document.all.Calendar.innerHTML=DivContent

newCalendar()

}

function isDate(dateStr)

{

var datePat = /^(\d{4})(\-)(\d{1,2})(\-)(\d{1,2})$/

var matchArray = dateStr.match(datePat)

if (matchArray == null) return false

var month = matchArray[3]