计时器启动和暂停

我有一个脚本是用于计时器。我不知道如何创建一个开始按钮。现在它在页面加载时立即启动。暂停按钮也不起作用。计时器启动和暂停

下面是我为它创建了一个小提琴...

然后反正是有输出文本后，计时器到期一样：

时间到了！

由于某些原因，当您按暂停时，小提琴没有显示继续按钮，但暂停按钮无功无用。

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

计时器启动和暂停

回答

相关问题