JS Time Tracker未按预期工作

I have a timer mainly using javascript, currently the start/stop functionality works fine. When user hits "Stop" button it takes the time from the #time element, converts it to decimal value and updates the hidden #counter element. For example an 1 and a half hours would be converted to 1.50

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

My problem is I also want to allow users to edit the time manually so I have a little plugin that was created to do allow for this.

我的问题是我也想让用户手动编辑时间,所以我有一个小插件,创建允许这样做。

There are 2 problems:

有两个问题:

If a user manually adds their time by double clicking the element and adjusting then were to hit save, the #counter element has not be updated so it is submitting the time as 0.

如果用户通过双击元素手动添加时间并调整然后点击保存,则#counter元素不会更新,因此它将时间提交为0。

If a user were to manually set their time and then hit the Start button, the clock starts from 0 instead of the time they specified.

如果用户要手动设置时间然后点击“开始”按钮,则时钟从0开始,而不是从指定的时间开始。

I have a JS Fiddle available here: https://jsfiddle.net/pkj7wyLu/

我这里有一个JS小提琴:https://jsfiddle.net/pkj7wyLu/

Toward the bottom of the JS block in that fiddle you will see:

在那个小提琴的JS块的底部你会看到:

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

which I believe is the event that fires each time the user manually enters time.

我认为是每次用户手动输入时间时触发的事件。

Question: How can I make it where when someone manually enters time that it automatically updates the #counter field with the converted values and if they press start it starts from that time?

问题:如果有人手动输入时间,它会自动更新带有转换值的#counter字段,如果按下启动它从那个时间开始?

What I tried: I tried playing with the format(Time) function and have it currently trying to print the value to the console but I am not getting results

我尝试了什么:我尝试使用格式(时间)功能并让它当前尝试将值打印到控制台但我没有得到结果

1 个解决方案

#1

I have created an override method on your clsStopwatch class, like so:

我在你的clsStopwatch类上创建了一个覆盖方法,如下所示:

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

This will update the lapTime, passing in a time in milliseconds. To do this I created a new function which accepts a string:

这将更新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;
}

This will return the number of milliseconds from the edited string in the id #time element span.

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

Finally, I updated the submit editable event to call the override:

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

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

Here is the updated JSFiddle

这是更新的JSFiddle

Hope that helps.

希望有所帮助。

#1