html怎么写这个日历_随笔

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

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

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

setInterval('refreshCalendarClock()',1000)

</SCRIPT>

</body>

</html>

<html>

<head>

<title>一个很漂亮实用的日历</title>

//创建一个数组,用于存放每个月的天数

function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11)

{

this[0] = m0

this[1] = m1

this[2] = m2

this[3] = m3

this[4] = m4

this[5] = m5

this[6] = m6

this[7] = m7

this[8] = m8

this[9] = m9

this[10] = m10

this[11] = m11

}

//实现月历

function calendar() {

var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec"

var today = new Date()

var thisDay

var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)

year = today.getYear() +1900

thisDay = today.getDate()

if (((year % 4 == 0) &&(year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29

nDays = monthDays[today.getMonth()]

firstDay = today

firstDay.setDate(1)

testMe = firstDay.getDate()

if (testMe == 2) firstDay.setDate(0)

startDay = firstDay.getDay()

document.write("<div id='rili' style='position:absolutewidth:140pxleft:300pxtop:100px'>")

document.write("<TABLE width='217' BORDER='0' CELLSPACING='0' CELLPADDING='2' BGCOLOR='#0080FF'>")

document.write("<TR><TD><table border='0' cellspacing='1' cellpadding='2' bgcolor='Silver'>")

document.write("<TR><th colspan='7' bgcolor='#C8E3FF'>")

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

var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月")

var now = new Date()

document.writeln("<FONT STYLE='font-size:9ptColor:#330099'>" + "公元 " + now.getYear() + "年" + monthNames[now.getMonth()] + " " + now.getDate() + "日 " + dayNames[now.getDay()] + "</FONT>")

document.writeln("</TH></TR><TR><TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>日</FONT></TH>")

document.writeln("<th bgcolor='#0080FF'><FONT STYLE='font-size:9ptColor:White'>一</FONT></TH>")

document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>二</FONT></TH>")

document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>三</FONT></TH>")

document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>四</FONT></TH>")

document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>五</FONT></TH>")

document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9ptColor:White'>六</FONT></TH>")

document.writeln("</TR><TR>")

column = 0

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

document.writeln("\n<TD><FONT STYLE='font-size:9pt'></FONT></TD>")

column++

}

for (i=1i<=nDaysi++) {

if (i == thisDay) {

document.writeln("</TD><TD ALIGN='CENTER' BGCOLOR='#FF8040'><FONT STYLE='font-size:9ptColor:#ffffff'><B>")

}

else {

document.writeln("</TD><TD BGCOLOR='#FFFFFF' ALIGN='CENTER'><FONT STYLE='font-size:9ptfont-family:Arialfont-weight:boldColor:#330066'>")

}

document.writeln(i)

if (i == thisDay) document.writeln("</FONT></TD>")

column++

if (column == 7) {

document.writeln("<TR>")

column = 0

}

document.writeln("<TR><TD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'>")

document.writeln("<FORM NAME='clock' onSubmit='0'><FONT STYLE='font-size:9ptColor:#ffffff'>")

document.writeln("现在时间:<INPUT TYPE='Text' NAME='face' ALIGN='TOP'></FONT></FORM></TD></TR></TABLE>")

document.writeln("</TD></TR></TABLE></div>")

}

</SCRIPT>

var timerID = null

var timerRunning = false

function stopclock (){

if(timerRunning)

clearTimeout(timerID)

timerRunning = false}

//显示当前时间

function showtime () {

var now = new Date()

var hours = now.getHours()

var minutes = now.getMinutes()

var seconds = now.getSeconds()

var timeValue = " " + ((hours >12) ? hours -12 :hours)

timeValue += ((minutes <10) ? ":0" : ":") + minutes

timeValue += ((seconds <10) ? ":0" : ":") + seconds

timeValue += (hours >= 12) ? " 下午 " : " 上午 "

document.clock.face.value = timeValue

timerID = setTimeout("showtime()",1000)//设置超时,使时间动态显示

timerRunning = true}

function startclock () {

stopclock()

showtime()}

</SCRIPT>

</head>

<!--

calendar()

//-->

</script>

</body>

</html>

<html>

<head>

<title>Cool日历</title>

</head><BODY background="../images/bg.gif">

<!-- Hide this script from old browsers --

function greeting()

{

var today = new Date()

var hrs = today.getHours()

document.writeln("<CENTER>")

document.write("Good ")

if (hrs <6)

document.write("(Early) Morning")

else if (hrs <12)

document.write("Morning")

else if (hrs <= 18)

document.write("Afternoon")

else

document.write("Evening")

document.write("!")

document.write("当前时间是:")

dayStr = today.toLocaleString()

document.write(dayStr)

document.writeln("</CENTER>")

}

function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11)

{

this[0] = m0

this[1] = m1

this[2] = m2

this[3] = m3

this[4] = m4

this[5] = m5

this[6] = m6

this[7] = m7

this[8] = m8

this[9] = m9

this[10] = m10

this[11] = m11

}

function calendar()

{

var today = new Date()

var thisDay

var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30,

31, 30, 31)

year = today.getYear()

if (year<2000)

year=year+1900

thisDay = today.getDate()

if (((year % 4 == 0) &&(year % 100 != 0)) || (year % 400 == 0))

monthDays[1] = 29

nDays = monthDays[today.getMonth()]

firstDay = today

firstDay.setDate(1)// works fine for most systems

testMe = firstDay.getDate()

if (testMe == 2)

firstDay.setDate(0)

startDay = firstDay.getDay()

document.writeln("<CENTER>")

document.write("<TABLE BORDER bgcolor=moccasin>")

document.write("<TR><TH COLSPAN=7>")

document.write(year+'年')

document.write(today.getMonth()+1+'月')

document.write("<TR><TH>日<TH>一<TH>二<TH>三<TH>四<TH>五<TH>六")

document.write("<TR>")

column = 0

for (i=0i<startDayi++)

{

document.write("<TD>")

column++

}

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

{

document.write("<TD>")

if (i == thisDay)

document.write("<FONT COLOR=\"red\">")

document.write(i)

if (i == thisDay)

document.write("</FONT>")

column++

if (column == 7)

{

document.write("<TR>")

column = 0

}

document.write("</TABLE>")

document.writeln("</CENTER>")

}

greeting()

document.write("<br>")

calendar()

document.write("")

// -- End Hiding Here -->

</script>

</body></html>

<html>

<head>

<title>在线记事的日历</title>

</head>

<body>

as is.

var caution = false

function setCookie(name, value, expires, path, domain, secure) {

var curCookie = name + "=" + escape(value) +

((expires) ? "expires=" + expires.toGMTString() : "") +

((path) ? "path=" + path : "") +

((domain) ? "domain=" + domain : "") +

((secure) ? "secure" : "")

if (!caution || (name + "=" + escape(value)).length <= 4000)

document.cookie = curCookie

else

if (confirm("Cookie exceeds 4KB and will be cut!"))

document.cookie = curCookie

}

function getCookie(name) {

var prefix = name + "="

var cookieStartIndex = document.cookie.indexOf(prefix)

if (cookieStartIndex == -1)

return null

var cookieEndIndex = document.cookie.indexOf("", cookieStartIndex + prefix.length)

if (cookieEndIndex == -1)

cookieEndIndex = document.cookie.length

return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex))

}

function deleteCookie(name, path, domain) {

if (getCookie(name)) {

document.cookie = name + "=" +

((path) ? "path=" + path : "") +

((domain) ? "domain=" + domain : "") +

"expires=Thu, 01-Jan-70 00:00:01 GMT"

}

function fixDate(date) {

var base = new Date(0)

var skew = base.getTime()

if (skew >0)

date.setTime(date.getTime() - skew)

}

function initCookie(monthName) {

var text = ""

for (var i = 1i <= 31++i) {

text += "^" + i + "^"

}

var now = new Date()

fixDate(now)

now.setTime(now.getTime() + 1000 * 60 * 60 * 24 * 31)

setCookie(monthName + "Calendar", text, now)

}

function getSpecificReminder(num, monthName) {

var prefix = "^" + num + "^"

var totalCookie = getCookie(monthName + "Calendar")

var startIndex = totalCookie.indexOf(prefix, 0)

var startData = totalCookie.indexOf("^", startIndex + 1) + 1

if (num == 31)

var endData = totalCookie.length

else

var endData = totalCookie.indexOf("^", startData)

return totalCookie.substring(startData, endData)

}

function setSpecificReminder(num, monthName, newValue) {

var prefix = "^" + num + "^"

var totalCookie = getCookie(monthName + "Calendar")

var startIndex = totalCookie.indexOf(prefix, 0)

var startData = totalCookie.indexOf("^", startIndex + 1) + 1

if (num == 31)

var endData = totalCookie.length

else

var endData = totalCookie.indexOf("^", startData)

var now = new Date()

fixDate(now)

now.setTime(now.getTime() + 1000 * 60 * 60 * 24 * 31)

setCookie(monthName + "Calendar", totalCookie.substring(0, startData) + newValue + totalCookie.substring(endData, totalCookie.length), now)

}

function getInput(num, monthName) {

if (!getCookie(monthName + "Calendar"))

initCookie(monthName)

var newValue = prompt("Enter reminder for current date:", getSpecificReminder(num, monthName))

if (newValue)

setSpecificReminder(num, monthName, newValue)

}

function getTime() {

var now = new Date()

var hour = now.getHours()

var minute = now.getMinutes()

now = null

var ampm = ""

if (hour >= 12) {

hour -= 12

ampm = "PM"

} else

ampm = "AM"

hour = (hour == 0) ? 12 : hour

if (minute <10)

minute = "0" + minute

return hour + ":" + minute + " " + ampm

}

function leapYear(year) {

if (year % 4 == 0)

return true

return false

}

function getDays(month, year) {

var ar = new Array(12)

ar[0] = 31

ar[1] = (leapYear(year)) ? 29 : 28 // February

ar[2] = 31

ar[3] = 30

ar[4] = 31

ar[5] = 30

ar[6] = 31

ar[7] = 31

ar[8] = 30

ar[9] = 31

ar[10] = 30

ar[11] = 31

return ar[month]

}

function getMonthName(month) {

var ar = new Array(12)

ar[0] = "一月"

ar[1] = "二月"

ar[2] = "三月"

ar[3] = "四月"

ar[4] = "五月"

ar[5] = "六月"

ar[6] = "七月"

ar[7] = "八月"

ar[8] = "九月"

ar[9] = "十月"

ar[10] = "十一月"

ar[11] = "十二月"

return ar[month]

}

function setCal() {

var now = new Date()

var year = now.getYear()

var month = now.getMonth()

var monthName = getMonthName(month)

var date = now.getDate()

now = null

var firstDayInstance = new Date(year, month, 1)

var firstDay = firstDayInstance.getDay()

firstDayInstance = null

var days = getDays(month, year)

drawCal(firstDay + 1, days, date, monthName, year)

}

function drawCal(firstDay, lastDate, date, monthName, year) {

var headerHeight = 50

var border = 2

var cellspacing = 4

var headerColor = "midnightblue"

var headerSize = "+3"

var colWidth = 60

var dayCellHeight = 25

var dayColor = "darkblue"

var cellHeight = 40

var todayColor = "red"

var timeColor = "purple"

var text = ""

text += '<CENTER>'

text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>'

text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>'

text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>'

text += monthName + ' ' + year

text += '</FONT>'

text += '</TH>'

var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'

openCol += '<FONT COLOR="' + dayColor + '">'

var closeCol = '</FONT></TD>'

var weekDay = new Array(7)

weekDay[0] = "Sun"

weekDay[1] = "Mon"

weekDay[2] = "Tues"

weekDay[3] = "Wed"

weekDay[4] = "Thu"

weekDay[5] = "Fri"

weekDay[6] = "Sat"

text += '<TR ALIGN="center" VALIGN="center">'

for (var dayNum = 0dayNum <7++dayNum) {

text += openCol + weekDay[dayNum] + closeCol

}

text += '</TR>'

var digit = 1

var curCell = 1

for (var row = 1row <= Math.ceil((lastDate + firstDay - 1) / 7)++row) {

text += '<TR ALIGN="right" VALIGN="top">'

for (var col = 1col <= 7++col) {

if (digit >lastDate)

break

if (curCell <firstDay) {

text += '<TD></TD>'

curCell++

} else {

if (digit == date) {

text += '<TD HEIGHT=' + cellHeight + '>'

text += '<FONT COLOR="' + todayColor + '">'

text += '<A HREF="javascript:getInput(' + digit + ', \'' + monthName + '\')" onMouseOver="window.status = \'Store or retrieve data for ' + monthName + ' ' + digit + '\'return true"><FONT COLOR="' + todayColor + '">' + digit + '</FONT></A>'

text += '<BR>'

text += '<FONT COLOR="' + timeColor + '" SIZE=2>'

text += '<CENTER>' + getTime() + '</CENTER>'

text += '</FONT>'

text += '</TD>'

} else

text += '<TD HEIGHT=' + cellHeight + '><A HREF="javascript:getInput(' + digit + ', \'' + monthName + '\')" onMouseOver="window.status = \'Store or retrieve data for ' + monthName + ' ' + digit + '\'return true">' + digit + '</A></TD>'

digit++

}

text += '</TR>'

}

text += '</TABLE>'

text += '</CENTER>'

document.write(text)

}

setCal()

</script>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/zaji/7123511.html

html怎么写这个日历

发表评论

评论列表（0条）