用Javascript处理格式化时间

Processing formatted time with Javascript

本文关键字：时间 格式化 处理 Javascript      更新时间：2023-09-26

假设我有一个电视节目的开始时间和持续时间，格式为:10:05。
我想做的是当有人输入程序数据并输入程序的开始时间和持续时间时，我的代码将把它们加在一起并自动填充下一个程序的开始时间。

我试图将这些时间转换为秒，然后在操作后将它们再次转换为格式化的时间，但我不知道如何做到这一点。

function processTime(time) {    
    if (typeof time !== 'undefined') {
        var times = time.split(":");
        var minutes = times[0];
        var seconds = times[1];
        seconds = parseInt(seconds, 10) + (parseInt(minutes, 10) * 60);
    } else {
        var seconds = null;
    }
    return seconds;
}
function createTime(timestamp) {
    var output;
    if (typeof timestamp !== 'undefined') {
        // Problem is here, my timestamp is not standard unix timestamp
        var time = new Date(timestamp * 1000);
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        output = minutes + ":" + seconds;
    }
    return output;
}
$progForm.delegate(".program-duration", 'keyup', function() {
        $(this).on('focusout', function() {
            var duration = processTime($(this).val());
            var startTime = processTime($(this).parent().prev().find(".program-time").val());
            if (duration && typeof duration !== 'undefined' && startTime && typeof startTime !== 'undefined') {
                var nextStart = duration + startTime;
                var $nextProgramTime = $(this).parent().parent().next().find(".program-time");
                if (parseInt($nextProgramTime.val()) < 1) {
                    $nextProgramTime.val(createTime(nextStart));
                }
            }
        });
    });



<form>
    <table>
        <tbody class="programs-inputs">
            <tr>
                <td><input type="text" class="program-time timepicker input-mini" name="programs[time][]" placeholder="00:00" /></td>
                <td><input type="text" class="program-duration timepicker input-mini" name="programs[duration][]" placeholder="00:00" /></td>
            </tr>
            <tr>
                <td><input type="text" class="program-time timepicker input-mini" name="programs[time][]" placeholder="00:00" /></td>
                <td><input type="text" class="program-duration timepicker input-mini" name="programs[duration][]" placeholder="00:00" /></td>
            </tr>
        </tbody>
    </table>
</form>

使用你的processTime算法的逆:

function createTime(timestamp) {
    if (typeof timestamp == 'number') {
        var seconds = timestamp % 60;
        var minutes = (timestamp - seconds) / 60;
       return ("0"+minutes).slice(-2) + ":" + ("0"+seconds).slice(-2);
    }
}

你最初的尝试是正确的，只是它不是跨时区的。当new Date(timestamp * 1000);构造一个从1970年1月1日00:00:00 UTC开始的毫秒值时，getMinutes()和getSeconds()方法将返回当前本地时区的时间戳值-这可能是半小时。切换到它们的UTC等效值(.getUTCMinutes(), .getUTCSeconds())，它将工作。使用Date对象的解决方案将为您节省很多麻烦，一旦您需要包括小时数，甚至可能是完整的日期:-)

unix时间戳显示从1970年新年开始的时间。由于您只对时间而不是日期感兴趣，所以unix时间戳可能不适合。

var seconds = totalSeconds;
var hours = Math.floor(seconds / 3600);
seconds -= hours * 3600;
var minutes = Math.floor(seconds / 60);
seconds -= minutes * 60;
var timeString = leadingZero(hours) + ':' + leadingZero(minutes) + ':' + leadingZero(seconds);

这不会给你前导零，但这应该很容易修复。

function leadingZero(num) {
    var str = '';
    if (num < 10) {
        str += '0';
    }
    return str + num;
}
相关文章：