Clock Live Javascript

Question

¿alguien sabe cómo hacer que el tiempo javascript en vivo corriendo ..

tengo este código php

$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"; 

es posible que sea como correr en vivo ??

Answer 1

He aquí cómo hacerlo. Working Demo.

En primer lugar, en la parte superior de su documento HTML:

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

Hacemos esto para que podamos limpiar nuestro código HTML un poco:

$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); 

no estoy muy seguro de dónde ese paso intermedio que estaba tomando venía de, pero el código anterior me da la diferencia en el tiempo entre $rdate1 (presumiblemente una marca de tiempo Unix) y time().

Por último, podemos hacer algo como esto con Javascript para actualizar el tiempo una vez que se carga la página:

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

PHP, ya que es server-side, no se puede vivir. Tendrás que hacer la manipulación de la fecha (al menos, las cosas que cambian) y actualizar el DOM usando JavaScript, que es client-side.

Steve

Answer 3

Es factible en el cliente con un poco de JavaScript. Sin necesidad de utilizar un marco como jQuery, lo que sería de ayuda marginal aquí, el método básico sería algo similar a lo siguiente:

• Configurar un controlador de eventos para disparar cada segundo

Dentro del controlador de eventos:

• recuperar la fecha y hora actuales y dar formato a su gusto
• actualización de los contenidos de otro elemento con el nuevo valor

Como ejemplo concreto, la siguiente función pondrá en marcha una actualización sencilla fecha/hora con un elemento llamado:

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); 
    } 
} 

Nota el uso de new Date().toLocaleString() para recuperar y formatear la fecha/hora actual; también, el uso de window.setInterval() para configurar la devolución de llamada para disparar cada segundo.

Answer 4

JS-Clock es la mejor solución para el reloj en vivo. Su versión mini JS tiene solo 4 KB. Recomiendo esto