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);
6 réponses
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().
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/
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/
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')...
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);
Assurez-vous d'incrémenter le total. vous pouvez utiliser
- total ++ (ajoutez-en un)
- total + = 1
- total = total + 1
C'est ton choix!