使用JavaScript處理格式化時間

Question

可以說我有這種格式的電視節目的開始時間和持續時間：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> 

Answer 1

只要用你的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 objects一起使用解決方案將爲您節省很多麻煩，一旦您需要包括小時，甚至可能包含完整的日期:-)

Answer 2

Unix時間戳顯示既然你是隻關心時間，沒有日期，UNIX時間戳，因爲新的一年1970年的時候可能是不適合的。你可以做與你以前做的相反的事。

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; 
}