将文本添加到 div 中，该文本单独使用 JS 递增

Question

我正在尝试做与本网站相同的事情 http://www.internetlivestats.com/one-second/

如您所见，有一个数字以无穷大为增量，每秒上升x次。

我很困，如果有人能帮助我，那就太好了。这就是我到目前为止想出的（我知道它暂时不起作用）

索引.html

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

脚本.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);

Answer 1

您不执行局部变量的任何更改，因此您看到的值始终为 7135 和 487。您还有一些语法错误。

以下是我可能以不同的方式处理这个问题的方法。

    // 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>

这种方法可以让您轻松添加越来越多的站点 - 无需更改update()功能。

Answer 2

你只是让值返回而不是递增吗？如果是这样，那是因为总数没有增加。我猜你要的是这样的东西：

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/

Answer 3

首先，

您正在使用document.getElementByClassName此函数不存在，它应该是：document.getElementsByClassName 。但是，当您更新特定元素时，我建议您改用document.getElementById。

然后，您的 HTML 将变为：

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

其次，您没有增加总数，因此您的值将保持不变：

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

请看这里的小提琴：https://jsfiddle.net/o6rmx1ds/

Answer 4

没有getElementByClassName .有一个getElementsByClassName.

页面上可以有多个具有相同类名的元素。因此，该方法返回多个元素。

由于您正在尝试检索特定的单个元素，因此应该使用 id 而不是类。

<div id="twitter">...</div>
document.getElementById('twitter')...

Answer 5

请务必增加总计。您可以使用

• 总计++（添加一个）
• 总计 += 1
• 总计 = 总计 + 1

这是你的选择！

Answer 6

你需要使用"getElementsByClassName"（注意Elements中的s），然后引用数组中的第一项。

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