www.webdeveloper.com
Results 1 to 6 of 6

Thread: 24 Hour Digital Text Clock?

  1. #1
    Join Date
    Oct 2013
    Posts
    2

    24 Hour Digital Text Clock?

    i have this code so far however I need it to be in 24 hour format and without the PM/AM Obviously.
    HTML 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 ();
      
    
      // 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 +  " " + timeOfDay;
    
      // Update the time display
      document.getElementById("clock").firstChild.nodeValue = currentTimeString;
    }
    </script>
    </head>
    
    <body onLoad="updateClock(); setInterval('updateClock()', 1000 )">
    <span id="clock">&nbsp;</span>
    <?php
    echo "nine";
    ?>
    </body>
    
    </html>
    *
    ANY HELP?

  2. #2
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    You "have it.." that's right. I suppose you haven't wrote it... instead of asking for help maybe you should invest a little time and effort in trying to build it and then ask for help if you stuck in a middle of process.
    Last edited by tech_soul8; 10-06-2013 at 04:08 PM.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Red face

    You almost "have it..."

    You forgot to declare 'currentSeconds'
    Then if you read the comments you would see where the military time (standard) is converted to 0-12 hours instead of 0-23
    After that, the military time does not require the AM/PM designation specified by the 'timeOfDay' variable.
    It is not needed but I left it in so you could see where it was used in the display.

    Code:
    <html>
    <head>
    <style type="text/css">
    #clock { font-size:2.5em; color:red; }
    </style>
    
    <script type="text/javascript">
    function updateClock (){
      var currentTime = new Date ( );
    
      //Get the hours for updating clock
      var currentHours = currentTime.getHours ();
      
      //Get the minutes for updating clock
      var currentMinutes = currentTime.getMinutes ();
      
      //Get the minutes 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").innerHTML = currentTimeString;
    }
    </script>
    </head>
    
    <body onLoad="updateClock(); setInterval('updateClock()', 1000 )">
    <span id="clock">&nbsp;</span>
    </body>
    
    </html>
    Then I added a bit of CSS spice to make it look better.

  4. #4
    Join Date
    Oct 2013
    Posts
    2
    Quote Originally Posted by JMRKER View Post
    You almost "have it..."

    You forgot to declare 'currentSeconds'
    Then if you read the comments you would see where the military time (standard) is converted to 0-12 hours instead of 0-23
    After that, the military time does not require the AM/PM designation specified by the 'timeOfDay' variable.
    It is not needed but I left it in so you could see where it was used in the display.

    Code:
    <html>
    <head>
    <style type="text/css">
    #clock { font-size:2.5em; color:red; }
    </style>
    
    <script type="text/javascript">
    function updateClock (){
      var currentTime = new Date ( );
    
      //Get the hours for updating clock
      var currentHours = currentTime.getHours ();
      
      //Get the minutes for updating clock
      var currentMinutes = currentTime.getMinutes ();
      
      //Get the minutes 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").innerHTML = currentTimeString;
    }
    </script>
    </head>
    
    <body onLoad="updateClock(); setInterval('updateClock()', 1000 )">
    <span id="clock">&nbsp;</span>
    </body>
    
    </html>
    Then I added a bit of CSS spice to make it look better.
    thanks for the useful post, unlike the guy above you. i managed to fix it before looking at the thread just required me to use logic. I didn't need the seconds and I got it sorted, thanks!

  5. #5
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Quote Originally Posted by Iskrit View Post
    thanks for the useful post, unlike the guy above you. i managed to fix it before looking at the thread just required me to use logic. I didn't need the seconds and I got it sorted, thanks!
    ...just can't stand lazy people who are searching the internet for scripts they need or ask someone else to do the job for them instead of trying to learn something. To make matters worse they do web design for living. Sorry if you doesn't fall into that category.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Red face

    Quote Originally Posted by Iskrit View Post
    thanks for the useful post, unlike the guy above you. i managed to fix it before looking at the thread just required me to use logic. I didn't need the seconds and I got it sorted, thanks!
    Hopefully, if you don't need the seconds variable, you also changed:
    Code:
    <body onLoad="updateClock(); setInterval('updateClock()', 1000 )">
    to...
    Code:
    <body onLoad="updateClock(); setInterval('updateClock()', 60000 )">
    Saves a lot of un-necessary checking in the function...

    Good Luck!

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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