www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: Adding current time and date to web site

  1. #1
    Join Date
    Aug 2006
    Posts
    10

    Adding current time and date to web site

    Hi,

    I am fairly new to HTML and I am building my first web site and I am wanting to put the current time and date on my web page and I have no ideas about how to do this. (not the time and date that the page was modified)

    Can someone please help?

    Cheers

  2. #2
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,277
    Just remember that about one in ten will not see this so don't make any external references to it - and don't use this method with XHTML.:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Content-Script-Type" content="text/javascript">
    <meta name="Content-Style-Type" content="text/css">
    <title>Example</title>
    </head>
    <body>
    <script type="text/javascript">
    document.write ('<p>Current time is: <span id="date-time">', new Date().toLocaleString(), '<\/span>.<\/p>')
    if (document.getElementById) onload = function () {
    	setInterval ("document.getElementById ('date-time').firstChild.data = new Date().toLocaleString()", 50)
    }
    </script>
    </body>
    </html>

  3. #3
    Join Date
    Aug 2006
    Posts
    10
    Hi
    You are a star that is fantastic...
    One silly Question: does it know that some pages are opened in other regions so show the correct time for that time zone?
    Thanks ever so much

  4. #4
    Join Date
    Mar 2005
    Posts
    159
    It's client-side, so it gets the time from the browser which in turn gets it from the computer clock. So it will display whatever time they have their computer set to.

  5. #5
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,277
    And it uses Date.toLocaleString so the format will be appropriate to the region and user settings.

  6. #6
    Join Date
    Aug 2006
    Posts
    10
    great thanks for all of your help

  7. #7
    Join Date
    Oct 2006
    Location
    UK
    Posts
    2
    Quote Originally Posted by Charles
    Just remember that about one in ten will not see this so don't make any external references to it - and don't use this method with XHTML.:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Content-Script-Type" content="text/javascript">
    <meta name="Content-Style-Type" content="text/css">
    <title>Example</title>
    </head>
    <body>
    <script type="text/javascript">
    document.write ('<p>Current time is: <span id="date-time">', new Date().toLocaleString(), '<\/span>.<\/p>')
    if (document.getElementById) onload = function () {
    	setInterval ("document.getElementById ('date-time').firstChild.data = new Date().toLocaleString()", 50)
    }
    </script>
    </body>
    </html>
    Hi

    Is it posable to to modify the above code, so that the day is dispplayed as well.

    Thanks Roy

  8. #8
    Join Date
    Oct 2006
    Location
    Derby, UK
    Posts
    50
    You need this within the <head></head> tags.
    HTML Code:
    <SCRIPT LANGUAGE="JavaScript">
    function showDate()
    {
    	var now = new Date();
    	var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
    	var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
    	var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
    	function fourdigits(number)
    	{
    		return (number < 1000) ? number + 1900 : number;
    	}
    	
    	tnow=new Date();
    	thour=now.getHours();
    	tmin=now.getMinutes();
    	tsec=now.getSeconds();
    	
    	if (tmin<=9) { tmin="0"+tmin; }
    	if (tsec<=9) { tsec="0"+tsec; }
    	if (thour<10) { thour="0"+thour; }
    	
    	today = days[now.getDay()] + ", " + date + " " + months[now.getMonth()] + ", " + (fourdigits(now.getYear())) + " - " + thour + ":" + tmin +":"+ tsec;
    	document.getElementById("dateDiv").innerHTML = today;
    }
    setInterval("showDate()", 1000);
    </script>
    Then this somewhere in your page.
    HTML Code:
    <div id="dateDiv"></div>

  9. #9
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,277
    Quote Originally Posted by royuk1@tiscali.
    Hi

    Is it posable to to modify the above code, so that the day is dispplayed as well.

    Thanks Roy
    That example does display the day as well.

  10. #10
    Join Date
    Oct 2006
    Location
    UK
    Posts
    2
    Thanks Neoboffin, you are a star

    Roy

  11. #11
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,277
    Actually, Neoboffin uses the long depricated Date.getYear method. It was depricated with good reason; different browsers do different things now that we're past the year 2000. We're supposed to use Date.getFullYear now. And it uses the non-standard HTMLElement.innerHTML.

    Do give my example a try. You'll find that by using the built in JavaScript functions it's a wee bit more simple.

  12. #12
    Join Date
    Oct 2006
    Location
    Derby, UK
    Posts
    50
    My code used works in IE, Mozilla, Netscape, Firefox and Opera. If you prefer you can change:
    document.getElementById("dateDiv").innerHTML = today;
    to
    document.getElementById ('date-time').firstChild.data = today;
    Also, by day he meant Monday, Tuesday, etc. Which your's does not display. Your's also requires editing in order to display correctly due to cut and paste reasons.

  13. #13
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,277
    So you've solved for one problem but left the bigger one. You're still using the problematic Date.getYear instead of the proper Date.getFullYear.

    Now it is true that older browsers do not know about Date.getFullYear, but those older browsers also don't know about HTMLElement.innerHTML and textNode.data. You need to un-confuse yourself.

    The example that I provided works just fine cut and paste as it is. I just gave it a try and it gives me "Monday, 09 October 2006 9:24:52 AM". That certainly contains the day.

    I should note, however, a couple of things about my example that you no doubt missed. By using Date.toLocaleString the date format will be according to the user's preference and settings. Less importantly, older browsers that don't yet understand the DOM will still see the time stamp, it just won't be dynamic.

  14. #14
    Join Date
    Oct 2006
    Location
    Derby, UK
    Posts
    50
    Problematic? -- I really don't see any problems using the code I posted.

    You're code may work correct at once, but I posted an example to fetch the day. Wrong or not, I believe most of Internet users are using a DOM compliant browser.

  15. #15
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,277
    Quote Originally Posted by Neoboffin
    I really don't see any problems using the code I posted.
    No doubt, but people a great deal more learned and smart than you or I do, and so they've deprecated Date.getYear. The document at http://www.irt.org/articles/js199/index.htm describes the problem in brief. And you can easily avoid the problem, and simplify your code by using Date.getFullYear.
    Last edited by Charles; 10-09-2006 at 12:02 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles