html怎么写这个日历

2023-03-03 22:27:01html-css012

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>

下面代码可以实现你要的功能，如下。至于你看不到它的真实的源代码，它可能通过程序动态加载，或者是js调用。你看到的，仅仅是静态的html代码而已！

<html>

<head>

<title>单行带农历的日期时间代码</title>

</head>

<body>

<!--

function CalConv()

{

FIRSTYEAR = 1998

LASTYEAR = 2031

today = new Date()

SolarYear = today.getFullYear()

SolarMonth = today.getMonth() + 1

SolarDate = today.getDate()

Weekday = today.getDay()

LunarCal = [

new tagLunarCal( 27, 5, 3, 43, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 0, 1 ),

new tagLunarCal( 46, 0, 4, 48, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1 ),

new tagLunarCal( 35, 0, 5, 53, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1 ),

new tagLunarCal( 23, 4, 0, 59, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1 ),

new tagLunarCal( 42, 0, 1, 4, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1 ),

new tagLunarCal( 31, 0, 2, 9, 1, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0 ),

new tagLunarCal( 21, 2, 3, 14, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1 ),

new tagLunarCal( 39, 0, 5, 20, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1 ),

new tagLunarCal( 28, 7, 6, 25, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1 ),

new tagLunarCal( 48, 0, 0, 30, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 1 ),

new tagLunarCal( 37, 0, 1, 35, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1 ),

new tagLunarCal( 25, 5, 3, 41, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1 ),

new tagLunarCal( 44, 0, 4, 46, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1 ),

new tagLunarCal( 33, 0, 5, 51, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1 ),

new tagLunarCal( 22, 4, 6, 56, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0 ),

new tagLunarCal( 40, 0, 1, 2, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0 ),

new tagLunarCal( 30, 9, 2, 7, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1 ),

new tagLunarCal( 49, 0, 3, 12, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1 ),

new tagLunarCal( 38, 0, 4, 17, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0 ),

new tagLunarCal( 27, 6, 6, 23, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1 ),

new tagLunarCal( 46, 0, 0, 28, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 0 ),

new tagLunarCal( 35, 0, 1, 33, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0 ),

new tagLunarCal( 24, 4, 2, 38, 0, 1, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1 ),

new tagLunarCal( 42, 0, 4, 44, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1 ),

new tagLunarCal( 31, 0, 5, 49, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0 ),

new tagLunarCal( 21, 2, 6, 54, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1 ),

new tagLunarCal( 40, 0, 0, 59, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1 ),

new tagLunarCal( 28, 6, 2, 5, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0 ),

new tagLunarCal( 47, 0, 3, 10, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1 ),

new tagLunarCal( 36, 0, 4, 15, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1 ),

new tagLunarCal( 25, 5, 5, 20, 1, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0 ),

new tagLunarCal( 43, 0, 0, 26, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1 ),

new tagLunarCal( 32, 0, 1, 31, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0 ),

new tagLunarCal( 22, 3, 2, 36, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0 ) ]

SolarCal = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]

SolarDays = [ 0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334, 365, 396, 0, 31, 60, 91, 121, 152, 182, 213, 244, 274, 305, 335, 366, 397 ]

if ( SolarYear <= FIRSTYEAR || SolarYear >LASTYEAR ) return 1

sm = SolarMonth - 1

if ( sm <0 || sm >11 ) return 2

leap = GetLeap( SolarYear )

if ( sm == 1 )

d = leap + 28

else

d = SolarCal[sm]

if ( SolarDate <1 || SolarDate >d ) return 3

y = SolarYear - FIRSTYEAR

acc = SolarDays[ leap*14 + sm ] + SolarDate

kc = acc + LunarCal[y].BaseKanChih

Kan = kc % 10

Chih = kc % 12

Age = kc % 60

if ( Age <22 )

Age = 22 - Age

else

Age = 82 - Age

if ( acc <= LunarCal[y].BaseDays ) {

y--

LunarYear = SolarYear - 1

leap = GetLeap( LunarYear )

sm += 12

acc = SolarDays[leap*14 + sm] + SolarDate

}

else

LunarYear = SolarYear

l1 = LunarCal[y].BaseDays

for ( i=0i<13i++ ) {

l2 = l1 + LunarCal[y].MonthDays[i] + 29

if ( acc <= l2 ) break

l1 = l2

}

LunarMonth = i + 1

LunarDate = acc - l1

im = LunarCal[y].Intercalation

if ( im != 0 &&LunarMonth >im ) {

LunarMonth--

if ( LunarMonth == im ) LunarMonth = -im

}

if ( LunarMonth >12 ) LunarMonth -= 12

today=new Date()

function initArray(){

this.length=initArray.arguments.length

for(var i=0i<this.lengthi++)

this[i+1]=initArray.arguments[i] }

var d=new initArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六")

document.write("", today.getYear(),"年",today.getMonth()+1,"月",today.getDate(),"日 ",d[today.getDay()+1],"")

months = ["一","二","三","四","五","六","七","八","九","十","十一","十二"]

days = ["初一","初二","初三","初四","初五","初六","初七","初八","初九","初十","十一","十二","十三","十四","十五","十六","十七","十八","十九","二十","廿一","廿二","廿三","廿四","廿五","廿六","廿七","廿八","廿九","三十"]

document.write( " 农历"+months[LunarMonth-1]+"月" + days[LunarDate-1] + "")

return 0

}

function GetLeap( year )

{

if ( year % 400 == 0 )

return 1

else if ( year % 100 == 0 )

return 0

else if ( year % 4 == 0 )

return 1

else