在JavaScript或Vue中獲取當(dāng)前時(shí)間并格式化輸出到精確的時(shí)分秒,你可以使用Date對(duì)象結(jié)合字符串拼接或者模板字符串來(lái)實(shí)現(xiàn)。下面是一個(gè)簡(jiǎn)單示例,展示了如何在Vue中完成這項(xiàng)任務(wù):
<template>
<div>
<p>當(dāng)前時(shí)間:{{ formattedTime }}</p>
</div>
</template>
<script>
export default {
data() {
return {
formattedTime: ''
};
},
mounted() {
this.updateTime();
setInterval(this.updateTime, 1000); // 每秒更新一次
},
methods: {
updateTime() {
const now = new Date();
// 使用模板字符串進(jìn)行格式化
this.formattedTime = `${now.getFullYear()}-${this.padZero(now.getMonth() + 1)}-${this.padZero(now.getDate())} ${this.padZero(now.getHours())}:${this.padZero(now.getMinutes())}:${this.padZero(now.getSeconds())}`;
},
// 輔助函數(shù),用于補(bǔ)零操作
padZero(num) {
return num < 10 ? '0' + num : num;
}
},
beforeDestroy() {
// 清除定時(shí)器,避免內(nèi)存泄漏
clearInterval(this.timer);
}
};
</script>
在這個(gè)示例中,我們?cè)赩ue組件的mounted生命周期鉤子中初始化了一個(gè)定時(shí)器,每秒鐘調(diào)用updateTime方法來(lái)更新當(dāng)前時(shí)間,并在組件銷毀前通過(guò)beforeDestroy鉤子清理定時(shí)器。
updateTime方法中,我們創(chuàng)建了一個(gè)新的Date對(duì)象來(lái)獲取當(dāng)前時(shí)間,然后使用模板字符串和輔助函數(shù)padZero來(lái)確保月份、日期、小時(shí)、分鐘和秒數(shù)如果是個(gè)位數(shù),則在其前補(bǔ)零,以便格式統(tǒng)一和美觀。
這樣,頁(yè)面上就會(huì)顯示一個(gè)實(shí)時(shí)更新的當(dāng)前時(shí)間,格式為“年-月-日 時(shí):分:秒”。
在Vue3中,雖然一些API和寫(xiě)法有所變化,但獲取和格式化當(dāng)前時(shí)間的基本邏輯與Vue2相似。以下是使用Vue3 Composition API的一個(gè)示例:
<template>
<div>
<p>當(dāng)前時(shí)間:{{ formattedTime }}</p>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
const formattedTime = ref('');
let timer = null;
const updateTime = () => {
const now = new Date();
formattedTime.value = `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
};
const padZero = (num) => {
return num < 10 ? '0' + num : num;
};
onMounted(() => {
updateTime();
timer = setInterval(updateTime, 1000); // 每秒更新一次
});
onBeforeUnmount(() => {
// 清除定時(shí)器
clearInterval(timer);
});
</script>
在這個(gè)Vue3的示例中,我們使用了Composition API來(lái)管理狀態(tài)和生命周期鉤子。ref用于定義響應(yīng)式數(shù)據(jù)formattedTime,而onMounted和onBeforeUnmount分別替代了Vue2中的mounted和beforeDestroy生命周期鉤子。
updateTime函數(shù)和padZero輔助函數(shù)的功能與Vue2示例相同,用于獲取當(dāng)前時(shí)間并進(jìn)行格式化處理,以及在數(shù)字小于10時(shí)前面添加零。
這樣,你就可以在Vue3應(yīng)用中實(shí)現(xiàn)實(shí)時(shí)更新并格式化顯示當(dāng)前時(shí)間的功能。
使用TypeScript可以為你的代碼增加類型安全。下面是如何封裝一個(gè)獲取并格式化當(dāng)前時(shí)間的公共函數(shù),這個(gè)函數(shù)可以在Vue3的項(xiàng)目中作為公共方法使用。
首先,在你的Vue3項(xiàng)目的某個(gè)公用文件夾(如src/utils)下創(chuàng)建一個(gè)名為dateTimeUtils.ts的文件,并編寫(xiě)如下代碼:
// src/utils/dateTimeUtils.ts
export function formatCurrentTime(): string {
const now = new Date();
return `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
}
function padZero(num: number): string {
return num < 10 ? '0' + num : num.toString();
}
這個(gè)模塊導(dǎo)出了一個(gè)formatCurrentTime函數(shù),它返回當(dāng)前時(shí)間的格式化字符串。同時(shí),內(nèi)部使用了padZero輔助函數(shù)來(lái)保證數(shù)字的格式正確。
然后,在你的Vue3組件中,你可以這樣使用這個(gè)公共函數(shù):
// 某個(gè)Vue3組件.vue文件
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { formatCurrentTime } from '@/utils/dateTimeUtils'; // 根據(jù)你的實(shí)際路徑調(diào)整
const formattedTime = ref('');
onMounted(() => {
formattedTime.value = formatCurrentTime();
setInterval(() => {
formattedTime.value = formatCurrentTime();
}, 1000);
});
</script>
<template>
<div>
<p>當(dāng)前時(shí)間:{{ formattedTime }}</p>
</div>
</template>
這里,我們導(dǎo)入了formatCurrentTime函數(shù),并在組件掛載時(shí)設(shè)置初始值,之后每秒更新一次顯示的時(shí)間。注意,為了避免潛在的內(nèi)存泄漏,如果組件需要銷毀時(shí)停止時(shí)間更新,你可能還需要在適當(dāng)?shù)纳芷阢^子中清除定時(shí)器,正如之前Vue2和Vue3 Composition API示例中所示。不過(guò),在此示例中為了保持簡(jiǎn)潔,省略了該部分代碼。
段時(shí)間發(fā)的五子棋的游戲很多小伙伴都私聊讓再做個(gè),今天小猿圈web前端講師為大家分享的是CSS3動(dòng)畫(huà)練習(xí)案例:用CSS3做個(gè)鐘表,想玩的小伙伴記得自己運(yùn)行一下呦。
自學(xué)CSS3屬性之后,我們來(lái)用一個(gè)小案例進(jìn)行一個(gè)綜合練習(xí),這個(gè)案例主要是動(dòng)畫(huà)的應(yīng)用,我們就用純css動(dòng)畫(huà)做一個(gè)能走字的鐘表。
首先我們來(lái)準(zhǔn)備HTML來(lái)布局一下:
<body>
<div class="clock">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
<div class="line6"></div>
<div class="cent"></div>
<div class="cover"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="seconds"></div>
</div>
</body>
布局很簡(jiǎn)單,六根直線通過(guò)旋轉(zhuǎn)一定角度做刻度一個(gè)中間小圓點(diǎn),一個(gè)遮罩來(lái)蓋住六根直線的中間部分,使直線變成刻度,后面三個(gè)是時(shí)分秒針。
下面通過(guò)CSS把鐘表的大概樣子設(shè)置出來(lái)。
.clock {
/* 創(chuàng)建圓形盒子當(dāng)做表盤(pán) */
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
border: 10px solid #000;
border-radius: 50%;
}
.clock div:nth-child(-n+6) {
/* 選中前6個(gè)子元素做出6條線當(dāng)做表的刻度 */
width: 6px;
height: 200px;
background-color: #aaa;
position: absolute;
left: 50%;
margin-left:-3px;
}
/* 讓6條線遞增旋轉(zhuǎn)30度 */
.clock div:nth-child(1) {
transform: rotate(30deg);
}
.clock div:nth-child(2) {
transform: rotate(60deg);
}
.clock div:nth-child(3) {
transform: rotate(90deg);
background-color: #333;
}
.clock div:nth-child(4) {
transform: rotate(120deg);
}
.clock div:nth-child(5) {
transform: rotate(150deg);
}
.clock div:nth-child(6) {
transform: rotate(0deg);
background-color: #333;
}
/* 中心小圓點(diǎn) */
.cent {
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%;
position:absolute;
z-index: 3;
left: 50%;
top:50%;
margin: -10px 0 0 -10px;
z-index:2;
}
/* 遮住線的中間部分,讓線成為刻度 */
.cover {
width: 180px;
height: 180px;
border-radius: 50%;
background-color: #fff;
position:absolute;
left: 50%;
top:50%;
margin:-90px 0 0 -90px;
}
后面加上中心圓點(diǎn)和遮罩,讓它看起來(lái)像個(gè)表盤(pán)。
接下來(lái)我們就可以準(zhǔn)備表針和動(dòng)畫(huà)了。
/* 時(shí)針制作 */
.hour {
width: 6px;
height: 50px;
background-color: #000;
position:absolute;
left: 50%;
top:100px;
margin-left: -3px;
animation: clockrotate 43200s steps(43200) infinite linear;
transform-origin: top center;
}
/* 分針制作 */
.minute {
width: 60px;
height: 6px;
background-color: #555;
position:absolute;
left:40px;
top:50%;
margin-top: -3px;
animation: clockrotate 3600s steps(3600) infinite;
transform-origin: center right;
}
/* 秒針制作 */
.seconds {
width: 4px;
height: 70px;
background-color:red;
position: absolute;
left:50%;
top:30px;
margin-left: -2px;
animation: clockrotate 60s steps(60) infinite ;
transform-origin: bottom center;
}
/* 設(shè)置動(dòng)畫(huà)序列 */
@keyframes clockrotate {
form{
}
to {
transform: rotate(360deg);
}
}
設(shè)置每個(gè)針的動(dòng)畫(huà)是旋轉(zhuǎn)360度,根據(jù)時(shí)、分、秒來(lái)計(jì)算動(dòng)畫(huà)執(zhí)行完畢需要的時(shí)間和步數(shù),加個(gè)infinite無(wú)限執(zhí)行,另外還要注意表針旋轉(zhuǎn)的中心點(diǎn)設(shè)置。
上述就是小猿圈老師針對(duì)CSS3動(dòng)畫(huà)練習(xí)案例:用CSS3做個(gè)鐘表介紹,相信你對(duì)web前端也是有一定的了解的,如果遇到不會(huì)的問(wèn)題可以到小猿圈去尋找答案的,里面有最新最全面的視頻教程等你來(lái)學(xué)習(xí),只要你想學(xué)習(xí)編程這里都有。
簡(jiǎn)單用法:
//定時(shí)器調(diào)用函數(shù),并給定時(shí)器命名 var time1 = setTimeout(myalert,2000); var time2 = setInterval(myalert,2000); //停止指定定時(shí)器 clearTimeout(time1); clearInterval(time2); function myalert(){ alert('ok!'); } //簡(jiǎn)寫(xiě)(匿名函數(shù)代替即可) var time1 = setTimeout( function(){ alert('ok!'); },2000);
1、 動(dòng)態(tài)顯示當(dāng)前時(shí)間
效果圖:
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。