Javascript，使秒表中的時間可編輯

Question

我試圖使我的javascript秒表在某種輸入框中運行，這樣，如果我想更改當前的計算時間，就可以編輯小時，分鍾或秒。 我嘗試將時間包裝在html標記中，但是時間不會從腳本發送到盒子中。 任何更好的想法如何使這項工作？

Java腳本

function _timer(callback)
{
    var time = 0;     //  The default time of the timer
    var status = 0;    //    Status: timer is running or stoped
    var timer_id;    //    This is used by setInterval function

    // this will start the timer
    this.start = function(interval)
    {
        interval = (typeof(interval) !== 'undefined') ? interval : 1000;

        if(status == 0)
        {
            status = 1;
            timer_id = setInterval(function()
            {
                switch(1)
                {
                    case 1:
                    if(time < 86400)
                    {
                        time++;
                        generateTime();
                        if(typeof(callback) === 'function') callback(time);
                   }
                   break;
                }
            }, interval);
        }
    }

    //  this will stop or pause the timer ex. timer.stop()
    this.stop =  function()
    {
        if(status == 1)
        {
            status = 0;
            clearInterval(timer_id);
        }
    }

    // Reset the timer to zero or reset it to your own custom time
    this.reset =  function(sec)
    {
        sec = (typeof(sec) !== 'undefined') ? sec : 0;
        time = sec;
        generateTime(time);
    }
    // This methode return the current value of the timer and sends it to the database
    this.getTime = function()
    {
        return time;
    }
    // This methode return the status of the timer
    this.getStatus
    {
        return status;
    }

    // This methode will render the time variable to hour:minute:second format
    function generateTime()
    {
        var second = time % 60;
        var minute = Math.floor(time / 60) % 60;
        var hour = Math.floor(time / 3600) % 60;

        second = (second < 10) ? '0'+second : second;
        minute = (minute < 10) ? '0'+minute : minute;
        hour = (hour < 10) ? '0'+hour : hour;

        $('div.timer span.second').html(second);
        $('div.timer span.minute').html(minute);
        $('div.timer span.hour').html(hour);
    }
}

var timer;

$(document).ready(function(e)
{
    timer = new _timer
    (
        function(time)
        {
            if(time == 0)
            {
                timer.stop();
            }
        }
    );
    timer.reset(0);
});

的HTML

<div class="timer">
    <span class="hour"></span>:<span class="minute"></span>:<span class="second"></span>
</div>
<div>
    <button onClick="timer.start(1000)">Start</button>
    <button onClick="timer.stop()">Stop</button>
    <button onClick="timer.reset(0)">Reset</button>
</div>

Answer 1

這是最終的工作解決方案。

Java腳本

function _timer(callback, interval)
{
var time = time || 0;     //  The default time of the timer
var status = 0;    //    Status: timer is running or stoped
var timer_id;    //    This is used by setInterval function
var interval = interval || 1000;
// this will start the timer
this.start = function()
{
            verifyTime();
    if(status == 0)
    {

        status = 1;
        timer_id = setInterval(function()
        {
            switch(1)
            {
                case 1:
                if(time < 86400)
                {
                    time++;
                    generateTime();
                    if(typeof(callback) === 'function') callback(time);
               }
               break;
            }
        }, interval);
    }
}

//  this will stop or pause the timer ex. timer.stop()
this.stop =  function()
{
    if(status == 1)
    {
        status = 0;
        clearInterval(timer_id);
    }
}

// Reset the timer to zero or reset it to your own custom time
this.reset =  function(sec)
{
    time = 0
    generateTime()
}
// This methode return the current value of the timer and sends it to the database
this.getTime = function()
{
    return time;
}
// This methode return the status of the timer
this.getStatus
{
    return status;
}

// This methode will render the time variable to hour:minute:second format
function generateTime()
{
    console.log(time);
    second = time % 60;
    minute = Math.floor(time / 60) % 60;
    hour = Math.floor(time / 3600) % 60;

    second = (second < 10) ? '0'+second : second;
    minute = (minute < 10) ? '0'+minute : minute;
    hour = (hour < 10) ? '0'+hour : hour;

    $('div.timer input.second').val(second);
    $('div.timer input.minute').val(minute);
    $('div.timer input.hour').val(hour);
}
function verifyTime()
{
    var verifySec =  Number($('div.timer input.second').val());
    second = time % 60;
    verifySec === second ? second = second : time += verifySec - second % 60;
            var verifyMin =  Number($('div.timer input.minute').val());
            minute = (verifyMin - Math.floor(time / 60)) * 60;
            verifyMin === minute ? minute = minute : time += (verifyMin - Math.floor(time / 60)) * 60;
            var verifyHour = Number($('div.timer input.hour').val());
            hour = ((verifyHour - Math.floor(time / 3600)) * 60) * 60;
            verifyHour === hour ? hour = hour : time += ((verifyHour - Math.floor(time / 3600)) * 60) * 60;
}
}

var timer;

$(document).ready(function(e)
{
    timer = new _timer
    (
        function(time)
        {
            if(time == 0)
            {
                timer.stop()
            }
        },
        1000
    );
    $('#start').click(timer.start)
    $('#stop').click(timer.stop)
    $('#reset').click(timer.reset)
    $('.hour').focus(timer.stop)
    $('.hour').focusout(timer.start)
    $('.minute').focus(timer.stop)
    $('.minute').focusout(timer.start)
    $('.second').focus(timer.stop)
    $('.second').focusout(timer.start)
});

的HTML

<div class="timer">
<input type='text' class="hour" />:<input type='text' class="minute" />:<input type='text' class="second" />
</div>
<div>
    <button id='start'>Start</button>
    <button id='stop'>Stop</button>
    <button id='reset'>Reset</button>
</div>