Question

我有一个JS脚本和一个div＆＃34; counter＆＃34; ID：

＆＃13;

<div id="counter"></div>

＆＃13;

var START_VALUE

＆＃13;

这个脚本计算了一定数量后我从2017年初开始的每秒经济增长率。

所以我的问题是：我有5个不同的START_VALUE数字，所以我需要输出5个div中的5个计数器。如何使用相同的代码但不能复制整个脚本？我需要更改的内容仅为var INCREMENT和{{1}}！

Answer 1

学习基本Javascript有很多资源。简单的Google搜索会引导您使用this。

重用代码的最简单方法是创建一个函数。函数接受根据您输入的内容更改输出的参数。你可以认为它类似于数学中的f(x) = x^2，其中x是输入，你得到一些输出y。

在你的情况下，函数看起来像这样：

＆＃13;

var START_DATE = new Date("January 1, 2017 00:00:00"); // data de start
var INTERVAL = 1;  // in secunde
var count = 0;

function countFunc(id, start_value, increment) {
  var msInterval = INTERVAL * 1000;
  var now = new Date();
  count = parseInt(((now - START_DATE)/msInterval) * increment + start_value);
  document.getElementById(id).innerHTML = count;
  setInterval("count += " + increment + "; document.getElementById('" + id + "').innerHTML = parseInt(count);", msInterval);
}

countFunc("counter1", 1000, 1000);
countFunc("counter2", 1400, 1400);
countFunc("counter3", 1500, 1500);
countFunc("counter4", 1600, 1600);
countFunc("counter5", 1000, 1000);

＆＃13;

<div id="counter1"></div>
<div id="counter2"></div>
<div id="counter3"></div>
<div id="counter4"></div>
<div id="counter5"></div>

＆＃13;

请注意除了需要更改的内容之外，我几乎没有更改代码。你走在正确的轨道上。起始值和增量需要改变。在这种情况下，id也需要为每个div更改。

Answer 2

尝试使用JSON：

var START_DATE = new Date("January 1, 2017 00:00:00"); // data de start
var INTERVAL = 1;  // in secunde
var FULL_DATA = [
    {START_VALUE: 1400.53, INCREMENT: 1400.53, count: 0 },
    {START_VALUE: 1401.53, INCREMENT: 1401.53, count: 0 },
    {START_VALUE: 1402.53, INCREMENT: 1402.53, count: 0 },
    {START_VALUE: 1403.53, INCREMENT: 1403.53, count: 0 },
    {START_VALUE: 1404.53, INCREMENT: 1404.53, count: 0 }
]
var msInterval = INTERVAL * 1000;
var now = new Date();
function inc(){
    for(var i in FULL_DATA){
  	        var data = FULL_DATA[i];
        if (data.count == 0){
	        data.count = parseInt(((now - START_DATE)/msInterval) * data.INCREMENT + data.START_VALUE);
 		    }else{
 	    	data.count += data.INCREMENT;
  	        }
        document.getElementById('counter' + i).innerHTML = parseInt(data.count);
    }
}
setInterval(inc, msInterval);

<div id="counter0"></div>
<div id="counter1"></div>
<div id="counter2"></div>
<div id="counter3"></div>
<div id="counter4"></div>

JavaScript计算我的经济增长

2 个答案: