我在做一个计时器,我希望当计时表中出现的数字小于10时,而不是1,2,3...,将出现在计时器01,02,03中...
function startchrono() {
var start = document.getElementById('start'),
reset = document.getElementById('reset'),
counter = document.getElementById('counter'),
sCounter = 0,
mCounter = 0,
hCounter = 0;
setInterval(function () {
sCounter++;
if (sCounter == 60) {
mCounter++;
sCounter = 0;
}
if (sCounter < 10) {
sCounter = "0" + sCounter;
}
if (mCounter < 10) {
mCounter = "0" + mCounter;
}
if (hCounter < 10) {
hCounter = "0" + hCounter;
}
counter.value = hCounter + " " + mCounter + " " + sCounter;
}, 1000);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Everything - everything you'll want is here.</title>
</head>
<body>
<script src="js/chronometer.js" charset="utf-8"></script>
<div class="w3-row w3-container">
<div class="w3-col m3 w3-text-red">
<p> </p>
</div>
<div class="w3-col m6 w3-center w3-text-white w3-xxlarge">
<p>
<i>Everything you'll want is here.</i>
</p>
</div>
<div class="w3-col m3 w3-text-red">
<p> </p>
</div>
</div>
<div class="w3-container w3-row">
<div class="w3-col m3 w3-text-red">
<p> </p>
</div>
<div class="w3-col m6 w3-center w3-xlarge w3-white w3-text-grey">
<p>
Chronometer
</p>
</div>
<div class="w3-col m3 w3-text-red">
<p> </p>
</div>
</div>
<div class="w3-container w3-row">
<div class="w3-col m3 w3-text-red">
<p> </p>
</div>
<div class="w3-col m6 w3-center w3-white w3-text-grey">
<input id="counter" type="text" name="name" value="00:00:00" readonly="readonly" class="w3-text-grey w3-center">
<br>
<p> </p>
<input id="start" type="button" name="name" value="Start!" class="w3-btn w3-green" onclick="startchrono()">
<input id="reset" type="button" name="name" value="Reset!" class="w3-btn w3-blue" onclick="reset();">
<p> </p>
</div>
<div class="w3-col m3 w3-text-red">
<p> </p>
</div>
</div>
</body>
</html>
您将每次迭代中的当前计数连接起来,从而将它们转换为字符串。快速的解决方案是在每次迭代开始时将变量"投射"为数字,如下所示:
mCounter = +mCounter;
hCounter = +hCounter;
sCounter = +sCounter;
请参阅 https://jsbin.com/tulipotafa/1/edit?html,js,output 或:
function startchrono() {
var start = document.getElementById('start'),
reset = document.getElementById('reset'),
counter = document.getElementById('counter'),
sCounter = 0,
mCounter = 0,
hCounter = 0;
setInterval(function () {
mCounter = +mCounter;
hCounter = +hCounter;
sCounter = +sCounter;
sCounter++;
if (sCounter == 60) {
mCounter++;
sCounter = 0;
}
if (sCounter < 10) {
sCounter = "0" + sCounter;
}
if (mCounter < 10) {
mCounter = "0" + mCounter;
}
if (hCounter < 10) {
hCounter = "0" + hCounter;
}
counter.value = hCounter + " " + mCounter + " " + sCounter;
}, 1000);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Everything - everything you'll want is here.</title>
</head>
<body>
<script src="js/chronometer.js" charset="utf-8"></script>
<div class="w3-row w3-container">
<div class="w3-col m3 w3-text-red">
<p> </p>
</div>
<div class="w3-col m6 w3-center w3-text-white w3-xxlarge">
<p>
<i>Everything you'll want is here.</i>
</p>
</div>
<div class="w3-col m3 w3-text-red">
<p> </p>
</div>
</div>
<div class="w3-container w3-row">
<div class="w3-col m3 w3-text-red">
<p> </p>
</div>
<div class="w3-col m6 w3-center w3-xlarge w3-white w3-text-grey">
<p>
Chronometer
</p>
</div>
<div class="w3-col m3 w3-text-red">
<p> </p>
</div>
</div>
<div class="w3-container w3-row">
<div class="w3-col m3 w3-text-red">
<p> </p>
</div>
<div class="w3-col m6 w3-center w3-white w3-text-grey">
<input id="counter" type="text" name="name" value="00:00:00" readonly="readonly" class="w3-text-grey w3-center">
<br>
<p> </p>
<input id="start" type="button" name="name" value="Start!" class="w3-btn w3-green" onclick="startchrono()">
<input id="reset" type="button" name="name" value="Reset!" class="w3-btn w3-blue" onclick="reset();">
<p> </p>
</div>
<div class="w3-col m3 w3-text-red">
<p> </p>
</div>
</div>
</body>
</html>
以这种方式使用 setInterval
会导致时钟发生相当大的漂移。
相反,您可以计算两个日期之间的差异。当您启动时钟时创建一个日期实例,并在每一步计算时差,然后根据自己的喜好对其进行格式化。假设now
和then
是日期对象,它将如下所示:
var diff = new Date(now - then);
var timeString = diff.toISOString().substr(11,8)