Making Live Clock javascript

hi there,

does anyone know how to make live javascript time running..

i have this php code

    $expiredate = date('d m Y G:i:s', $rdate1);
    $f_ex_date = explode(" ", $expiredate);
    $f_ex_time = explode(":", $expiredate);
    $_endDate = mktime($f_ex_date[0],$f_ex_date[1],$f_ex_date[2],$f_ex_date[1],$f_ex_date[0],$f_ex_date[2]);
    $time = $_endDate - time();
    $days = floor($time/86400);
    $hours = floor(($time-($days*86400))/3600);
    $mins = floor (($time-($days*86400)-($hours*3600))/60);
    $secs = floor ($time-($days*86400)-($hours*3600)-($mins*60));

   echo "Your account going to be expired in <span style=\"color: #C11B17;font-family:arial;font-size: 16px;\">".$days."</span> Days <span style=\"color: #C11B17;font-family:arial;font-size: 16px;\">".$hours."</span> Hours <span style=\"color: #C11B17;font-family:arial;font-size: 16px;\">".$mins."</span> Minutes <span style=\"color: #C11B17;font-family:arial;font-size: 16px;\">".$secs."</span> Seconds";

is it possible to make it like running live??

From stackoverflow

• Regarding the PHP, you might want to have a look at http://php.net/strftime

• PHP, since it is server-side, can't be live. You'll have to do the date manipulation (at least, the stuff that changes) and update the DOM using JavaScript, which is client-side.

  Steve

• It's doable on the client with a little bit of JavaScript. Without using a framework such as jQuery, which would be of marginal help here, the basic method would be something similar to the following:

  • Set up an event handler to fire each second

  Within the event handler:

  • Retrieve the current date and time and format it as desired
  • Update the contents of another element with the new value

  As a concrete example, the following function will set up a simple date/time update with a named element:

  function clock( id ) {
      var target = document.getElementById( id );
      if( target ) {
          var callback = function() {
              var datetime = new Date().toLocaleString();
              target.innerHTML = datetime;
          };
      callback();
          window.setInterval( callback, 1000 );
      }
  }
  

  Note the use of new Date().toLocaleString() to retrieve and format the current date/time; also, the use of window.setInterval() to set up the callback to fire each second.

  DaNieL : Keep in mind that this, and whatever clock js-based, will display the client time, not the server time

  Rob : @DaNieL: Excellent point; any differences in time zone could affect the correctness of output, especially if (in this case) accounts are expired based on a local time on the server. One could add some offset calculation to adjust the time prior to formatting.

• Here's how to do it. Working Demo.

  First, at the top of your HTML document:

  .datetime {
      color: #C11B17;
      font-family:arial;
      font-size: 16px;
  }
  

  We do this so we can clean up our HTML code a little bit:

  $rdate1 = 1240550032; // Fri, 24 Apr 2009 05:13:52 GMT
  $expiredate = date('d m Y G:i:s', $rdate1);
  $time = $rdate1 - time();
  $days = floor($time/86400);
  $hours = floor(($time-($days*86400))/3600);
  $mins = floor(($time-($days*86400)-($hours*3600))/60);
  $secs = floor($time-($days*86400)-($hours*3600)-($mins*60));
  
  printf("
      Your account is going to expire in
      <span class='datetime' id='days'>%s</span> Days
      <span class='datetime' id='hours'>%s</span> Hours
      <span class='datetime' id='minutes'>%s</span> Minutes
      <span class='datetime' id='seconds'>%s</span> Seconds
  ", $days, $hours, $mins, $secs);
  

  I'm not quite sure where that middle step you were taking for came from, but the code above gets me the difference in time between $rdate1 (presumably a unix timestamp) and time().

  Finally, we can do something like this with Javascript to update the time once the page loads:

  addEvent(window, 'load', function() {
      var eDays = document.getElementById('days');
      var eHours = document.getElementById('hours');
      var eMinutes = document.getElementById('minutes');
      var eSeconds = document.getElementById('seconds');
      var timer;
      timer = setInterval(function() {
          var vDays = parseInt(eDays.innerHTML, 10);
          var vHours = parseInt(eHours.innerHTML, 10);
          var vMinutes = parseInt(eMinutes.innerHTML, 10);
          var vSeconds = parseInt(eSeconds.innerHTML, 10);
  
          vSeconds--;
          if(vSeconds < 0) {
              vSeconds = 59;
              vMinutes--;
              if(vMinutes < 0) {
                  vMinutes = 59;
                  vHours--;
                  if(vHours < 0) {
                      vHours = 23;
                      vDays--;
                  }
              }
          } else {
              if(vSeconds == 0 &&
                 vMinutes == 0 &&
                 vHours == 0 &&
                 vDays == 0) {
                  clearInterval(timer);
              }
          }
          eSeconds.innerHTML = vSeconds;
          eMinutes.innerHTML = vMinutes;
          eHours.innerHTML = vHours;
          eDays.innerHTML = vDays;
      }, 1000);
  });
  
  
  function addEvent( obj, type, fn ) {
    if ( obj.attachEvent ) {
      obj['e'+type+fn] = fn;
      obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
      obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
      obj.addEventListener( type, fn, false );
  }
  

  Paolo Bergantino : edited to make event handler cross-browser. whoops.