Faire en direct Clock javascript

Question

personne ne sait comment faire du temps javascript en direct en cours d'exécution ..

Je possède ce code 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"; 

est-il possible de le faire comme la course en direct ??

Answer 1

Voici comment procéder. Working Demo.

D'abord, en haut de votre document HTML:

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

Nous faisons cela afin que nous puissions nettoyer notre code HTML un peu:

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

Je ne suis pas tout à fait sûr où cette étape intermédiaire que vous preniez vient, mais le code ci-dessus me fait la différence dans le temps entre $rdate1 (probablement un timestamp unix) et time().

Enfin, nous pouvons faire quelque chose comme ça avec Javascript pour mettre à jour le temps une fois que la page se charge:

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, car il est server-side, ne peut pas être en ligne. Vous aurez à faire la manipulation de la date (au moins, les choses qui changent) et mettre à jour le DOM en utilisant JavaScript, qui est client-side.

Steve

Answer 3

Il est faisable sur le client avec un peu de JavaScript. Sans l'aide d'un cadre tel que jQuery, ce qui serait d'une aide marginale ici, la méthode de base serait quelque chose de semblable à ce qui suit:

• Mettre en place un gestionnaire d'événements pour tirer chaque seconde

Dans le gestionnaire d'événements:

• récupérer la date et l'heure et le format comme souhaité
• Mise à jour le contenu d'un autre élément avec la nouvelle valeur

Comme exemple concret, la fonction suivante sera mis en place une mise à jour simple date/heure avec un élément nommé:

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

Notez l'utilisation de new Date().toLocaleString() pour récupérer et formater la date/heure; également, l'utilisation de window.setInterval() pour configurer le rappel à tirer chaque seconde.

Answer 4

JS-Clock est la meilleure solution pour l'horloge en direct. C'est mini version JS est de seulement 4 Ko. Je recommande ceci.