html怎么写这个日历

2023-03-03 23:14:01html-css035

html怎么写这个日历,第1张

<!DOCTYPE html>

<head>

<style>

table {

width: 230px

margin: auto

text-align: center

border: 1px solid darkcyan

border-bottom: 3px double darkcyan

box-shadow: 0 1px 2px darkcyan

}

th,

td {

border: 1px solid darkcyan

}

.today {

color: red

}

</style>

//判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)

function isLeap(year) {

return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0

}

var i, k,

today = new Date(), //获取当前日期

y = today.getFullYear(), //获取日期中的年份

m = today.getMonth(), //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)

d = today.getDate(), //获取日期中的日(方便在建立日期表格时高亮显示当天)

firstday = new Date(y, m, 1), //获取当月的第一天

dayOfWeek = firstday.getDay(), //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)

days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), //创建月份数组

str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7) //确定日期表格所需的行数

document.write("<table cellspacing='0'><tr><td colspan ='7'>" + y + "年" + (m + 1) + "月" + "</td></tr>")

document.write("<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>") //打印表格第一行(显示星期)

for(i = 0 i < str_nums i += 1) { //二维数组创建日期表格

document.write('<tr>')

for(k = 0 k < 7 k++) {

var idx = 7 * i + k //为每个表格创建索引,从0开始

var date = idx - dayOfWeek + 1 //将当月的1号与星期进行匹配

(date <= 0 || date > days_per_month[m]) ? date = ' ': date = idx - dayOfWeek + 1 //索引小于等于0或者大于月份最大值就用空表格代替

date == d ? document.write('<td class="today">' + date + '</td>') : document.write('<td>' + date + '</td>') //高亮显示当天

}

document.write('</tr>')

}

document.write('</table>')

</script>

</head>

<body>

</body>

</html>

<html>

<head>

</head>

Seperator = "-"

var DateStr = ""

// value为指定格式的日期字符串

function SetDateFromCalendar(value)

{

if(top.frames.length>0)

{

top.frames("mainFrame").DateObjCtrl_SetDateValue(value)

}

else

{

parent.DateObjCtrl_SetDateValue(value)

}

DateStr = value

}

// 返回日期字符串

function public_getSelectedDate()

{

return DateStr

}

</script>

var gdCtrl = new Object()

var gcGray = "#808080"

var gcToggle = "#ffff00"

var gcBG = "#cccccc"

var gdCurDate = new Date()

var giYear = gdCurDate.getFullYear()

var giMonth = gdCurDate.getMonth()+1

var giDay = gdCurDate.getDate()

var VicPopCal = new Object()

// 显示日历控件

function fPopCalendar(popCtrl, dateCtrl, popCal){

parent.event.cancelBubble=true

VicPopCal = popCal// 弹出日历控件的ID

gdCtrl = dateCtrl// 得到日期数字的控件ID, popCtrl是指定日期控件出现位置的标识

fSetYearMon(giYear, giMonth)

var point = fGetXY(popCtrl)// 得到popCtrl的坐标

with (VicPopCal.style) {

left = point.x

top = point.y+popCtrl.offsetHeight+1// 设置日历控件的坐标

visibility = 'visible'

}

VicPopCal.focus()

}

// 隐藏日历控件, 设置gdCtrl的值, 单击今天日期后执行该函数

// 直接得到日期字符串

function fSetDate(iYear, iMonth, iDay){

gdCtrl.value = iMonth+"-"+iDay+"-"+iYear//Here, you could modify the locale as you need !!!!

VicPopCal.style.visibility = "hidden"

}

// 单击表格执行此函数

function fSetSelected(aCell){

var iOffset = 0

var iYear = parseInt(tbSelYear.value)

var iMonth = parseInt(tbSelMonth.value)

aCell.bgColor = gcBG

// 此段代码,控制要是点中的不是当月的日期,自动得到前一个月或后一个月

with (aCell.children["cellText"]){

var iDay = parseInt(innerText)

if (color==gcGray)

iOffset = (Victor<10)?-1:1

iMonth += iOffset

if (iMonth<1) {

iYear--

iMonth = 12

}else if (iMonth>12){

iYear++

iMonth = 1

}

// 获得年月日期数

var dateText = parseInt(aCell.innerText)

if(iMonth<10)

iMonth = "0" + iMonth

if(aCell.innerText<10)

dateText = "0" + dateText

// 将年月日组成指定字符串传给回传函数

SetDateFromCalendar(iYear + Seperator + iMonth + Seperator + dateText)

}

// 指定当前object的显示位置

function Point(iX, iY){

this.x = iX

this.y = iY

}

// 建立当月的日期数组

function fBuildCal(iYear, iMonth) { // 传过来的月加了1,表示下一月

var aMonth=new Array()

for(i=1i<7i++)

aMonth[i]=new Array(i)

// 创建当前月第一天日期对象

var dCalDate=new Date(iYear, iMonth-1, 1)

var iDayOfFirst=dCalDate.getDay()//得到该日是星期几

var iDaysInMonth=new Date(iYear, iMonth, 0).getDate()// 得到下一月

var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1

var iDate = 1

var iNext = 1

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

aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++

for (w = 2w <7w++)

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

aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++)

return aMonth

}

// 画出星期title,和显示数据

function fDrawCal(iYear, iMonth, iCellWidth, iDateTextSize) {

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

var styleTD = " bgcolor='"+gcBG+"' width='"+iCellWidth+"' bordercolor='"+gcBG+"' valign='middle' align='center' style='font:bold "+iDateTextSize+" Courier"

with (document) {

write("<tr>")

for(i=0i<7i++)

write("<td "+styleTD+"color:#990099' >" + WeekDay[i] + "</td>")

write("</tr>")

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

write("<tr>")

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

write("<td id=calCell "+styleTD+"cursor:hand' onMouseOver='this.bgColor=gcToggle' onMouseOut='this.bgColor=gcBG' onclick='fSetSelected(this)'>")

write("<font id=cellText Victor='KinLee'></font>")

write("</td>")

}

write("</tr>")

}

// 填入表格日期数据,可用的和不可用的用不同的底色来区分

function fUpdateCal(iYear, iMonth) {

myMonth = fBuildCal(iYear, iMonth)// 初始化当月的日期显示数组

var i = 0

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

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

with (cellText[(7*w)+d]) { // cellText是表格的标识,都叫cellText,用下标来指示

Victor = i++

if (myMonth[w+1][d]<0) {

color = gcGray

innerText = -myMonth[w+1][d]

}else{

color = ((d==0)||(d==6))?"red":"black"// 星期六、日颜色为红色

innerText = myMonth[w+1][d]

}

// 在下拉框中选中当前年和月, 然后更新数据显示

function fSetYearMon(iYear, iMon){

tbSelMonth.options[iMon-1].selected = true

for (i = 0i <tbSelYear.lengthi++)

if (tbSelYear.options[i].value == iYear)

tbSelYear.options[i].selected = true

fUpdateCal(iYear, iMon)

}

// 上一月

function fPrevMonth(){

var iMon = tbSelMonth.value

var iYear = tbSelYear.value

if (--iMon<1) {

iMon = 12

iYear--

}

fSetYearMon(iYear, iMon)

}

// 下一月

function fNextMonth(){

var iMon = tbSelMonth.value

var iYear = tbSelYear.value

if (++iMon>12) {

iMon = 1

iYear++

}

fSetYearMon(iYear, iMon)

}

function fGetXY(aTag){

var oTmp = aTag

var pt = new Point(0,0)

do {

pt.x += oTmp.offsetLeft

pt.y += oTmp.offsetTop

oTmp = oTmp.offsetParent

} while(oTmp.tagName!="BODY")

return pt

}

var gMonths = new Array("01","02","03","04","05","06","07","08","09","10","11","12")

//打印出年月日的显示的表格,之后再填入数字

with (document) {

write("<table id='popTable' border='0' bgcolor='#6699cc'>")

write("<TR>")

write("<td valign='middle' align='center'><input type='button' name='PrevMonth' value='<' style='height:20width:20FONT:16 Fixedsys' onClick='fPrevMonth()'>")

write(" <SELECT name='tbSelYear' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>")

for(i=2000i<3000i++)

write("<OPTION value='"+i+"'>"+i+"</OPTION>")

write("</SELECT>")

write(" <select name='tbSelMonth' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>")

for (i=0i<12i++)

write("<option value='"+(i+1)+"'>"+gMonths[i]+"</option>")

write("</SELECT>")

write(" <input type='button' name='NextMonth' value='>' style='height:20width:20FONT:16 Fixedsys' onclick='fNextMonth()'>")

write("</td>")

write("</TR><TR>")

write("<td align='center'>")

write("<DIV style='background-color:teal'><table width='100%' border='0' cellpadding='2'>")

fDrawCal(giYear, giMonth, 19, 12)

write("</table></DIV>")

write("</td>")

write("</TR><TR><TD align='center'>")

write("<font style='cursor:handfont:12 Fixedsys' onclick='fSetDate(giYear,giMonth,giDay)' onMouseOver='this.style.color=gcToggle' onMouseOut='this.style.color=0'>今天是: "+giYear+"年"+gMonths[giMonth-1]+"月"+giDay+"日"+"</font>")

write("</TD></TR>")write("</TD></TR>")

write("</TABLE>")

}

var today = new Date()

// 用当前的日期更新月历显示

fSetYearMon(today.getFullYear(), today.getMonth() + 1)

// 填入表格日期数据,可用的和不可用的用不同的底色来区分

//fUpdateCal(today.getFullYear(), today.getMonth() + 1)

</script>

</body>

</html>

var show="你日历的代码"