                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

怎么讓一個計時器可以不停地暫停和開始呢

<!DOCTYPE HTML>

<html>

<head>

? ?function clock(){

? ? ? var time=new Date(); ? ?

? ? ? var atime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();

? ? ? document.getElementById("cloc").value = atime;

? ?}

?var aa=setInterval("clock()",2000);

</script>

</head>

<body>

? <form>

? ? <input type="text" id="cloc" size="50" ?/>

? ? <input type="button" value="Stop" onclick="clearInterval(aa)" ? />

? </form>

</body>

</html>

這個計時器只能暫停一次，再點開始就沒有了計時器的功能了

隔壁諸葛村夫

2016-09-18

源自：JavaScript進階篇 8-4

關注問題我要回答

8556

操作

收起

8 回答

向死而生3491500 回答被采納 +3 積分
2016-09-18

看了一下各位的代碼，把我剛做的倒計時加了個開始和停止。。。

?????分析原理：

定義一個變量裝時間函數“sh = setTimeout(setTime,500) ‘’; ???
網頁開始時是開始及時的，開始（setTimeout）和停止（?clearInterval）應在設置時間函數的外面去控制

0 回復有任何疑惑可以回復我~

收起回答

隔壁諸葛村夫提問者

看起來很炫酷，但是你這停止了之后就沒法再次開始了，

2016-09-18 回復有任何疑惑可以回復我~

向死而生3491500 回復隔壁諸葛村夫提問者

有開始和停止兩個單擊事件按鈕，可以重新開始。。。

2016-09-18 回復有任何疑惑可以回復我~

隔壁諸葛村夫提問者回復向死而生3491500

但是，我在運行你的程序時，我先按停止，確實生效了，但我再按開始沒有任何反應啊，時間并沒有繼續走動

2016-09-18 回復有任何疑惑可以回復我~

查看2條回復

深淵大魔王4100108
2016-10-12

<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>計時器</title>
<script?type="text/javascript">
???function?clock(){
??????var?time=new?Date();???????????????	??
??????document.getElementById("clock").value?=?time;
???}
????var?myvalue=setInterval(clock,1000);?
????function?cclock()
????{
????????myvalue=setInterval(clock,1000);?
????}
</script>
</head>
<body>
??<form>
????<input?type="text"?id="clock"?size="50"??/>
????<input?type="button"?id="stop"?value="Stop"?onClick="clearInterval(myvalue)"?/>
????<input?type="button"?id="continun"?value="continun"?onClick="cclock()"/>
??</form>
</body>
</html>

我做這題的時候也想設置一個開始按鈕 ?我這么寫自己測試是可以實現開始跟暫停但不知道有沒有什么其他問題

0 回復有任何疑惑可以回復我~

收起回答

深淵大魔王4100108

額，倒是是計時器還是倒計時器啊。。。

2016-10-12 回復有任何疑惑可以回復我~

隔壁諸葛村夫提問者
2016-09-18

<!DOCTYPE HTML>

<html>

<head>

? var a;

function clock(){

? ? ? var time=new Date(); ? ?

? ? ? var atime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();//獲取具體時間

? ? ? document.getElementById("cloc").value = atime;//將獲取的時間在文本框內顯示出來

}

function p(){

? a=setInterval("clock()",2000);//計時器

? ? }

? function q(){

? clearInterval(a);//清除計時器

? }

</script>

</head>

<body>

? <form>

? ? <input type="text" id="cloc" size="50" ?/>

? ? <input type="button" value="Stop" onclick="q()" ? />

? </form>

</body>

</html>

我把這個計時器重新寫了下，點開始時才開始計時。

0 回復有任何疑惑可以回復我~

收起回答

向死而生3491500

一般情況下，獲取動態時間都應設置500毫秒，開始運行你的代碼時，我還以為你開了2個計時器，你寫的這個和我上面的一樣。。。

2016-09-18 回復有任何疑惑可以回復我~

隔壁諸葛村夫提問者回復向死而生3491500

是一樣的，只是你用到知識更多，

2016-09-18 回復有任何疑惑可以回復我~

向死而生3491500
2016-09-18

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ??? ?<script type="text/javascript" language="JavaScript">
?? ??? ??? ?var sh;
?? ??? ??? ?window.onload = function(){
?? ??? ??? ??? ?setTime();
?? ??? ??? ?}
?? ??? ??? ?function checkTime(t){
?? ??? ??? ??? ?if(t<10){
?? ??? ??? ??? ??? ?t="0"+t;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?return t;
?? ??? ??? ?}
?? ??? ??? ?function setTime(){
?? ??? ??? ??? ?var nowTime = new Date(); ??? ??? ??? ?? //當前系統時間
?? ??? ??? ??? ?var endTime = new Date("2016/10/01,00:00:00"); // 結束時間
?? ??? ??? ??? ?var chaTime = parseInt((endTime.getTime() - nowTime.getTime())/1000);//獲取時間戳?? getTime()將時間戳處理成毫秒數
?? ??? ??? ??? ?
?? ??? ??? ??? ?var d = Math.floor(chaTime/(24*60*60));? //天
?? ??? ??? ??? ?var h =?? ?Math.floor((chaTime/(60*60))%24);//時
?? ??? ??? ??? ?var m = Math.floor((chaTime/(60))%60);?? //分
?? ??? ??? ??? ?var s = Math.floor(chaTime%60);?? ??? ??? ? //秒
?? ??? ??? ??? ??? ?m = checkTime(m);
?? ??? ??? ??? ??? ?s = checkTime(s);
?? ??? ??? ??? ?
?? ??? ??? ??? ?if(chaTime<=0){
?? ??? ??? ??? ??? ?document.getElementById("showTime").innerHTML="團購結束";?? ?
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?document.getElementById("showTime").innerHTML=
?? ??? ??? ??? ?"距離10月1號還剩"+d+"天"+h+"時"+m+"分"+s+"秒";
?? ??? ??? ??? ?clearInterval(sh);//清除計時器
?? ??? ??? ??? ?}
?? ??? ??? ??? ?sh=setTimeout(setTime,500); ?
?? ??? ??? ?}
?? ??? ??? ??? ?var start = function(){
?? ??? ??? ??? ?sh=setTimeout(setTime,500); ?? ?
?? ??? ??? ??? ?}
?? ??? ??? ??? ?var stop = function(){?? ?
?? ??? ??? ??? ??? ?clearInterval(sh); ??? ?
?? ??? ??? ??? ?} ?
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ?<span id="showTime" style="color: red;"></span>
?? ??? ?<input type="button" value="停止倒計時"? onclick="stop()"/>
?? ??? ?<input type="button" value="開始倒計時"? onclick="start()"/>
?? ?</body>
</html>