JS小福利——實時更新的頁面小時鐘

這是一個有趣的時鐘顯示程序，可以進行實時的年月日、星期、時分秒更新，有了這組小代碼，以後可以作為日期插件應用在大型的JS代碼中哦~~

積少成多，時間是一點點省下來的，效率也是慢慢提高的。

好了，廢話不多說了，馬上進入正題(*^▽^*)

首先，為了使頁面在固定位置定時刷新，我需要在body中寫入一個div，代碼結構如下:

這個小程序中，重點使用JS內置對象中的Date日期類對象編寫代碼，以下是一些概念性的知識，稍微提一下：

1、new Date() ：返回當前最新時間； new Date("2017,12,31,12:34:12"); 返回指定時間。

2、常用方法：

① .getFullYear()：獲取年份。

② .getMonth()：獲取月份。

③ .getDate(); 獲取一個月中的第幾天

③ .getDay(); 獲取一個周中的第幾天 0-表示周天。時分秒以此類推...

接下來，我們首先需要聲明一個函數，函數名為getTime()，然後在函數體中進行年月日、時分秒的聲明與調用，代碼如下：

通過以上代碼，函數體部分已經敲完了，只剩下調用getTime()函數。

但是由於每次刷新頁面都會出現一次小卡頓，時間更新延遲，導致用戶的體驗效果不佳。

作為改進，我在函數體外部緊接著寫了一下代碼：

到這裡，我們這個實時頁面刷新的小程序的效果就可以完全實現了。

上述延時方法採用的是遞歸調用，由於時間函數本身就是一個死循環，每執行完一次，間隔1s後就回調一次函數，可以實現時間的每秒更新。

還有第二種方法，也是大家普遍第一時間想到的方法——定時器，代碼如下：

完整代碼如下，留給大家作參考：

如果覺得好玩，可以動手敲敲試試看，自己敲出來的感覺就是不一樣！

另附一丟丟CSS代碼（純屬娛樂）：

文章摘自博客園

中公優就業IT培訓，總有你想學的：http://xue.ujiuye.com

勤工儉學計劃，0元學IT!

http://www.ujiuye.com/zt/qgjx/?wt.bd=lsh11tt

找工作太難?我們來幫你一舉拿下!

http://www.ujiuye.com/zt/jycj/?wt.bd=lsh11tt

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！