3

我想要一个视频持续时间的滑块，范围从 00:00:10 到 01:30:00。我以毫秒为单位获得持续时间，我也需要以毫秒为单位发送它们。我noUiSlider.create用我的 2 个格式化函数和一个update事件处理程序调用：

var timeSlider = document.getElementById('timelineranger');

noUiSlider.create(timeSlider, {
    start: [10000, 5400000],
    connect: true,
    behaviour: 'tap-drag',
    step: 10000,
    range: {
        'min': 10000,
        'max': 5400000
    },
    format: {
        to: HHMMSSToms,
        from: msToHHMMSS
    }
});

function msToHHMMSS(value) {
    var duration = moment.duration(parseInt(value, 10));
    var addZero = function(v) { return (v<10 ? '0' : '') + Math.floor(v); };

    var time = addZero(duration.hours()) +
        ':' + addZero(duration.minutes()) +
        ':' + addZero(duration.seconds());
    return time;
}

function HHMMSSToms(value) {
    var a = value.toString().split(':');
    var ms = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]) * 1000;
    return ms;
}

timeSlider.noUiSlider.on('update', function (values, handle) {
    if (handle) {
        $('.timeMax').text(values[handle]);
    } else {
        $('timeMin').text(values[handle]);
    }
});

问题是该msToHHMMSS函数被调用 3 次，使用 的值10000，5400000然后再次使用10000，然后 HHMMSSToms被调用但使用 的值undefined并抛出错误：Cannot read property 'split' of undefined。

我看过这个问题，但正如我一开始所说的，我需要hh:mm:ss格式。

4

1 回答 1

1

如果您不使用format选项初始化滑块，而只转换更新函数中的值，也许可以，如下所示：

timeSlider.noUiSlider.on('update', function (values, handle) {
    if (handle) {
        $('.timeMax').text(msToHHMMSS(values[handle]));
    } else {
        $('timeMin').text(msToHHMMSS(values[handle]));
    }
});

或者您是否还有其他地方也想显示时间格式？

于 2016-01-19T15:01:55.780 回答