用JS編寫的定時器手動設置時間

Question

我有一個計時器用於時間跟蹤。當我點擊開始或停止時，定時器工作得很好。現在我試圖讓用戶點擊#time標籤來手動編輯時間。一旦他們通過點擊定時器手動編輯時間並點擊開始，它應該從該「時間」開始，並且當他們點擊停止時，它應該更新隱藏的input#counter標籤以將其轉換爲毫秒。

我的問題是我如何讓用戶手動編輯時間，所以當他們點擊開始/停止計時器的工作原理基於新的時間？例如，如果我雙擊時間並將其設置爲10:00:00並按下開始，它應該從10:00:00開始，否則它會更新隱藏的輸入，因此當我單擊提交時，它會保存更新的時間

這裏是小提琴：https://jsfiddle.net/4pu3x62g/

這裏是HTML：

<div class="form-group timer"> 
    <span id="time"></span> 
</div> 

<div class="row"> 
    <div class="col-md-6 col-sm-6 col-xs-6"> 
     <input class="btn btn-success col-md-12 col-sm-12 col-xs-12" type="button" value="start" onclick="start();"> 
    </div> 

    <div class="col-md-6 col-sm-12 col-xs-6"> 
     <input class="btn btn-danger col-md-12 col-sm-12 col-xs-12" type="button" value="stop" onclick="stop();"> 
    </div> 
</div> 

<input type="hidden" value="" id="counter" name="counter" /> 

這裏是定時器JS

var clsStopwatch = function() { 

    var startAt = 0; 
    var lapTime = 0; 

    var now = function() { 
     return (new Date()).getTime(); 
    }; 

    this.start = function() { 
     startAt = startAt ? startAt : now(); 
    }; 

    this.stop = function() { 
     lapTime = startAt ? lapTime + now() - startAt : lapTime; 
     startAt = 0; 
    }; 

    this.time = function() { 
     return lapTime + (startAt ? now() - startAt : 0); 
    }; 
}; 

var x = new clsStopwatch(); 
var $time; 
var clocktimer; 

function pad(num, size) { 
    var s = "0000" + num; 
    return s.substr(s.length - size); 
} 

function formatTime(time) { 
    var h = m = s = ms = 0; 
    var newTime = ''; 

    h = Math.floor(time/(3600 * 1000)); 
    time = time % (3600 * 1000); 
    m = Math.floor(time/(60 * 1000)); 
    time = time % (60 * 1000); 
    s = Math.floor(time/1000); 
    ms = time % 1000; 

    newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2); 
    //newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2) + ':' + pad(ms, 2); 
    return newTime; 
} 

function show() { 
    $time = document.getElementById('time'); 
    update(); 
} 

function update() { 
    $time.innerHTML = formatTime(x.time()); 
} 

function start() { 
    clocktimer = setInterval("update()", 1); 
    x.start(); 
} 

function millisecondsToHours(amountMS) { 
    return amountMS/3600000; 
} 

function stop() { 
    x.stop(); 
    document.getElementById('counter').value = millisecondsToHours(x.time()); 
    clearInterval(clocktimer); 
} 

這裏是使跨度＃時可編輯插件：

//plugin to make any element text editable 
$.fn.extend({ 
    editable: function() { 
     $(this).each(function() { 
      var $el = $(this), 
      $edittextbox = $('<input type="text"></input>').css('min-width', $el.width()), 
      submitChanges = function() { 
       if ($edittextbox.val() !== '') { 
        $el.html($edittextbox.val()); 
        $el.show(); 
        $el.trigger('editsubmit', [$el.html()]); 
        $(document).unbind('click', submitChanges); 
        $edittextbox.detach(); 
       } 
      }, 
      tempVal; 
      $edittextbox.click(function (event) { 
       event.stopPropagation(); 
      }); 

      $el.dblclick(function (e) { 
       tempVal = $el.html(); 
       $edittextbox.val(tempVal).insertBefore(this) 
       .bind('keypress', function (e) { 
        var code = (e.keyCode ? e.keyCode : e.which); 
        if (code == 13) { 
         submitChanges(); 
        } 
       }).select(); 
       $el.hide(); 
       $(document).click(submitChanges); 
      }); 
     }); 
     return this; 
    } 
}); 

這裏就是事件觸發：

//implement editable plugin 
$('span#time').editable().on('editsubmit', function (event, val) { 
    //Need to trigger the timer with the new val from here 

}); 

Answer 1

運行這個片段中，其言自明。

$(function() { 
 

 
    // Some global variables 
 
    var startTime = 0, 
 
     elapsed = 0, 
 
     timerId = 0, 
 
     $timer = $("h1 span"); 
 
    
 
    function formatTime(time) { 
 
    var hrs = Math.floor(time/60/60/1000), 
 
     min = Math.floor((time - hrs*60*60*1000)/60/1000), 
 
     sec = Math.floor((time - hrs*60*60*1000 - min*60*1000)/1000); 
 
    
 
    hrs = hrs < 10 ? "0" + hrs : hrs; 
 
    min = min < 10 ? "0" + min : min; 
 
    sec = sec < 10 ? "0" + sec : sec; 
 
    
 
    return hrs + ":" + min + ":" + sec; 
 
    } 
 
    
 
    function elapsedTimeFrom(time) { 
 
    return formatTime(time - startTime + elapsed); 
 
    } 
 
    
 
    function showElapsed() { 
 
    $timer.text(elapsedTimeFrom(Date.now())); 
 
    } 
 
    
 
    function startTimer() { 
 
    // React only if timer is stopped 
 
    startTime = startTime || Date.now(); 
 
    timerId = timerId || setInterval(showElapsed, 1000); 
 
    } 
 
    
 
    function pauseTimer() { 
 
    // React only if timer is running 
 
    if (timerId) { 
 
     clearInterval(timerId); 
 
     elapsed += Date.now() - startTime; 
 
     startTime = 0; 
 
     timerId = 0; 
 
    } 
 
    } 
 
    
 
    function resetTimer() { 
 
    clearInterval(timerId); 
 
    $timer.text("00:00:00"); 
 
    startTime = 0; 
 
    elapsed = 0; 
 
    timerId = 0; 
 
    } 
 

 
    function editTimer() { 
 
    pauseTimer(); 
 
    $timer.prop("contenteditable", true); 
 
    $timer.css("border", "1px solid red"); 
 
    } 
 

 
    function setElapsed() { 
 
    var time = $timer.text(), 
 
     arr = time.split(":"); 
 
    $timer.prop("contenteditable", false); 
 
    $timer.css("border", "1px solid black"); 
 
    elapsed = parseInt(arr[0]*60*60, 10); 
 
    elapsed += parseInt(arr[1]*60, 10); 
 
    elapsed += parseInt(arr[2], 10); 
 
    elapsed *= 1000; 
 
    } 
 
    
 
    function sendTime() { 
 
    pauseTimer(); 
 
    // Set hidden input value before send 
 
    $("[name='time']").val(formatTime(elapsed)); 
 
    } 
 

 
    $("[name='start']").click(startTimer); 
 
    $("[name='stop']").click(pauseTimer); 
 
    $("[name='reset']").click(resetTimer); 
 
    $timer.dblclick(editTimer); 
 
    $timer.blur(setElapsed); 
 
    $("form").submit(sendTime); 
 
    
 
});

h1, h3, form { 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
} 
 
h1 span { 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
}

<h3>Double click on timer to edit time</h3> 
 
<h1><span>00:00:00</span></h1> 
 

 
<form action="#" method="post"> 
 
    <input type="button" name="start" value="Start"> 
 
    <input type="button" name="stop" value="Stop"> 
 
    <input type="button" name="reset" value="Reset"> 
 
    <input type="submit" name="action" value="Submit"> 
 
    <input type="hidden" name="time" value="00:00:00"> 
 
</form> 
 

 
<h3>Multiple clicks on buttons is properly handled also</h3> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>