Create Live Clock javascript

Question

Does anyone know how to run live javascript.

I have this php code

$expiredate = date('dm YG: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"; 

Can this be done, how to run live?

Answer 1

Here's how to do it. Demo worker .

First at the top of the HTML document:

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

We do this to clear our HTML code a bit:

 $rdate1 = 1240550032; // Fri, 24 Apr 2009 05:13:52 GMT $expiredate = date('dm YG: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 this middle step came from, but the code above gives me the time difference between $rdate1 (supposedly the unix timestamp) and time() .

Finally, we can do something similar with Javascript to update the time after 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 ); } 

Answer 2

This can be done on the client with a bit of JavaScript. Without using a framework like jQuery, which will have little help here, the main method would be something like this:

• Set up an event handler to run every second

Inside the event handler:

• Get the current date and time and format it as desired.
• Refresh the contents of another item with a new value

As a concrete example, the following function will install a simple date and time update using 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, use window.setInterval() to set up a fire callback every second.

Answer 3

PHP, since it is a server-side , cannot be live. You will need to manipulate the date (at least the material that changes) and update the DOM using JavaScript, which is client-side .

Steve

Answer 4

JS-Clock is the best live watch solution. this mini version of JS has only 4k. I recommend it.