2025-01-27

Vue

About Time

new Date()：現在時間（字符）

1	new Date();

console.log(Wed Jan 04 2023 15:14:33 GMT+0800 (台北標準時間))

const dateObject = new Date() 
const year = new Date().getFullYear()  //年
const month = new Date().getMonth() //月＋1
const day = new Date().getDay() //星期幾
const date = new Date().getDate() //日期
const hour = new Date().getHours() //0-24 小時
const minute = new Date().getMinutes() //0-59 分鐘
const second = new Date().getSeconds() //0-59 秒
const ms = new Date().getMilliseconds() //0-999
const timestamp = new Date().getTime(); //時間搓

TimeStamp 時間搓

1	Date.now();

console.log(‘TimeStamp’,1672816660300)

UTC（Universal Time Coordinated : 世界統一時間、世界標準時間

GMT（格林威治標準時間），格林威治標準時間（也稱為格林威治時間）

Unix 时间戳:這是基於 UTC 1970.01.01 00:00:00 到現在的總秒數，所以這個總秒數全世界都是這樣的，也就是說 Unix 的時間戳和時區無關

timezone時區

1
2
3

const timezoneByMins = new Date().getTimezoneOffset() //-480
//除以60後正負相轉才是時區
const timezone = -(new Date().getTimezoneOffset()/60) //-8

台灣時間 UTC ＋8

const date = new Date()

console.log(date.toLocaleString())     //2023/01/04 下午4:33:41
console.log(date.toLocaleDateString())  //2023/01/04
console.log(date.toLocaleTimeString()) //下午4:33:41

日期字串格式

這個 ISO 8601 Extended Format 格式大概長這樣：

1	YYYY-MM-DDTHH:mm:ss.sssZ

表單type 取得的 time 為 ‘10:00’這種格式如何改為時間搓

邏輯：獲得現在時間＝>切割時間與分鐘＝> 設定時間與分鐘＝>獲得的時間字符getTime()

let now = new Date();
//表單type 取得的 time 為 '10:00'
const hourMinute = '10:00';
//split() 方法可以用來根據你指定的分隔符號，將字串切割成一個字串陣列。
var [hour, minute] = hourMinute.split(':');
now.setHours(hour) ;//setHours()方法依據本地時間來設定日期物件中的小時
now.setMinutes(minute);//setMinutes()方法依據本地時間來設定日期物件中的分鐘
now.setSeconds(0);
now.setMilliseconds(0);

console.log('現在時間',now) // Sat Apr 20 2024 10:00:00 GMT+0800 (台北標準時間);
console.log('時間搓',now.getTime()) // now.getTime()

控制時間與製作計時器的函式

setTimeout：延遲了某段時間後，才去執行的指定的程式碼，只會執行一次就結束

//一秒後執行
setTimeout( 
    ()=>{
        alert("Hello!");
    }
,1000)

時鐘setInterval:設定時間的間隔

//無限次的設置定時器執行

<template>
<div>
 <div  class="today">{{ today }}</div>
 <div  class="time">{{ time }}</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
//moment時間套件
import moment from 'moment';

const today = ref<any>(moment(new Date()).format("yyyy MM DD"));
const time = ref<any>();
onMounted(()=>{
    setInterval(()=>{
         time.value = new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds();
    },1000)
})
</script>

Lara Blog