時分秒計算器

一、計算器功能

時分秒計算器是一款功能完善的計算器，它可以進行以下計算：

* 計算兩個時間之間的時間差

* 計算一個時間加上某個時間差後的時間

* 將一個時間轉換為秒數

* 將秒數轉換為時間

* 對時間按照某個時間間隔取整

二、時分秒計算器的架構

時分秒計算器的架構分為三層：

* UI層：界面展示和用戶交互

* Logic層：計算器邏輯實現

* Data層：存儲計算器需要的數據，如時間格式等

三、UI層實現

時分秒計算器界面使用HTML和CSS進行實現，使用JavaScript進行交互。具體實現代碼如下：

const startInput = document.getElementById('start-time'); // 獲取開始時間輸入框
const endInput = document.getElementById('end-time'); // 獲取結束時間輸入框
const diffLabel = document.getElementById('diff-label'); // 獲取時間差展示標籤
const addLabel = document.getElementById('add-label'); // 獲取加法計算展示標籤

// 綁定按鈕點擊事件
document.getElementById('diff-btn').addEventListener('click', function() {
  const start = startInput.value;
  const end = endInput.value;
  const diff = calculateDiff(start, end); // 調用Logic層函數計算時間差
  diffLabel.innerHTML = '時間差為：' + diff; // 展示計算結果
});

document.getElementById('add-btn').addEventListener('click', function() {
  const time = startInput.value;
  const diff = document.getElementById('add-input').value;
  const result = calculateAdd(time, diff); // 調用Logic層函數進行加法計算
  addLabel.innerHTML = '相加後的時間為：' + result; // 展示計算結果
});

四、Logic層實現

時分秒計算器的計算邏輯實現主要在Logic層中，具體實現代碼如下：

// 計算時間差函數
function calculateDiff(start, end) {
  const startSeconds = convertToSeconds(start); // 轉換開始時間為秒數
  const endSeconds = convertToSeconds(end); // 轉換結束時間為秒數
  const diffSeconds = endSeconds - startSeconds; // 計算時間差的秒數
  return convertSecondsToTime(diffSeconds); // 將計算結果轉換為時間格式並返回
}

// 時間加法計算函數
function calculateAdd(time, diff) {
  const timeSeconds = convertToSeconds(time); // 轉換時間為秒數
  const diffSeconds = parseInt(diff); // 將時間差轉換為數字類型，並轉換為秒數
  const totalSeconds = timeSeconds + diffSeconds; // 計算時間總秒數
  return convertSecondsToTime(totalSeconds); // 將計算結果轉換為時間格式並返回
}

// 轉換時間為秒數函數
function convertToSeconds(time) {
  const parts = time.split(':'); // 將時間按小時、分鐘、秒數格式進行拆分
  const seconds = parseInt(parts[0])*3600 + parseInt(parts[1])*60 + parseInt(parts[2]); // 將每部分轉換為秒數並相加
  return seconds;
}

// 將秒數轉換為時間格式函數
function convertSecondsToTime(seconds) {
  const hours = Math.floor(seconds/3600); // 計算小時數
  const minutes = Math.floor((seconds - hours*3600)/60); // 計算分鐘數
  const secondsLeft = seconds - hours*3600 - minutes*60; // 計算剩餘秒數
  return `${pad(hours)}:${pad(minutes)}:${pad(secondsLeft)}`; // 將每部分填充成兩位數，並用冒號進行拼接
}

// 對小於10的數字進行前導填充
function pad(num) {
  return num.toString().padStart(2, '0');
}

五、Data層實現

時分秒計算器需要對時間格式進行處理、存儲和展示。Data層主要實現以下功能：

* 存儲時間格式常量

* 將時間轉換為秒數或時間格式進行展示

具體實現代碼如下：

// 定義時間格式常量，方便跨層次調用
const TIME_FORMAT = 'HH:mm:ss';

// 將時間格式轉換為秒數
function convertTimeToSeconds(time) {
  return moment.duration(time, TIME_FORMAT).asSeconds(); // 使用moment.js庫轉換時間為秒數
}

// 將秒數轉換為時間格式
function convertSecondsToTime(seconds) {
  const duration = moment.duration(seconds, 'seconds'); // 使用moment.js庫轉換秒數為持續時間
  return duration.format(TIME_FORMAT); // 將持續時間格式化為時間格式並返回
}

六、總結

時分秒計算器是一款功能實用的計算器，具有多項實用計算功能，架構清晰，邏輯精準。在代碼實現中，UI層使用HTML、CSS和JavaScript進行實現，Logic層實現了計算功能的精細邏輯，Data層對時間格式進行處理和存儲。整個計算器實現了高內聚、低耦合的目標，且代碼易於閱讀、維護和擴展，具備很好的代碼質量。