Question

我找到了一个很好的简单代码来显示计数，我可以很容易地改变每个计数的步骤。因此，这个数字会在10年内计算出来，因此页面上会显示10,20,30,40,50等。

代码文本如下

<script type="text/javascript">
    var counter = 0
    var timer; { counter = counter + 10;//increment the counter by 10
        //display the new value in the div
        document.getElementById("timer_container").innerHTML = counter;
    }
</script>
</head>
<body onload='timer=setInterval("countUP()", 1000 );'>
    <div id="timer_container"<0>/div>
</body>
</html>

然而，打败我的是如何在一个页面上多次包含计数器，每个计数器使用不同的计数量。我希望能够在页面的表格中包含很多计数器，每个计数器的数量分别为1,2,3,4等。

这是为了帮助我的老师妻子在大白板上摆放时间表，这样就可以展示12个不同颜色的区域，每次从1到12个表格

显示的每个彩色框都包括：

image - mysite.com/3timestableicon.png
text - “3x Table”
计数器代码 - 以3为增量上升并在20步后停止
text-“请参阅 - 每个步骤都在3'！”

我可以弄清楚表格以及所有不同的单元格来正确显示所有这些但我现在卡住了不止一个计数器出现在单个页面上，所以我会很感激这一点上的任何帮助。< / p>

Answer 1

您遇到的问题是var counter = 0是一个全局变量。因此，如果您复制n多次粘贴脚本，则您将共享相同的变量。

我不确定你有多少编程经验，但最好的办法就是拥有一个计数功能。您的代码片段看起来像是错误地粘贴了它，但是你需要有一个函数，比如计数递增一个计数器并在它循环前达到12（或者你想要去的高）时将它包装起来。如果你不想让它循环，请删除if语句。

var k = 0;
function count() { 
  if (k == 12) k = 0;
  else k = k + 1;
  // update your divs now with the new value of k
}

然后你可以用interval函数执行它来计算每x个毫秒数。

<body onload='timer=setInterval("count()", 1000 );'>

然后有一个更新功能，用新值更新div。此函数会将乘数应用于当前计数器（k）值。

function updateDisplay(id, multiplier) {
  document.getElementById(id).innerHTML = k * multiplier;
}

然后，您可以使用count函数中的代码更新所有div容器，将所有这些包装在1到12的时间表中。

for (var n = 1; n <= 12; n++) { 
  updateDisplay("timer_container_" + n, n);
}

在您的HTML中，您只需添加12个div，每个div都带有ID，＆＃34; timer_container_1＆＃34;等

我将它作为练习留给读者将这些功能放在一起，并将所需的div放入HTML文件中。

如何在页面上包含多个计数器

1 个答案: