14个超酷的js显示时间效果,一定有你想要的。
正常时间显示
运行效果图：
<title>正常显示的时钟 - 中国asp之家 - http://www.aspxhome.com</title> <SCRIPT language=javascript> <!-- function Year_Month(){ var now = new Date(); var yy = now.getYear(); var mm = now.getMonth(); var mmm=new Array(); mmm[0]="January"; mmm[1]="February "; mmm[2]="March"; mmm[3]="April"; mmm[4]="May"; mmm[5]="June"; mmm[6]="July"; mmm[7]="August"; mmm[8]="September"; mmm[9]="October"; mmm[10]="November"; mmm[11]="December"; mm=mmm[mm]; return(mm ); } function thisYear(){ var now = new Date(); var yy = now.getYear(); return(yy ); } function Date_of_Today(){ var now = new Date(); return(now.getDate() ); } 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 =thisYear(); document.all.calendarClock4.innerHTML = CurentTime(); } document.write('<font id="calendarClock1" > </font> '); document.write('<font id="calendarClock2" > </font>,'); document.write('<font id="calendarClock3" > </font> '); document.write('<font id="calendarClock4" > </font>'); setInterval('refreshCalendarClock()',1000); //--> </SCRIPT> <script language="javascript" src="./script/date.js"></script> [提示：你可先修改部分代码，再按运行]
固定位置的时钟
<title>固定位置显示的时钟 - 中国asp之家 - http://www.aspxhome.com</title> <SCRIPT language=javascript> <!-- function show5() {if(!document.layers&&!document.all) return var Digital=new Date() var hours=Digital.getHours() var minutes=Digital.getMinutes() var seconds=Digital.getSeconds() var dn="AM" if(hours>12){dn="PM" hours=hours-12 }if(hours==0) hours=12 if(minutes<=9) minutes="0"+minutes if(seconds<=9) seconds="0"+seconds //change font size here to your desire myclock="<font color=blue>现在时间:"+hours+":"+minutes+":"+seconds+" "+dn+"</font>"; if(document.layers){ document.layers.liveclock.document.write(myclock) document.layers.liveclock.document.close() }else if(document.all) liveclock.innerHTML=myclock setTimeout("show5()",1000) } //--> </SCRIPT> <body onLoad=show5()> <span id=liveclock style=position:absolute;left:250px;top:122px;; width: 109px; height: 15px> </span> [提示：你可先修改部分代码，再按运行]
背景时钟
<head> <title>背景时钟 - 中国asp之家 - http://www.aspxhome.com</title> <script language=javaScript> <!--// function clockon() { thistime= new Date() var hours=thistime.getHours() var minutes=thistime.getMinutes() var seconds=thistime.getSeconds() if (eval(hours) <10) {hours="0"+hours} if (eval(minutes) < 10) {minutes="0"+minutes} if (seconds < 10) {seconds="0"+seconds} thistime = hours+":"+minutes+":"+seconds if(document.all) { bgclocknoshade.innerHTML=thistime bgclockshade.innerHTML=thistime } if(document.layers) { document.bgclockshade.document.write('<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Verdana;color:FFAAAAA;font-size:120px;top:10px;left:152px">'+thistime+'</div>') document.bgclocknoshade.document.write('<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Verdana;color:DDDDDD;font-size:120px;top:10px;left:150px">'+thistime+'</div>') document.close() } var timer=setTimeout("clockon()",200) } //--> </script> </head> <body bgcolor="#ffffff" onLoad="clockon()"> <div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Arial;color:333333;font-size:120px;top:102px;left:152px"></div> <div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Arial;color:0099ff;font-size:120px;top:100px;left:150px"></div> <div id="mainbody" style="position:absolute; visibility:visible"> </div> </body> [提示：你可先修改部分代码，再按运行]
请稍等，评论加载中...