JavaScript 如何在同一页面上包含多个计数器
javascript how to include more than one counter on the same page?
有人可以帮我在单个页面中实现两个javascript计数器吗? 我目前已启动并运行计数器,但是当我尝试为另一个计数器创建新的div时,原始计数器消失,仅显示一个计数器。 这是我的第一篇文章,所以请原谅任何混乱的格式。 我将非常感谢任何帮助,我对javascript很陌生。 谢谢!
这是我的代码:
<div id="counter"></div>
<div id="counter1"></div>
<script type="text/javascript">
var START_DATE = new Date("July 27, 2010 13:30:00"); // put in the starting date here
var INTERVAL = 1; // in seconds
var INCREMENT = 2; // increase per tick
var START_VALUE = 9001; // initial value when it's the start date
var count = 0;
window.onload = function()
{
var msInterval = INTERVAL * 1000;
var now = new Date();
count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
document.getElementById('counter').innerHTML = addCommas(count);
setInterval("count += INCREMENT; document.getElementById('counter').innerHTML =
addCommas(count);", msInterval);
}
</script>
<script type="text/javascript">
var START_DATE = new Date("July 27, 2011 13:30:00"); // put in the starting date here
var INTERVAL = 1; // in seconds
var INCREMENT = 2; // increase per tick
var START_VALUE = 8001; // initial value when it's the start date
var count = 0;
window.onload = function()
{
var msInterval = INTERVAL * 1000;
var now = new Date();
count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
document.getElementById('counter1').innerHTML = addCommas(count);
setInterval("count += INCREMENT; document.getElementById('counter1').innerHTML =
addCommas(count);", msInterval);
}
</script>
<script type="text/javascript">
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /('d+)('d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
</script>
您不能有两个window.onload
脚本,最后一个脚本将覆盖第一个脚本。
只需重用相同的代码,只需将下一个计数器添加到下一个div。
window.onload = function()
{
var msInterval = INTERVAL * 1000;
var now = new Date();
count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
document.getElementById('counter').innerHTML = addCommas(count);
setInterval("count += INCREMENT; document.getElementById('counter').innerHTML = addCommas(count);", msInterval);
document.getElementById('counter1').innerHTML = addCommas(count);
setInterval("document.getElementById('counter1').innerHTML = addCommas(count);", msInterval);
}
编辑:仅递增计数一次,否则第二个计数器始终领先于第一个计数器
相关文章:
- 如何创建包含多个视频的视频横幅
- 比较包含多个值对的两个JavaScript数组
- 需要一个用于AJAX的Javascript库,其中包含多部分/表单数据
- 在Knockout js中创建一个包含多行的表,而不需要推送
- 包含多个缩略图幻灯片的公文包
- 如何包含多个 jquery 版本以使多个 jquery 插件工作
- 如何检查url是否包含多个字符串.Javascript/jquery
- 一个表单包含多个提交操作
- 在一个网站上包含多个声音文件
- 包含多个'对象'
- 使用requirejs加载一个包含多个类的文件(grunt-concat)
- 一个动画javascript中包含多个图像
- 如何包含多个JS文件-延迟加载javascript
- 在包含多个单词的表中搜索
- 如何确保包含多个$.ajax调用的函数完全同步运行,并允许在执行时重新绘制浏览器
- Highcharts多个x轴,不包含多个系列
- 如何在Javascript中检查字符串是否包含多个空格并返回
- jQuery包含多个字符串优化
- (反应)如何在另一个组件中包含多个组件
- JavaScript 如何在同一页面上包含多个计数器