漂亮的js日历代码显示当前时间

发布时间：2018-08-16 20:46 所属栏目：121 来源：站长网

导读：带当前时间显示的js日历，不但有日历选择功能，还可显示当前时间，当然也可将当前时间插入到文本框中，具体的操作还需研究一番。为解决一些网页特效运行后不能显示效果（例如： jQuery 则需要刷新）问题，烈火特别新增网页版演示网页演示：猛击此处运行

　　带当前时间显示的js日历，不但有日历选择功能，还可显示当前时间，当然也可将当前时间插入到文本框中，具体的操作还需研究一番。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

　　网页演示：猛击此处

　　运行演示：

<html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <title>一个很漂亮实用的日历</title> <script language="javascript"> //创建一个数组,用于存放每个月的天数 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:absolute;width:140px;left:300px;top: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: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>"); } </script> <script language="javascript"> 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 time＆#118alue = " " + ((hours >12) ? hours -12 :hours) time＆#118alue += ((minutes < 10) ? ":0" : ":") + minutes time＆#118alue += ((seconds < 10) ? ":0" : ":") + seconds time＆#118alue += (hours >= 12) ? " 下午 " : " 上午 " document.clock.face.＆#118alue = time＆#118alue; timerid = settimeout("showtime()",1000);//设置超时,使时间动态显示 timerrunning = true;} function startclock () { stopclock(); showtime();} </script> </head> <body onload="startclock(); timerone=window.settimeout"> <script language="javascript">  </script> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）

漂亮的js日历代码 显示当前时间

漂亮的js日历代码显示当前时间