JS 時間處理

• 注意資料是 number 還是 string 最好統一
• 確保所有數字為正數
• 推薦使用函式庫 Moment.js
• JS30 倒數計時時鐘

大綱

• new Date()
• get 時間
• get 時區
• set 時間
• 時間轉成字串
• 應用

new Date()

• new Date(dateString)
• 不建議使用字串解析的方式建立 (各家瀏覽器不同)

// 當前時間
const time1 = new Date()

// 帶入從 1970起開始的毫秒數
// 可取得毫秒數後轉回時間，再進行比較
const time2 = new Date(毫秒數)

// 字串應能被 Date.parse()解析
const time3 = new Date(dateString)

const time4 = new Date(year,month,date,hour,min,ms)

get 時間

• getYear() 棄用勿用
• getMonth() 月份始為0
• getDay() 取得在一周中的第幾天，需自行轉換成星期O
• getUTC系 用法相同
• 取得 1970 毫秒數 三種方法相同結果

// 回傳自 1970/01/01 00:00:00 UTC 起的毫秒數
const time = new Date()
time.getTime()
time.valueof()
Date.now()  // 未傳參就跟當前比
Date.now(time) // 傳入即跟該時間比

  // 建立 Date() 物件
  const time = new Date()

  // 勿使用getYear() 不會取得你想要的結果
  // const getYear = time.getYear()
  
  // 範例
  const timeObj = {
    year: time.getFullYear(),
    // 月份從0~11 所以要補+1
    month: time.getMonth() + 1,
    date: time.getDate(),
    // 只會回傳數字，若要轉換成星期O要處理 (下有範例)
    weekday: time.getDay(),
    hour: time.getHours(),
    min: time.getMinutes(),
    sec: time.getSeconds(),
    ms: time.getMilliseconds(),
  }
  console.dir(timeObj)

get 時區

• getTimezoneOffset() 取得分鐘數差異
  Ex: [+8區為-480], [-3區為+180]
• 取得當前時區名稱 TimeZoneName

  const time = new Date()
  // time.getTimezoneOffset() 通常不會直接用
  // 一般用法
  const timeZone = -(time.getTimezoneOffset() / 60)
  
  // 取得當前時區名稱
  console.log(Intl.DateTimeFormat().resolvedOptions().timeZone)

set 時間

• 用於設定自行創立的 Date物件 (用於自訂活動時間)
• 皆會回傳 更改後日期 與 1970年 的毫秒差
• setUTC系 用法相同

  // 大雷... 此種設定方式為 2019/7/8, 月份0為始
  const event = new Date(2019, 6, 8)

  // 設定時間 給另一個時間物件
  const event1 = new Date('July 1, 1999');
  const event2 = new Date();
  event2.setTime(event1.getTime());

  // 設定 日期/年
  event.setDate(12) // 回傳 & 更改日期至 2019/7/12
  event.setFullYear(2000) // 回傳 & 更改年至 2000/7/12
  event.setFullYear(year, month, day)

  // 設定時間 (可多傳更小的單位)
  // 可傳超過會自動加上Ex:25hour
  event.setHours(hour,min,sec,ms)
  event.setMinutes(min,sec,ms)
  event.setSeconds(sec,ms)
  event.setMilliseconds(ms)

  // 注意傳入參數為 0~11 / day 1~31 可略
  event.setMonth(month, day)

時間轉成字串

• toString 轉成字串
• toDateString 轉成日期部分
• toTimeString 轉成時間部分
• toUTCString 轉成 UTC格式
• toISOString 轉成 ISO 格式

YYYY-MM-DDTHH:mm:ss.sssZ

  // 年,月(0始),日,小時,分,秒
  const event = new Date(2019, 6, 8, 1, 16, 7)

  // Mon Jul 08 2019 01:16:07 GMT+0800 (台北標準時間)
  console.log(event.toString())
  // JSON.stringify "2019-07-07T17:16:07.000Z"
  console.log(JSON.stringify(event))

  // toDateString 回傳日期部分字串 
  // Mon Jul 08 2019
  console.log(event.toDateString())

  // toTimeString() 回傳時間部分
  // 01:16:07 GMT+0800 (台北標準時間)
  console.log(event.toTimeString())

  // Sun, 07 Jul 2019 17:16:07 GMT
  console.log(event.toUTCString())

  // 2019-07-07T17:16:07.000Z
  // Z代表啥....?
  console.log(event.toISOString())

應用

• 計算兩個天數差
• 取得當月天數
• 轉換AMPM

  // 傳入日期 計算兩個時間差 (天數)
  // 傳入資料 new Date('7/13/2010')
  function diffTime(time1, time2) {
    // 取絕對值 在轉換成天數
    return ((Math.abs(time1 - time2)) / (1000 * 60 * 60 * 24))
  }
  
  // 取得當月天數
  function getMonthDays(year, month) {
    // 正號轉成數字用
    return new Date((+year), (+month), 0).getDate()
  }
  
  // 轉換成AMPM
  function formatAMPM(date) {
    let hours = date.getHours()
    let minutes = date.getMinutes()
    let ampm = hours >= 12 ? 'pm' : 'am'
    hours %= 12
    hours = hours || 12 // the hour '0' should be '12'
    minutes = ( minutes < 10 ) ? `0${minutes}` : minutes
    let strTime = `${hours}:${minutes} ${ampm}`
    return strTime
  }

計算函式執行時間

  // 使用 Date 物件
  let start = Date.now()
  
  doSomethingForALongTime() // 要計算執行時間的程式放在這裡
  
  let end = Date.now()
  let elapsed = end - start // 執行程式經過的毫秒數

  // 使用內建方法
  let start = new Date()
  
  doSomethingForALongTime() // 要計算執行時間的程式放在這裡
  
  let end = new Date()
  let elapsed = end.getTime() - start.getTime() // 執行程式經過的毫秒數

總範例

    const myTime = {
      lang: {
        weekDayEn: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
        weekDayCh: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
        monthCh: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        monthEn: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        monthShort: ['JAN', 'FEB', 'MAR', 'APR', 'May', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
      },
      // 要先建立 Date()物件，瀏覽器預設不見得存在
      currentTime: new Date(),
      setTime: 0, // 自訂時間，可用來作計時用
      tmpTime: 0, // 用來紀錄 計時中按暫停時剩餘秒數
      init() {
        console.log('現時年月日星期', myTime.getDateTime(myTime.currentTime))
        console.log('現時分秒毫秒', myTime.getDayTime(myTime.currentTime))

        // 轉換 AMPM 格式
        console.log('AMPM格式', myTime.formatAMPM(myTime.currentTime))

        // diffTime 範例
        const date1 = new Date('7/13/2010')
        const date2 = new Date('7/12/2010')
        console.log('比較兩日天數差', myTime.diffTime(date1, date2))
      },
      // 取得日期以上的時間 (年月日星期)
      getDateTime(tpmTime) {
        return {
          year: tpmTime.getFullYear(),
          // getMonth 從 0 ~ 11 所以要補加一
          month: tpmTime.getMonth() + 1,
          date: tpmTime.getDate(),
          // 取得星期文字
          weekday: this.lang.weekDayCh[tpmTime.getDay() - 1],
        }
      },
      // 取得日期以下的時間 (小時分鐘秒毫秒)
      getDayTime(tmpTime) {
        return {
          hour: tmpTime.getHours(),
          min: tmpTime.getMinutes(),
          sec: tmpTime.getSeconds(),
          ms: tmpTime.getMilliseconds(),
        }
      },
      // 傳入日期 計算兩個時間差 (天數)
      // 傳入資料 new Date('7/13/2010')
      diffTime(time1, time2) {
        // 取絕對值 在轉換成天數
        return ((Math.abs(time1 - time2)) / (1000 * 60 * 60 * 24))
      },
      // 取得當月天數
      getMonthDays(year, month) {
        // 正號轉成數字用
        return new Date((+year), (+month), 0).getDate()
      },
      //! 轉換成 AMPM 格式
      formatAMPM(date) {
        let hours = date.getHours()
        let minutes = date.getMinutes()
        let ampm = hours >= 12 ? 'pm' : 'am'
        hours %= 12
        hours = hours || 12 // the hour '0' should be '12'
        minutes = ( minutes < 10 ) ? `0${minutes}` : minutes
        let strTime = `${hours}:${minutes} ${ampm}`
        return strTime
      },
    }
    myTime.init()