www.webdeveloper.com
Results 1 to 3 of 3

Thread: update time

  1. #1
    Join Date
    Oct 2006
    Posts
    120

    update time

    Hi Guys,

    I have this js code that displays the time. The problem i have it that the time does not update the time unless i refresh the page. Is there a way to auto fresh the time? Here is the current code i have.

    <script type="text/javascript">
    <!--
    var currentTime = new Date()
    var hours = currentTime.getHours()
    var minutes = currentTime.getMinutes()
    if (minutes < 10){
    minutes = "0" + minutes
    }
    document.write(hours + ":" + minutes + " ")
    if(hours > 11){
    document.write("PM")
    } else {
    document.write("AM")
    }
    //-->
    </script>

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    Hi there khujo56,

    try it like this...
    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="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>time</title>
    
    <style type="text/css">
    #time {
        width:6em;
        padding:0.5em 0;
        border:medium double #000;
        margin:auto;
        font-family:monospace;
        font-size:1.2em;
        text-align:center;
        background-color:#cfcfcf;
     }
    </style>
    
    <script type="text/javascript">
    function displayTime() {
       var currentTime=new Date();
       var hours=currentTime.getHours();
       var minutes=currentTime.getMinutes();
       var am=(hours>11)?'PM':'AM';
    if(hours<10){
       hours='0'+hours;
     }
    if(minutes<10){
       minutes='0'+minutes;
     }
       document.getElementById('time').innerHTML=hours+':'+minutes+am;
    
       setTimeout(function(){displayTime()},1000);
     }
     window.addEventListener?
     window.addEventListener('load',displayTime,false):
     window.attachEvent('onload',displayTime);
    </script> 
    
    </head>
    <body>
    
    <div id="time"></div>
    
    </body>
    </html>
    
    coothead

  3. #3
    Join Date
    Aug 2009
    Posts
    593
    Felt like submitting my own version, tell me what you think

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title>Updating Clock</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    		<script type="text/javascript">
    
    			function Clock()
    			{
    				var
    					$clock,
    					$update = function()
    					{
    						var
    							$time = new Date();
    	
    						$clock.innerHTML =
    							($time.getHours()   < 10 ? '0'  : '') + $time.getHours()   + ':' +
    							($time.getMinutes() < 10 ? '0'  : '') + $time.getMinutes() + ':' +
    							($time.getSeconds() < 10 ? '0'  : '') + $time.getSeconds() + ' ' +
    							($time.getHours()   > 11 ? 'PM' : 'AM');
    					};
    
    				document.write('<span id="clock_instance"></span>');
    				$clock = document.getElementById('clock_instance');
    				$clock.id = '';
    				setInterval($update, 1000);
    				$update();
    			}
    
    		</script>
    
    	</head>
    	<body>
    
    		The time is currently: <script type="text/javascript">new Clock();</script>, have a nice day!<br /><br />		
    		And here's another: <span style="font-weight: bold; color: #00f;"><script type="text/javascript">new Clock();</script></span>, all nicely styled!	
    
    	</body>
    </html>
    Last edited by thraddash; 12-30-2010 at 03:27 AM. Reason: Updated slightly

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