Javascript 计时器：恢复按钮

Question

如何向这个 javascript 倒计时计时器添加恢复按钮？

JS

$(document).ready(function () {
var $worked = $("#timer");

function update() {
    var myTime = $worked.html();
    var ss = myTime.split(":");
    var dt = new Date();
    dt.setHours(ss[0]);
    dt.setMinutes(ss[1]);
    dt.setSeconds(ss[2]);

    var dt2 = new Date(dt.valueOf() - 1000);
    var temp = dt2.toTimeString().split(" ");
    var ts = temp[0].split(":");

    $worked.html(ts[0]+":"+ts[1]+":"+ts[2]);
    z = setTimeout(update, 1000);          
} 
setTimeout(update, 1000); 
});

HTML

<div id="timer">00:00:00</div>
<input type="button" onclick="clearTimeout(z)" value="pause">

https://jsfiddle.net/k9o6dj11/

Answer 1

使用间隔和变量来定义是否暂停，而不是超时。如果pause按钮被点击，update()函数将继续执行，但不会做任何事情。

https://jsfiddle.net/k9o6dj11/2/

var paused = false;

function update() {
    if (paused) return;
    ...                  
} 

setInterval(update, 1000); 

$('.pause').on('click', function () {
    paused = true;
});

$('.resume').on('click', function () {
    paused = false;
});

Answer 2

您需要再次调用update。但是为此，您需要将更新放在 .ready 闭包之外在 .ready 之前准备函数然后调用一次

JS:

var $worked;
var z;

function update() {
    clearTimeout(z);
    var myTime = $worked.html();
    var ss = myTime.split(":");
    var dt = new Date();
    dt.setHours(ss[0]);
    dt.setMinutes(ss[1]);
    dt.setSeconds(ss[2]);

    var dt2 = new Date(dt.valueOf() - 1000);
    var temp = dt2.toTimeString().split(" ");
    var ts = temp[0].split(":");

    $worked.html(ts[0]+":"+ts[1]+":"+ts[2]);
    z = setTimeout(update, 1000);          
} 


$(document).ready(function () {
    $worked = $("#timer");
    update(); 
});

HTML:

<div id="timer">00:00:00</div>
<input type="button" onclick="clearTimeout(z)" value="pause">
<input type="button" onclick="update()" value="resume">

你会注意到当你执行 update() 时你的代码仍然有问题，它总是执行 -1s。

Answer 3

简单清除超时并点击“恢复”设置另一个超时以更新您的倒计时：

Javascript

$(document).ready(function () {
    var $worked = $("#timer");
    var countDown;
    
    function update() {
        var myTime = $worked.html();
        var ss = myTime.split(":");
        var dt = new Date();
        dt.setHours(ss[0]);
        dt.setMinutes(ss[1]);
        dt.setSeconds(ss[2]);
        
        var dt2 = new Date(dt.valueOf() - 1000);
        var temp = dt2.toTimeString().split(" ");
        var ts = temp[0].split(":");
        
        $worked.html(ts[0]+":"+ts[1]+":"+ts[2]);
        resumeCount();       
    }
    
    var resumeCount = function(){
        countDown = setTimeout(update, 1000);
    }
    
    var pauseCount = function(){
        clearTimeout(countDown);
    }
    
    $(".pause_resume").on("click",function(e){
        e.preventDefault();
        if($(this).attr("value") == "pause"){           
            $(this).attr("value","resume");
            return pauseCount();
        }
        resumeCount();
        $(this).attr("value","pause")
    });
    
    resumeCount();
});

HTML

<div id="timer">00:00:00</div>
<input type="button" class="pause_resume" value="pause">

示例:: fiddle

https://jsfiddle.net/k9o6dj11/9/

Javascript 计时器：恢复按钮

Javascript timer: resume button

javascript

timer

Javascript

HTML

示例:: fiddle