Question

我正在尝试做与此网站http://www.internetlivestats.com/one-second/

相同的事情

正如你所看到的，有一个数字在无穷大的增量上升每秒x次。

我被困住了，如果有人可以帮助我，那就太好了。这是我到目前为止所提出的（我知道它现在不起作用）

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

Answer 1

没有getElementByClassName。有getElementsByClassName。

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

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

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

document.getElementById('twitter')...

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

你不会对局部变量进行任何变异，所以你看到的值总是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 4

首先，您使用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 5

一定要增加总数。你可以用

总++（加一个）
总计+ = 1
total = total + 1

这是你的选择！

Answer 6

你需要使用＆＃34; getElementsByClassName＆＃34; （注意元素中的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);

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

6 个答案: