使用setInterval,clearInterval方法实现。
代码如下:{如果对你有帮助,可以给我个采纳吗,谢谢!! 点击我这个回答右上方的【采纳】按钮}。
<span class="language-xml"><span class="hljs-meta"><!doctype <span class="hljs-keyword">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"IE=edge,chrome=1"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span> 页面名称 < /title>
< /head>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"txtBtn"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"开始"</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"changeTime();"</span> /></span>
显示时间 <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text"</span>></span>00:00:00< /span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="language-javascript">
<span class="hljs-keyword">var</span> isStart = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">var</span> a = <span class="hljs-number">0</span>;
<span class="hljs-keyword">var</span> b = <span class="hljs-number">0</span>;
<span class="hljs-keyword">var</span> c = <span class="hljs-number">0</span>;
<span class="hljs-keyword">var</span> timer;
<span class="hljs-keyword">function</span> <span class="hljs-title function_">changeTime</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (!isStart) {
timer = <span class="hljs-built_in">setInterval</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){
a++;
<span class="hljs-keyword">if</span> (a>=<span class="hljs-number">60</span>) {
a=<span class="hljs-number">0</span>;
b++;
}
<span class="hljs-keyword">if</span> (b>=<span class="hljs-number">60</span>) {
b=<span class="hljs-number">0</span>;
c++;
}
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"text"</span>).<span class="hljs-property">innerHTML</span> = (c><span class="hljs-number">9</span>?<span class="hljs-attr">c</span>:<span class="hljs-string">"0"</span>+c)+<span class="hljs-string">";"</span>+(b><span class="hljs-number">9</span>?<span class="hljs-attr">b</span>:<span class="hljs-string">"0"</span>+b)+<span class="hljs-string">":"</span>+(a><span class="hljs-number">9</span>?<span class="hljs-attr">a</span>:<span class="hljs-string">"0"</span>+a);
}, <span class="hljs-number">1000</span>);
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"txtBtn"</span>).<span class="hljs-property">value</span> = <span class="hljs-string">"暂停"</span>;
isStart = <span class="hljs-literal">true</span>;
} <span class="hljs-keyword">else</span> {
<span class="hljs-built_in">clearInterval</span>(timer);
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"txtBtn"</span>).<span class="hljs-property">value</span> = <span class="hljs-string">"开始"</span>;
isStart = <span class="hljs-literal">false</span>;
}
}
< /script>
< /body>
< /html></span></span>
重发现一下代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
</head>
<body>
<input type="button" id="txtBtn" value="开始" onclick="changeTime();" />
显示时间 <span id="text">00:00:00</span>
<script type="text/javascript">
var isStart = false;
var a = 0;
var b = 0;
var c = 0;
var timer;
function changeTime() {
if (!isStart) {
timer = setInterval(function(){
a++;
if (a>=60) {
a=0;
b++;
}
if (b>=60) {
b=0;
c++;
}
document.getElementById("text").innerHTML = (c>9?c:"0"+c)+";"+(b>9?b:"0"+b)+":"+(a>9?a:"0"+a);
}, 1000);
document.getElementById("txtBtn").value = "暂停";
isStart = true;
} else {
clearInterval(timer);
document.getElementById("txtBtn").value = "开始";
isStart = false;
}
}
</script>
</body>
</html>