計時器啓動和暫停

我有一個腳本是用於計時器。我不知道如何創建一個開始按鈕。現在它在頁面加載時立即啓動。暫停按鈕也不起作用。計時器啓動和暫停

下面是我爲它創建了一個小提琴...

然後反正是有輸出文本後，計時器到期一樣：

時間到了！

由於某些原因，當您按暫停時，小提琴沒有顯示繼續按鈕，但暫停按鈕無功無用。

function stopwatch(btn) { 
    if (btn.value == "Pause") { 
     clearInterval(ticker); 
     btn.value = "Resume"; 
    } else {

來源

2015-09-04 Ralph

下拉是什麼？ –

允許使用多次。 – Ralph

所以現在你想要一個啓動和停止計時器的按鈕嗎？ –

你可以這樣做：

<button onClick="StartTimer()">Start</button> 

function StartTimer() { 
    //your code here 
}

來源

2015-09-04 04:02:29

它沒有工作。謝謝你嘗試！ – Ralph

的代碼似乎並沒有要在適當的jsfiddle行爲，所以我把它下載到我的本地機器。我發現計時器工作，暫停/恢復按鈕也起作用。

改變我做：

我從選擇標籤
移除onchange事件，我改變按鈕的值設置爲「開始」

我改變了秒錶（）函數來此：

function stopwatch(btn){ 
    if (btn.value == "Start"){ 
     start(); 
     btn.value = "Pause"; 
    } 
    else if (btn.value == "Pause"){ 
     clearInterval(ticker); 
     btn.value = "Resume"; 
    } 
    else { 
     ticker = setInterval(tick,1000); 
     btn.value = "Pause"; 
    } 
}

這是你在找什麼？

來源

2015-09-04 04:37:38

創建小提琴以顯示它的工作原理。 – Bugfixer

我注意到我犯了一個錯誤。我忘了包含jquery。現在我做到了。這裏是小提琴。 https://jsfiddle.net/czav0Leg/1/ 從下拉菜單中選擇一個值，然後單擊開始 –

PS。有兩個顯示計時器的地方。 #timer＆#countdown。我不知道爲什麼。我的代碼隻影響#countdown。 –

var timeInSecs; 
 
var ticker; 
 
var start_time; 
 
function Countdown(start) { 
 
    this.start_time = start === undefined ? "1:00" : start ; 
 
    this.target_id = "#timer"; 
 
    this.name = "timer"; 
 
    start_time = this.start_time; 
 
} 
 

 
Countdown.prototype.init = function() { 
 
    this.reset(); 
 
    ticker = setInterval(this.name + '.tick()', 1000); 
 
} 
 

 
Countdown.prototype.reset = function() { 
 
    time = this.start_time.split(":"); 
 
    this.minutes = parseInt(time[0]); 
 
    this.seconds = parseInt(time[1]); 
 
    this.update_target(); 
 
} 
 

 
Countdown.prototype.tick = function() { 
 
    if (this.seconds > 0 || this.minutes > 0) { 
 
     if (this.seconds == 0) { 
 
      this.minutes = this.minutes - 1; 
 
      this.seconds = 59 
 
     } else { 
 
      this.seconds = this.seconds - 1; 
 
     } 
 
    } 
 
    this.update_target() 
 
} 
 

 
Countdown.prototype.update_target = function() { 
 
    seconds = this.seconds; 
 
    if (seconds < 10) seconds = "0" + seconds; 
 
    $(this.target_id).val(this.minutes + ":" + seconds) 
 
} 
 

 

 
var timer = new Countdown(); 
 
timer.init(); 
 

 

 
function start() { 
 
    var s = document.getElementById("period").value; 
 
    document.getElementById("period").disabled = true; 
 
    startTimer(s); 
 
} 
 

 
function startTimer(secs) { 
 
    timeInSecs = parseInt(secs); 
 
    document.getElementById("countdown").style.color = "black"; 
 
    clearInterval(ticker); 
 

 
    ticker = setInterval("tick()", 1000); 
 
    tick(); // to start counter display right away 
 
} 
 

 
function tick() { 
 
    var secs = timeInSecs; 
 
    if (secs > 0) { 
 
     timeInSecs--; 
 
     showTime(secs); 
 
    } else { 
 
     timeInSecs--; 
 
     document.getElementById("countdown").style.color = "red"; 
 
     document.getElementById("countdown").innerHTML = "You have exceeded your time by " + (hhmmss(Math.abs(timeInSecs))); 
 
     document.getElementById("period").disabled = false; 
 
    } 
 
} 
 

 
function showTime(secs) { 
 
    var hours = Math.floor(secs/3600); 
 
    secs %= 3600; 
 
    var mins = Math.floor(secs/60); 
 
    secs %= 60; 
 
    var result = ((hours < 10) ? "0" : "") + hours + ":" + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs; 
 
    document.getElementById("countdown").innerHTML = result; 
 
} 
 

 
function stopwatch(btn) { 
 
    if (btn.value == "Pause") { 
 
     clearInterval(ticker); 
 
     btn.value = "Resume"; 
 
    } else { 
 
     btn.value = "Pause" 
 
     var timer = new Countdown($('#timer').val()); 
 
     timer.init(); 
 
    } 
 
} 
 

 
function hhmmss(secs) { 
 
    var hrs = Math.floor(secs/3600); 
 
    var mns = Math.floor(secs/60) % 60; 
 
    secs = secs % 60; 
 
    if (hrs < 10) hrs = "0" + hrs; 
 
    if (mns < 10) mns = "0" + mns; 
 
    if (secs < 10) secs = "0" + secs; 
 
    return mns + " minutes " + secs + " seconds"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<input type="text" id="timer"> 
 
<select id="period" onchange="start()"> 
 
    <option value="0">Select time required</option> 
 
    <option value="30">30 Seconds</option> 
 
    <option value="60">1 Minute</option> 
 
    <option value="300">5 Minutes</option> 
 
    <option value="900">15 minutes</option> 
 
    <option value="1800">30 minutes</option> 
 
    <option value="2700">45 minutes</option> 
 
    <option value="3600">60 minutes</option> 
 
    <option value="4500">75 minutes</option> 
 
    <option value="5400">90 minutes</option> 
 
    <option value="6300">105 minutes</option> 
 
    <option value="7200">120 minutes</option> 
 
</select> \t <span id="countdown" style="font-weight: bold;"></span> 
 
<br> 
 
<br> 
 
<input type="button" value="Pause" onclick="stopwatch(this);" />

來源

2015-09-04 05:02:46 RRK

暫停按鈕完全停止計時器。反正有消息說時間已經完成了嗎？ – Ralph

請試試這個先生：

var timeInSecs; 
var ticker; 
var start_time; 
function Countdown(start) { 
    this.start_time = start === undefined ? "1:00" : start ; 
    this.target_id = "#timer"; 
    this.name = "timer"; 
    start_time = this.start_time; 
} 

Countdown.prototype.init = function() { 
    this.reset(); 
    ticker = setInterval(this.name + '.tick()', 1000); 
} 

Countdown.prototype.reset = function() { 
    time = this.start_time.split(":"); 
    this.minutes = parseInt(time[0]); 
    this.seconds = parseInt(time[1]); 
    this.update_target(); 
} 

Countdown.prototype.tick = function() { 
    if (this.seconds > 0 || this.minutes > 0) { 
     if (this.seconds == 0) { 
      this.minutes = this.minutes - 1; 
      this.seconds = 59 
     } else { 
      this.seconds = this.seconds - 1; 
     } 
    } 
    this.update_target() 
} 

Countdown.prototype.update_target = function() { 
    seconds = this.seconds; 
    if (seconds < 10) seconds = "0" + seconds; 
    $(this.target_id).val(this.minutes + ":" + seconds) 
} 


var timer = new Countdown(); 
timer.init(); 


function start() { 
    var s = document.getElementById("period").value; 
    document.getElementById("period").disabled = true; 
    startTimer(s); 
} 

function startTimer(secs) { 
    timeInSecs = parseInt(secs); 
    document.getElementById("countdown").style.color = "black"; 
    clearInterval(ticker); 

    ticker = setInterval("tick()", 1000); 
    tick(); // to start counter display right away 
} 

function tick() { 
    var secs = timeInSecs; 
    if (secs > 0) { 
     timeInSecs--; 
     showTime(secs); 
    } else { 
     timeInSecs--; 
     document.getElementById("countdown").style.color = "red"; 
     document.getElementById("countdown").innerHTML = "You have exceeded your time by " + (hhmmss(Math.abs(timeInSecs))); 
     document.getElementById("period").disabled = false; 
    } 
} 

function showTime(secs) { 
    var hours = Math.floor(secs/3600); 
    secs %= 3600; 
    var mins = Math.floor(secs/60); 
    secs %= 60; 
    var result = ((hours < 10) ? "0" : "") + hours + ":" + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs; 
    document.getElementById("countdown").innerHTML = result; 
} 

function stopwatch(btn) { 
    if (btn.value == "Pause") { 
     clearInterval(ticker); 
     btn.value = "Resume"; 
    } else { 
     btn.value = "Pause" 
     var timer = new Countdown($('#timer').val()); 
     timer.init(); 
    } 
} 

function hhmmss(secs) { 
    var hrs = Math.floor(secs/3600); 
    var mns = Math.floor(secs/60) % 60; 
    secs = secs % 60; 
    if (hrs < 10) hrs = "0" + hrs; 
    if (mns < 10) mns = "0" + mns; 
    if (secs < 10) secs = "0" + secs; 
    return mns + " minutes " + secs + " seconds"; 
}

DEMO

我認爲這將是更好，如果你將創建時鐘對象。查看代碼（請參閱演示：DEMO1）

來源

2015-09-04 05:33:35

計時器啓動和暫停

回答

相關問題