JS实现以日历形式显示当前时间
2013-07-24 10:19
495 查看
效果图:
Show Time
//创建一个数组,用于存放每个月的天数 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(); 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.write("<div id='rili' style='position:absolute;width:140px;left:200px;top:50px;'>") document.write("<TABLE width='217' BORDER='0' CELLSPACING='0' CELLPADDING='2' BGCOLOR='#0080FF'>") document.write("<TR>"); document.write(" <TD> "); document.write(" <table border='0' cellspacing='1' cellpadding='2' bgcolor='Silver'>"); document.write(" <TR><th colspan='7' bgcolor='#C8E3FF'>"); document.writeln(" <FONT STYLE='font-size:9pt;Color:#330099'>" + "公元 " + now.getYear() + "年" + monthNames[now.getMonth()] + " " + now.getDate() + "日 " + dayNames[now.getDay()] + "</FONT>"); document.writeln(" </TH></TR><TR><TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>日</FONT></TH>"); document.writeln(" <th bgcolor='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>一</FONT></TH>"); document.writeln(" <TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>二</FONT></TH>"); document.writeln(" <TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>三</FONT></TH>"); document.writeln(" <TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>四</FONT></TH>"); document.writeln(" <TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>五</FONT></TH>"); document.writeln(" <TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>六</FONT></TH>"); document.writeln(" </TR><TR>"); column = 0; for (i=0; i<startDay; i++) { document.writeln("\n<TD><FONT STYLE='font-size:9pt'> </FONT></TD>"); column++; } for (i=1; i<=nDays; i++) { if (i == thisDay) { document.writeln("</TD><TD ALIGN='CENTER' BGCOLOR='#FF8040'><FONT STYLE='font-size:9pt;Color:#ffffff'><B>") } else { document.writeln("</TD><TD BGCOLOR='#FFFFFF' ALIGN='CENTER'><FONT STYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#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:9pt;Color:#ffffff'>") document.writeln("现在时间:<INPUT TYPE='Text' NAME='face' ALIGN='TOP'></FONT></FORM></TD></TR></TABLE>") document.writeln("</TD></TR></TABLE></div>"); } 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(); }
Show Time
<html> <script language="JavaScript" type="text/javascript" src="time.js"> </script> <body bgcolor="#FFFFFF" onLoad="startclock(); timerONE=window.setTimeout" text="#000000"> <script language="JavaScript" type="text/javascript"> calendar(); </script> </body> </html>
相关文章推荐
- JS实现动态显示当前时间(12/24小时制)
- [自用门户]需求:公告发售结束时间大于当前时间时候,则在类加on,显示new图标(主要看js实现方法)
- 用js实现页面显示当前日期和时间的代码
- 用JS实现显示当前时间(实时变化)
- 实现页面实时显示当前时间 js
- JS实现动态显示当前时间
- 用js实现倒计时和在页面显示当前时间
- js实现年月日 当前时间的显示
- JS实现网页标题栏显示当前时间和日期的完整代码
- JS实现动态显示当前时间
- 用JS实现显示当前时间(实时变化)
- js实现当前时间显示
- 使用js实现显示系统当前时间并实现倒计时功能并触发模态框(遮罩)功能
- 一个日历形式显示的当前时间
- JS实现动态显示当前时间(12/24小时制)(转载Mr.Think)
- JS实现HTML页面中动态显示当前时间完整示例
- 用js实现页面显示当前日期和时间的代码
- JS实现网页标题栏显示当前时间和日期的完整代码
- JS实现显示当前时间,精确到秒
- JS两种方法实现当前时间显示