html怎么写这个日历

html-css031

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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

<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>

<script>

//判断当前年份是否是闰年(闰年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>

<title>网页上的日期台历</title>

<STYLE>

A.menuitem {

COLOR: menutextTEXT-DECORATION: none

}

A.menuitem:hover {

COLOR: highlighttextBACKGROUND-COLOR: highlight

}

DIV.contextmenu {

BORDER-RIGHT: 2px outsetBORDER-TOP: 2px outsetZ-INDEX: 999VISIBILITY: hiddenBORDER-LEFT: 2px outsetBORDER-BOTTOM: 2px outsetPOSITION: absoluteBACKGROUND-COLOR: buttonface

}

</STYLE>

</head>

<body>

<SCRIPT language=JavaScript>

function Year_Month(){

var now = new Date()

var yy = now.getYear()

var mm = now.getMonth()+1

var cl = '<font color="#0000df">'

if (now.getDay() == 0) cl = '<font color="#c00000">'

if (now.getDay() == 6) cl = '<font color="#00c000">'

return(cl + yy + '年' + mm + '月</font>')}

function Date_of_Today(){

var now = new Date()

var cl = '<font color="#ff0000">'

if (now.getDay() == 0) cl = '<font color="#c00000">'

if (now.getDay() == 6) cl = '<font color="#00c000">'

return(cl + now.getDate() + '</font>')}

function Day_of_Today(){

var day = new Array()

day[0] = "星期日"

day[1] = "星期一"

day[2] = "星期二"

day[3] = "星期三"

day[4] = "星期四"

day[5] = "星期五"

day[6] = "星期六"

var now = new Date()

///

var cl = '<font color="#0000df">'

if (now.getDay() == 0) cl = '<font color="#c00000">'

if (now.getDay() == 6) cl = '<font color="#00c000">'

return(cl + day[now.getDay()] + '</font>')}

function CurentTime(){

var now = new Date()

var hh = now.getHours()

var mm = now.getMinutes()

var ss = now.getTime() % 60000

ss = (ss - (ss % 1000)) / 1000

var clock = hh+':'

if (mm <10) clock += '0'

clock += mm+':'

if (ss <10) clock += '0'

clock += ss

return(clock)}

function refreshCalendarClock(){

document.all.calendarClock1.innerHTML = Year_Month()

document.all.calendarClock2.innerHTML = Date_of_Today()

document.all.calendarClock3.innerHTML = Day_of_Today()

document.all.calendarClock4.innerHTML = CurentTime()}

var webUrl = webUrl

document.write('<table border="0" cellpadding="0" cellspacing="0"><tr><td>')

document.write('<table id="CalendarClockFreeCode" border="0" cellpadding="0" cellspacing="0" width="60" height="70" ')

document.write('style="position:absolutevisibility:hidden" bgcolor="#eeeeee">')

document.write('<tr><td align="center"><font ')

document.write('style="cursor:handcolor:#ff0000font-size:14ptline-height:120%" ')

if (webUrl != 'netflower'){

document.write('</td></tr><tr><td align="center"><font ')

document.write('style="cursor:handcolor:#2000fffont-size:9ptline-height:110%" ')

}

document.write('</td></tr></table>')

document.write('<table border="0" cellpadding="0" cellspacing="0" width="61" bgcolor="#C0C0C0" height="70">')

document.write('<tr><td valign="top" width="100%" height="100%">')

document.write('<table border="1" cellpadding="0" cellspacing="0" width="58" bgcolor="#FEFEEF" height="67">')

document.write('<tr><td align="center" width="100%" height="100%" >')

document.write('<font id="calendarClock1" style="font-size:7ptline-height:120%"></font><br>')

document.write('<font id="calendarClock2" style="color:#ff0000font-family:Arialfont-size:14ptline-height:120%"></font><br>')

document.write('<font id="calendarClock3" style="font-size:9ptline-height:120%"></font><br>')

document.write('<font id="calendarClock4" style="color:#100080font-size:8ptline-height:120%"><b></b></font>')

document.write('</td></tr></table>')

document.write('</td></tr></table>')

document.write('</td></tr></table>')

setInterval('refreshCalendarClock()',1000)

</SCRIPT>

</body>

</html>