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

您需要再次呼叫更新。但为此，您需要将更新放在.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">

例子::小提琴

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

Javascript计时器：恢复按钮

3 个答案:

的Javascript

HTML

例子::小提琴