JavaScript JS时钟+日期（实时）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript JS时钟+日期（实时）相关的知识，希望对你有一定的参考价值。
Put the following inside your <head> tags of the page you want the clock+date box to appear on.
<script type="text/javascript">
<!--
// --------- --------- ---------
// Javascript Real-time Clock+Date
// Created By Darksider
// darksider@swedger.com
// http://www.swedger.com
// --------- --------- ---------
// This script is OPEN-SOURCE,
// and as such can be downloaded,
// modified, and re-distributed
// by ANYONE. Though if you do,
// PLEASE LEAVE THIS AND ALL OTHER
// COMMENT BLOCKS INTACT!!
// --------- --------- ---------
function freshtime() {
var timestamp=new Date();
// - - - FIRST SORT THE TIME - - - \\
var hour=timestamp.getHours();// hours passed today(0-23)
var mins=timestamp.getMinutes();// minutes past the hour(0-59)
var secs=timestamp.getSeconds();// seconds past the minute(0-59)
var period; // variable to contain "am/pm" string
if(hour==0) {hour=12;}// turns 0 into 1 (0 is returned for 12 midday and 12 midnight)
if(hour>12) {hour=(hour-12);period="pm";} else {period="am";}// if hour is more than 12, deduct 12 and make the period PM - otherwise make period AM
if(mins<10) {mins="0"+mins;}// add a trailing zero the the minutes variable if the minutes are less than 10
if(secs<10) {secs="0"+secs;}// also add a trailing zero to the seconds variable if seconds < 10
var curTime=hour+":"+mins+":"+secs+" "+period;// build out curTime string with the 4 blocks(hours:minutes:seconds <am/pm>)
// - - - NEXT SORT THE DATE - - - \\
var date=timestamp.getDate();// current date (0-30/31 or 28/29 for February[1])
var month=timestamp.getMonth();// current month (0-11)
var year=timestamp.getFullYear();// full year (4-digits)
date=(date+1); // add 1 to the date, because they start at 0 (1st day)
month=(month+1);// also add 1 because 0 = January
if(date==1||date==21||date==31) {date=date+"st";}else if(date==2||date==22) {date=date+"nd";}else if(date==3||date==23) {date=date+"rd";}else {date=date+"th";}
// - - - MAKE MONTH TEXTUAL - - - \\
if(month==1) {month="January";}else if(month==2) {month="February";}else if(month==3) {month="March";}else if(month==4) {month="April";}
else if(month==5) {month="May";}else if(month==6) {month="June";}else if(month==7) {month="July";}else if(month==8) {month="August";}
else if(month==9) {month="September";}else if(month==10) {month="October";}else if(month==11) {month="November";}else if(month==12) {month="December";}
var curDate=date+" "+month+" "+year;// build out curDate string with the 3 blocks(date/month/year)
// - - - THEN PRINT DATE+TIME - - - \\
document.getElementById("clock").firstChild.nodeValue=curDate+" "+curTime;
}
//-->
</script>
that takes care of the hard part, now you just need to tell your page to continually update your clock(we will add the actual clock after this bit). either replace your first <body> tag with the following, or add the onLoad="" part into your current one:
<body onLoad="freshtime();setInterval('freshtime()',999);">
the script above tells your page to initialize the time when your page is loaded, and refresh the clock with the current time (and date) every 999 milliseconds (.001 ms off of a second - just because i can!).
So all you need now is the clock object for the script to update.
I have already created a nice little rectangle box to contain it using CSS.
For this example though, I will just use a style="" tag.
Copy the following code into wherever you want the clock+date box to appear.
(personally, I use CSS position:absolute; to position my stuff wherever I want - gives you more control. but you can just put this at the top/bottom of your page or wherever)
<span id="clock" style="border:3px dotted;border-color:#000000;color:#000000;font-size:17;text-align:center;font-weight:bold;">&nbsp;</span>
That's it!
You should now have a lovely little real-time box that updates (almost) every second.
It adds an "am/pm" suffix to times dependent on the period (morning/afternoon) and also changes the month to a TEXTUAL format.
The style stuff in there is to give it a lovely little dotted border.
Feel free to modify any part of this script(other than the comments), and redistribute it as you like, but please remember who made it. Please leave my credit in there so that future versions/users can see where the original effor came from - but feel free to even add in your own comment line(s) underneath to say that it was you who added in whatever it is you decide to add in/change.
Also- feel free to email me ( darksider(at)swedger(dot)com ) to let me know what you think of my script!!
-darksider-以上是关于JavaScript JS时钟+日期（实时）的主要内容，如果未能解决你的问题，请参考以下文章