基於原生VUE的實時時間顯示與更新

2021-10-22 09:15:40 字數 1416 閱讀 2592

在前端開發過程中,我們往往想在頁面上展示並更新目前的實時時間,實現的方法也有很多。

目前最為方便的就是day.js庫。

但如果只使用原生vue設計並實現該功能,可以加深我們對vue響應式更新的了解。

下面開始介紹思路:

實時顯示一般由兩大主要功能實現:實時獲取與實時重新整理。

在js中我們能使用如下**獲取當前的日期物件

var date =

newdate()

;

使用格式化函式進行日期的格式化顯示

var

gettime

=function

(date)

迴圈執行本函式即可實時獲取時間

在vue中建立時間顯示元件,**如下

>

>

>

>

//用到了vue的filters鉤子,對時間進行格式化

div>

template

>

在掛載時啟動vue定時器,用到了setinterval(function,time)函式,第乙個引數為迴圈執行的函式,第二個引數為定時時長,單位毫秒。需要注意的是,啟動的定時器需要在頁面銷毀時呼叫clearinterval銷毀,**如下

mounted()

,beforedestroy()

利用vue的響應式屬性,將時間定義在data**塊中,由定時器觸發時間更新,進而觸發vue響應檢視更新,將時間重新整理。完整**如下

>

>

>

>

div>

template

>

>

vargettime

=function()

export

default},

filters:

,methods:},

mounted()

,beforedestroy()

}script

>

>

style

>

最終效果如下,實現每秒更新。

如果對顯示效果不滿意,還改進格式化函式補0。**實現如下

var

addzero

=function

(value)

;

在組裝月、日、時、分、秒字串時,呼叫該函式補0,即可達成令人滿意的顯示效果。

雖然已經有使用起來方便快捷的dayjs**庫,但使用原生vue進行開發能讓我們更好的掌握相關技術,在**問題的過程中達到提公升自己的目的。

winform中顯示實時時間和星期

做winform專案發現需要新增乙個時間顯示功能,現記錄如下 1 首先新建乙個timer,命名為timer,並在屬性中修改interval為1000 2 在需要顯示時間的地方新增乙個label 假設設定名稱為 timerlabel 3 進入.cs的窗體 中,在timer對應的方法中新增如下 time...

vs2008C 網頁實現顯示實時時間

第一次接觸這個東西,什麼都不懂,好在看過幾天的html5,對一些通用標籤還是了解一點的。在實現功能之前,查閱了很多 結果發現根本跑不起來,由於不懂c 這東西,在實現時間功能時遇到了很大的困難,在參考網上的 時,發現根本就跑不起來,因為在他們的 中asp.cs中都嵌了乙個外層的大括號,自己乙個勁的配置...

基於Vue實現關鍵詞實時搜尋高亮顯示關鍵詞

下面是demo執行的效果圖 好了閒話不多說直接上 實時搜尋實時搜尋通過觸發input事件和定時器來實現 在每次輸入框的值變化的時候都會執行handlequery方法 cleartimer handlequery event 2000 在handlequery方法中有乙個定時器,通過設定時間來控制搜尋...