web-dev-qa-db-fra.com

comment mettre à jour l'heure régulièrement?

function timeClock()
{
    setTimeout("timeClock()", 1000);        
    now = new Date();
    alert(now);
    f_date = now.getDate()+" "+strMonth(now.getMonth())+" "+now.getFullYear()+" / "+timeFormat(now.getHours(), now.getMinutes());
    return f_date;
}

<span class="foo"><script type="text/javascript">document.write(timeClock());</script></span>

alerte (maintenant); me donne la valeur chaque seconde mais elle n'est pas mise à jour dans le code HTML. Comment puis-je mettre à jour l'heure sur le HTML sans actualiser la page?

javascriptjquerydatetime
13
alex

Il y a un certain nombre d'erreurs dans votre code. Sans l'utilisation de var devant vos déclarations de variable, vous les perdez dans la portée globale. 

De plus, l'utilisation de document.write est déconseillé .

Voici comment je le ferais:

JavaScript: 

function updateClock() {
    var now = new Date(), // current date
        months = ['January', 'February', '...']; // you get the idea
        time = now.getHours() + ':' + now.getMinutes(), // again, you get the idea

        // a cleaner way than string concatenation
        date = [now.getDate(), 
                months[now.getMonth()],
                now.getFullYear()].join(' ');

    // set the content of the element with the ID time to the formatted string
    document.getElementById('time').innerHTML = [date, time].join(' / ');

    // call this function again in 1000ms
    setTimeout(updateClock, 1000);
}
updateClock(); // initial call

HTML: 

<div id="time"> </div>
32
Ivo Wetzel

setInterval (expression, délai d'attente);

La fonction setTimeout étant destinée à un délai d'expiration unique, l'utilisation de setInterval serait une option plus appropriée. SetInterval s'exécutera régulièrement sans les lignes supplémentaires fournies par la réponse d'Ivo.

Je réécrirais la réponse d'Ivo comme suit:

JavaScript: 

function updateClock() {
  // Ivo's content to create the date.
  document.getElementById('time').innerHTML = [date, time].join(' / ')
}
setInterval(updateClock, 1000);

Essayez vous-même! https://jsfiddle.net/avotre/rtuna4x7/2/

4
Aaron Votre
x = document.getElementsByTagName('SPAN').item(0);
x.innerHTML = f_date;

essayez de mettre ce bloc de code au lieu de l'instruction return, je ne l'ai pas testé, mais cela fonctionnera probablement

0
Yunus Eren Güzel

Format d'heure Javascript droit/mise à jour

1: créer des fonctions de convertisseur de mois 2: créer des fonctions de temps 3: créer des fonctions de mise à jour 4: créer des fonctions de sortie

    // month converter from index / 0-11 values
function covertMonth(num){
  let months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  // look into index with num 0-11
  let computedRes = months[num];
  return computedRes;
}

// time func
function Time(){
   // important to get new instant of the Date referrance
  let date = new Date();
  this.time = date.toLocaleTimeString();
  this.year = date.getUTCFullYear();
  this.day = date.getUTCDate();
  this.month = date.getUTCMonth();
  this.currentTime = date.toLocaleTimeString() + ' ' + covertMonth(this.month) + ' ' + this.day + ' ' + this.year;
  return this.currentTime;
}


 function timeOutPut(){
  let where = document.getElementById('some-id');
  where.textContent = Time(); // 1:21:39 AM Dec 17 2017
}

   // run every 5secs
setInterval(timeOutPut, 5000);
0
soloproper

Il y a peut-être quelque chose dans le plugin timeago jQuery auquel vous pouvez vous connecter, mais je n'ai pas honnêtement essayé ...

http://timeago.yarp.com/

0
Tim Reddy
$('span.foo').html(f_date);

placez-le dans votre fonction timeclock()

non testé 

    function timeClock()
    {
        setTimeout("timeClock()", 1000);        
        now = new Date();
        alert(now);
        f_date = now.getDate()+" "+strMonth(now.getMonth())+" "+now.getFullYear()+" / "+timeFormat(now.getHours(), now.getMinutes());
       $('span.foo').html(f_date);

}
0
Rafay

J'utiliserais setInterval plutôt que setTimeout:

https://developer.mozilla.org/en/DOM/window.setInterval

0
Abderrahmane TAHRI JOUTI

J'ai utilisé le concept @soloproper setInterval @Ivo Wetzel dans son ensemble, ma mise à jour concerne uniquement le formatage de l'heure. Lignes de programmation réduites 

<div id="liveClock"> </div>

$(document).ready(function () {
        updateClock();
});

function updateClock() {
   document.getElementById('liveClock').innerHTML = new Date().format("dd/MMMM/yyyy hh:mm:ss tt");
}
setInterval(updateClock, 1000);
0
Pranesh Janarthanan

Je pense que votre fonction setTmeout a les mauvaises variables, la première doit être une fonction et non une chaîne, ce qui m'a un peu perturbé. En gros, vous devez écrire sur la balise span lorsque vous exécutez la fonction.

J'ai créé une version jQuery dans un violon pour montrer ce que je veux dire. N'a pas eu votre fonction strMonth mais vous avez eu l'idée. J'ai également changé l'alerte en console.log mais vous pouvez supprimer cette ligne.

http://jsfiddle.net/5JWEV/

0
BenWells