javascript - JS 时间跟踪器未按预期工作

Question

我有一个主要使用 javascript 的计时器，目前启动/停止功能工作正常。当用户点击“停止”按钮时，它从#time 元素获取时间，将其转换为十进制值并更新隐藏的#counter 元素。例如 1 个半小时将转换为 1.50

我的问题是我还想允许用户手动编辑时间，所以我创建了一个小插件来实现这一点。

有2个问题:

1. 如果用户通过双击该元素手动添加他们的时间并进行调整然后点击保存，#counter 元素尚未更新，因此它提交的时间为 0。
2. 如果用户手动设置时间，然后点击“开始”按钮，时钟将从 0 开始，而不是他们指定的时间。

我在这里有一个 JS Fiddle:https://jsfiddle.net/pkj7wyLu/

在该 fiddle 的 JS block 底部，您将看到:

//implement plugin
        $('span#time').editable().on('editsubmit', function (event, val) {
            console.log('text changed to ' + millisecondsToHours(val));
        });

我相信这是每次用户手动输入时间时都会触发的事件。

问题:当有人手动输入时间时，我该如何使用转换后的值自动更新#counter 字段，如果他们按下开始，它会从那个时间开始？

我尝试了什么:我尝试使用 format(Time) 函数并让它当前尝试将值打印到控制台，但我没有得到结果

Answer 1

我已经在您的 clsStopwatch 类上创建了一个覆盖方法，如下所示:

this.override = function(time) {
        lapTime = time;
}

这将更新 lapTime，以毫秒为单位传递时间。为此，我创建了一个接受字符串的新函数:

function stringToMilliseconds(str) {
        var a = str.split(':'); // split it at the colons
        var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]); 
        return seconds * 1000;
}

这将从 id #time 元素跨度中的已编辑字符串返回毫秒数。

最后，我更新了提交可编辑事件以调用覆盖:

$('span#time').editable().on('editsubmit', function (event, val) {
        x.override(stringToMilliseconds(val));
});

这是更新的 JSFiddle

希望对您有所帮助。