Ajouter du texte à div qui s'incrémente seul avec JS

Question

J'essaie de faire la même chose que sur ce site http://www.internetlivestats.com/one -seconde /

Comme vous pouvez le voir, un nombre incrémenté à l'infini augmente x fois par seconde.

Je suis coincé, si quelqu'un pouvait m'aider, ce serait bien. C'est ce que j'ai trouvé jusqu'à présent (je suis conscient que cela ne fonctionne pas pour l'instant)

Index.html

<div class="twitter"></div>
<div class="instagram"></div>

Script.js

var total = 0;
var twitterMultiplier = 7135;
var instagramMultiplier = 487;

var update = function() {
  document.getElementByClassName("twitter").innerHTML = "Tweets per second: " + Math.round(total + 7135);
  document.getElementByClassName("instagram").innerHTML = "Images per second: " + Math.round(total + 487);
}
window.setInterval(function(){
  update();
}, 100);

javascript jquery html function

0

Apswak 8 mars 2016 à 02:05

Answer 1

Vous n'effectuez aucune mutation des variables locales, donc les valeurs que vous voyez seront toujours 7135 et 487. Vous avez également des erreurs de syntaxe.

Voici comment je pourrais aborder cela un peu différemment.

    // Maintain and simple map of the settings you need
    var timeMap = {
      'twitter': {
        total: 0,
        rate: 7135,
        label: 'Tweets per second: '
      },
      'instagram': {
        total: 0,
        rate: 487,
        label: 'Images per second: '
      }
    };

    // The update function loops over the map, updates each total by
    // the rate value, and uses the map key and label to find the element 
    // by ID in the DOM and builds the output string
    var update = function() {
      for (var site in timeMap) {
        timeMap[site].total += timeMap[site].rate;
        document.getElementById(site).innerHTML = timeMap[site].label + timeMap[site].total.toString();
      }
    };

    // runs every 1000 milliseconds
    window.setInterval(update, 1000);

<div id="twitter"></div>
<div id="instagram"></div>

Cette approche vous permettra d'ajouter de plus en plus de sites en toute simplicité - plus besoin de changer la fonction update().

1

Cᴏʀʏ 7 mars 2016 à 23:26

Answer 2

Tout d'abord, vous utilisez document.getElementByClassName cette fonction n'existe pas, elle devrait être: document.getElementsByClassName. Cependant, lorsque vous mettez à jour un élément spécifique, je vous suggère d'utiliser à la place document.getElementById.

Votre html devient alors:

<div id="twitter"></div>
<div id="instagram"></div>

Deuxièmement, vous n'incrémentez pas le total, votre valeur restera donc statique:

var total = 0;
var twitterMultiplier = 7135;
var instagramMultiplier = 487;

var update = function() {
  total++; //incrementing total every interval
  document.getElementById("twitter").innerHTML = "Tweets per second: " + Math.round(total * 7135); //multiply with total here.
  document.getElementById("instagram").innerHTML = "Images per second: " + Math.round(total * 487); //multiply with total here.
}

window.setInterval(function(){
  update();
}, 100);

Voir le violon ici: https://jsfiddle.net/o6rmx1ds/

1

JanR 7 mars 2016 à 23:19

Answer 3

Obtenez-vous simplement les valeurs renvoyées et non incrémentées? Si c'est le cas, c'est parce que le total n'est pas augmenté. Je suppose que tu cherchais quelque chose comme ça:

var twitterTotal = 0;
var instagramTotal = 0;
var twitterMultiplier = 7135;
var instagramMultiplier = 487;

var update = function() {
    twitterTotal += twitterMultiplier;
  instagramTotal += instagramMultiplier;
  document.getElementById("twitter").innerHTML = "Tweets per second: " + Math.round(twitterTotal);
  document.getElementById("instagram").innerHTML = "Images per second: " + Math.round(instagramTotal);
}
window.setInterval(function(){
  update();
}, 100);

https://jsfiddle.net/4f5h07w2/

1

Fhtagn 7 mars 2016 à 23:13

Answer 4

Il n'y a pas de getElementByClassName. Il y a un getElementsByClassName.

Il peut y avoir plusieurs éléments sur la page avec le même nom de classe. En tant que telle, la méthode renvoie plusieurs éléments.

Puisque vous essayez de récupérer des éléments individuels spécifiques, vous devez utiliser id plutôt que class.

<div id="twitter">...</div>

document.getElementById('twitter')...

1

Comptonburger 7 mars 2016 à 23:26

Answer 5

Vous devez utiliser "getElementsByClassName" (notez les s dans Elements), puis référencer le premier élément du tableau.

document.getElementsByClassName("twitter")[0].innerHTML = "Tweets per second: " + Math.round(total + 7135);
document.getElementsByClassName("instagram")[0].innerHTML = "Images per second: " + Math.round(total + 487);

-1

zekim 7 mars 2016 à 23:18

Answer 6

Assurez-vous d'incrémenter le total. vous pouvez utiliser

total ++ (ajoutez-en un)
total + = 1
total = total + 1

C'est ton choix!

-1

Mason Jones 7 mars 2016 à 23:12

Ajouter du texte à div qui s'incrémente seul avec JS

6 réponses

Questions connexes

De nouvelles questions

javascript