Thread: Creating an auto updating clock

Results 1 to 2 of 2
  1. #1 Creating an auto updating clock 
    Registered Member
    Join Date
    Jul 2009
    Age
    28
    Posts
    537
    Thanks given
    20
    Thanks received
    3
    Rep Power
    8
    First we start with the basic layout of html that is:
    Code:
    <html>
    <head>
    </head>
    
    <body>
    </body>
    
    </html>
    If u done that we gone edit this some parts edit the body tag to '<body onload="updateClock(); setInterval('updateClock()', 1000 )">'

    If u done that its gone look like:
    Code:
    <html>
    <head>
    </head>
    
    <body onload="updateClock(); setInterval('updateClock()', 1000 )">
    </body>
    
    </html>
    Now we editing inside of the head tags:
    We paste in the :
    <script type="text/javascript">

    </script>


    This is gone allow you to add a javascript code into your html site

    Now where gone add the javascript:

    Step #1:
    Make
    Code:
    function updateClock (){
    
    }
    This is gone make a Updating clock function

    Step #2:
    Add:
    Code:
      var currentTime = new Date ( );
    This is gone make Your Time is correct and automatic update's

    Step #3:
    Add:
    Code:
      var currentHours = currentTime.getHours ();
      var currentMinutes = currentTime.getMinutes ();
      var currentSeconds = currentTime.getSeconds ();
    This is gone make You Retrieve every Hour/Minute/Second

    Step #4:
    add:
    Code:
      currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
      currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
    This is check Secconds counted to 60 and if its dit its +1 minute to the minutes

    Step #5:
    Add:
    Code:
      var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
    This is gone check of Your Time is AM Or PM.

    Step #6:
    Add:
    Code:
      currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
    Convert the Hours if needed

    Step #7:
    Add:
    Code:
      currentHours = ( currentHours == 0 ) ? 12 : currentHours;
    Convert an hours component of "0" to "12"

    Step #8:
    Add:
    Code:
      var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
    Making its displays

    Step #9:
    Add:
    Code:
      document.getElementById("clock").firstChild.nodeValue = currentTimeString;
    Update the time clock!

    If u all done that your code is gone look like :
    Code:
    function updateClock (){
      var currentTime = new Date ( );
    
      //Get the hours for updating clock
      var currentHours = currentTime.getHours ();
      
      //Get the minuts for updating clock
      var currentMinutes = currentTime.getMinutes ();
      
      //Get the secconds for updating clock
      var currentSeconds = currentTime.getSeconds ();
    
      // Pad the minutes and seconds with leading zeros, if required
      currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
      currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
    
      // Choose either "AM" or "PM" as appropriate
      var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
    
      // Convert the hours component to 12-hour format if needed
      currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
    
      // Convert an hours component of "0" to "12"
      currentHours = ( currentHours == 0 ) ? 12 : currentHours;
    
      // Compose the string for display
      var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
    
      // Update the time display
      document.getElementById("clock").firstChild.nodeValue = currentTimeString;
    }
    Now your have made your 50% made your Javascript code(Its copy pasted ) so now we gone add it HTML Sided

    Back to the html

    Our code is gone look atm like:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function updateClock (){
      var currentTime = new Date ( );
    
      //Get the hours for updating clock
      var currentHours = currentTime.getHours ();
      
      //Get the minuts for updating clock
      var currentMinutes = currentTime.getMinutes ();
      
      //Get the secconds for updating clock
      var currentSeconds = currentTime.getSeconds ();
    
      // Pad the minutes and seconds with leading zeros, if required
      currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
      currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
    
      // Choose either "AM" or "PM" as appropriate
      var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
    
      // Convert the hours component to 12-hour format if needed
      currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
    
      // Convert an hours component of "0" to "12"
      currentHours = ( currentHours == 0 ) ? 12 : currentHours;
    
      // Compose the string for display
      var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
    
      // Update the time display
      document.getElementById("clock").firstChild.nodeValue = currentTimeString;
    }
    </script>
    </head>
    
    <body onload="updateClock(); setInterval('updateClock()', 1000 )">
    </body>
    
    </html>
    Now we neet to make its displays its very easy

    Just add into the body tags :
    Code:
    <span id="clock">&nbsp;</span>
    The &nbsp; because else its got nothing to show and thats just blank code so its automatic shows

    Ty for following my tutorial greetz nl Pk3er


    #100 Posts - #200 Posts - #300 Posts - #400 Posts - #500 Posts -
    #600 Posts - #700 Posts - #800 Posts #900 Posts - #1000 Posts
     

  2. #2  
    Super Donator

    Sir Zap's Avatar
    Join Date
    Mar 2009
    Age
    28
    Posts
    1,395
    Thanks given
    336
    Thanks received
    80
    Rep Power
    567
    Good job, Ty, im new Whit javascript/HTML
     


Thread Information
Users Browsing this Thread

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


User Tag List

Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •