Question

如果您知道14dayz，您将看到那些项目/任务计时器。它们存在一个保持时间（00:00）的输入框和一个可以启动或暂停计时器的切换按钮。当计时器处于活动状态时，输入中的值每秒都会更新。

当您第二天回访时，将从数据库加载时间，您可以开始计时停止的时间。

然而，在开始处理项目/任务时，您可能会忘记按下按钮。这就是为什么计时器允许你手动编辑输入值到00:45之类的东西。在输入值后点击按钮时，它只是从那一点开始。

在我的项目中，我已经使用jquery.timer.js，所以我想将它用于这类计时器。

我有这样的HTML构建：

<div class="input-append">
    <input class="span2" id="time" type="text" value="00:20:00">
    <button class="btn btn-toggle-timer" type="button"><i class="icon-time"></i></button>
</div>

从00:00开始或00:20之间的存储时间（db）时，它可以正常工作。但是，如果我暂停计时器，编辑值并再次播放它，它将跳回到我暂停时输入中的时间。它似乎是jQuery计时器插件的默认行为。我已经拍了好几张照片来重建他们的example1（秒表），所以它符合我的需要。现在我开始相信黑魔法与它有关。

我尝试了最后的js：

var Example1 = new (function() {
    var $stopwatch, // Stopwatch element on the page
    incrementTime = 1000, // Timer speed in milliseconds
    currentTime, // Current time in hundredths of a second
    updateTimer = function() {
        $stopwatch.val(formatTime(currentTime));
        currentTime += incrementTime / 10;
        Example1.Timer.remaining = currentTime;
    },
    init = function() {
        $stopwatch = $("#time");
        currentTime = unformatTime();
        console.log(currentTime);
        Example1.Timer = $.timer(updateTimer, incrementTime, false);
    };
    this.play = function(reset) {
        if(!this.Timer.isActive) {
            if(reset) {this.Timer.setTimer();}
            else {this.Timer.setTimer(this.currentTime);this.currentTime = unformatTime();}
            this.Timer.isActive = true;
        }
        return this;
    };
    this.pause = function() {
        if(Example1.Timer.isActive) {
            Example1.Timer.isActive = false;
            Example1.Timer.remaining -= unformatTime() - Example1.Timer.last;
            Example1.Timer.clearTimer();
        }
        return this;
    };
    this.toggle = function(reset) {
        if(Example1.Timer.isActive) {
            this.pause();
        }
        else if(reset) {this.play(true);}
        else {
            this.play();
        }
        return this;
    };
    this.resetStopwatch = function() {
        currentTime = 0;
        this.Timer.stop().once();
    };
    $(init);
});
// Common functions
function pad(number, length) {
    var str = "" + number;
    while (str.length < length) {str = "0" + str;}
    return str;
}
function formatTime(time) {
    var min = parseInt(time / 6000),
        sec = parseInt(time / 100) - (min * 60),
        hundredths = pad(time - (sec * 100) - (min * 6000), 2);
    return (min > 0 ? pad(min, 2) : "00") + ":" + pad(sec, 2) + ":" + hundredths;
}
function unformatTime() {
    var timeEnd = $("#time").val();
    console.log(timeEnd);
    return (Number(timeEnd.split(":")[0]) * 6000) + ((Number(timeEnd.split(":")[1]) * 100) + (Number(timeEnd.split(":")[0]) / 60));
}

// Trigger for the toggle button
$(document).on('click', '.btn-toggle-timer', function(e) {
    Example1.toggle();
    $(this).toggleClass("btn-success").find("i").toggleClass("icon-pause icon-time");
}

我尝试设置jsFiddle但是我没有成功添加计时器插件。它不断抛出错误。

我希望有人知道我在这个问题上做错了什么。感谢您提供任何帮助。

Answer 1

[解决] 有时最好从项目中的可用插件退一步......

The working timers，如果有人有一天需要它。

$(document).on('click', '.btn-toggle-timer', function(e) {
    e.preventDefault();

    var trigger = $(this);
    var timer = trigger.parent().find('[name^=timer]');
    var timeValue = timer.val();

    timer.toggleClass('running paused');
    trigger.toggleClass('btn-success').find('i').toggleClass('icon-time icon-pause');
});

jQuery.fn.updateTimer = function() {
    $(".timer.running").each(function(){

        var timer = $(this),
        timeParts = timer.val().split(':'),
        hrs = parseInt(timeParts[0]),
        min = parseInt(timeParts[1]),
        sec = parseInt(timeParts[2]);

        if ( sec === 59 ) { 
            sec = 0; 
            min = min + 1;
        } else {
            sec = sec + 1;
        }
        if ( min === 60 ) { 
            min = 0;
            hrs = hrs + 1;
        }

        timer.val(pad(hrs,2)+':'+pad(min,2)+':'+pad(sec,2));
    });
};

setInterval(function() {
    $(document).updateTimer();
},  1000);

function pad(number, length) {
    var str = '' + number;
    while (str.length < length) {str = '0' + str;}
    return str;
}

从{jquery.timer.js示例中借用了pad()函数。

jQuery计时器：在暂停和播放之间改变值

1 个答案: