JavaScript獲取當(dāng)前日期與時(shí)間的方法示例詳解
前言
在 JavaScript 中,可以通過 Date
對(duì)象來獲取系統(tǒng)當(dāng)前的時(shí)間信息,并使用 getFullYear()
、getMonth()
、getDate()
、getHours()
等方法提取具體的年、月、日、時(shí)、分、秒等信息,最后通過 DOM 操作(如 innerHTML
)將時(shí)間顯示在網(wǎng)頁上。
一、獲取當(dāng)前時(shí)間對(duì)象
var now = new Date(); // 創(chuàng)建一個(gè)表示當(dāng)前時(shí)間的對(duì)象
二、常用方法解析
方法 | 描述 |
---|---|
getFullYear() | 獲取當(dāng)前年份(四位數(shù)字,例如:2025)? 推薦使用 |
getMonth() | 獲取月份(從 0 開始,即 0 表示 1 月,11 表示 12 月) |
getDate() | 獲取日期(1 ~ 31) |
getDay() | 獲取星期幾(0 表示星期日,1~6 表示星期一到星期六) |
getHours() | 獲取小時(shí)數(shù)(0 ~ 23) |
getMinutes() | 獲取分鐘數(shù)(0 ~ 59) |
getSeconds() | 獲取秒數(shù)(0 ~ 59) |
?? 注意:
getYear()
已被棄用,推薦使用getFullYear()
。getMonth()
返回值比實(shí)際月份小 1,需要加 1 才能顯示正確月份。
三、示例代碼:獲取并打印時(shí)間信息
var now = new Date(); console.log("年:" + now.getFullYear()); console.log("月:" + (now.getMonth() + 1)); // 加 1 console.log("日:" + now.getDate()); console.log("時(shí):" + now.getHours()); console.log("分:" + now.getMinutes()); console.log("秒:" + now.getSeconds()); console.log("星期:" + now.getDay());
四、完整示例:實(shí)時(shí)顯示當(dāng)前時(shí)間
HTML + CSS 部分
<style> .time span { display: inline-block; width: 40px; height: 20px; } </style> <div class="time"> 當(dāng)前時(shí)間:<br><br> <span id="year"></span>年 <span id="month"></span>月 <span id="day"></span>日 <span id="hour"></span>時(shí) <span id="minute"></span>分 <span id="second"></span>秒 </div>
JavaScript 實(shí)現(xiàn)
function showTime() { var now = new Date(); var year = now.getFullYear(); var month = now.getMonth() + 1; // 注意加 1 var day = now.getDate(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); // 更新頁面內(nèi)容 document.getElementById("year").innerHTML = year; document.getElementById("month").innerHTML = month; document.getElementById("day").innerHTML = day; document.getElementById("hour").innerHTML = hour; document.getElementById("minute").innerHTML = minute; document.getElementById("second").innerHTML = second; } // 初始調(diào)用一次 showTime(); // 每隔 1 秒更新一次時(shí)間 setInterval(showTime, 1000);
五、另一種寫法:直接拼接字符串顯示時(shí)間
HTML 部分
<div id="clock"></div>
JavaScript 部分
function updateTime() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); var week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; var currentWeek = week[date.getDay()]; // 格式化為統(tǒng)一格式 var timeStr = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${currentWeek}`; document.getElementById("clock").innerText = timeStr; } updateTime(); setInterval(updateTime, 1000);
六、總結(jié)
功能 | 方法 |
---|---|
獲取年份 | getFullYear() ? 推薦使用 |
獲取月份 | getMonth() + 1 (注意加 1) |
獲取日期 | getDate() |
獲取星期 | getDay() → 可映射成中文 |
獲取小時(shí) | getHours() |
獲取分鐘 | getMinutes() |
獲取秒數(shù) | getSeconds() |
顯示時(shí)間 | 使用 innerHTML 或 innerText 更新頁面元素 |
實(shí)時(shí)更新 | 使用 setInterval(fn, 1000) 每秒刷新一次 |
七、注意事項(xiàng)
getMonth()
返回的是從 0 開始的月份,記得手動(dòng)加 1;getYear()
不推薦使用,已過時(shí);- 如果需要國際化,可結(jié)合
Intl.DateTimeFormat
處理; - 實(shí)時(shí)時(shí)間功能適用于電子鐘、計(jì)時(shí)器、狀態(tài)欄等場(chǎng)景。
到此這篇關(guān)于JavaScript獲取當(dāng)前日期與時(shí)間方法的文章就介紹到這了,更多相關(guān)JS獲取當(dāng)前日期與時(shí)間內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Js 獲取當(dāng)前日期時(shí)間及其它操作實(shí)現(xiàn)代碼
- 在JSP頁面中獲取當(dāng)前日期時(shí)間的方法
- JS 顯示當(dāng)前日期與時(shí)間的代碼
- JS獲取當(dāng)前日期時(shí)間并定時(shí)刷新示例
- 完整顯示當(dāng)前日期和時(shí)間的JS代碼
- Js獲取當(dāng)前日期時(shí)間及格式化代碼
- JS如何將當(dāng)前日期或指定日期轉(zhuǎn)時(shí)間戳
- JavaScript 獲取當(dāng)前日期時(shí)間 年月日 時(shí)分秒的方法
- javascript獲取當(dāng)前日期時(shí)間及其它操作函數(shù)
相關(guān)文章
Bootstrap 實(shí)現(xiàn)表格樣式、表單布局的實(shí)例代碼
這篇文章主要介紹了Bootstrap 實(shí)現(xiàn)表格樣式、表單布局的實(shí)例代碼,需要的朋友可以參考下2018-12-12javascript如何實(shí)現(xiàn)create方法
這篇文章主要介紹了javascript如何實(shí)現(xiàn)create方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11javascript 網(wǎng)頁跳轉(zhuǎn)的方法
昨天練習(xí)的時(shí)候正好要用到跳轉(zhuǎn)代碼,在網(wǎng)上找了一下,覺得下面幾個(gè)不錯(cuò)...整理了一下發(fā)上來...2008-12-12JavaScript實(shí)現(xiàn)簡單的雙色球(實(shí)例講解)
下面小編就為大家?guī)硪黄狫avaScript實(shí)現(xiàn)簡單的雙色球(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07JavaScript顯示當(dāng)前文檔最后修改日期的方法
這篇文章主要介紹了JavaScript顯示當(dāng)前文檔最后修改日期的方法,實(shí)例分析了javascript中document.lastModified的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03如何基于javascript實(shí)現(xiàn)貪吃蛇游戲
這篇文章主要介紹了如何基于javascript實(shí)現(xiàn)貪吃蛇游戲,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02JavaScript 用Node.js寫Shell腳本[譯]
你懂JavaScript嗎?你需要寫一個(gè)Shell腳本嗎?那么你應(yīng)該試一下Node.js,它很容易安裝,而且很適合通過寫Shell腳本來學(xué)習(xí)它2012-09-09JavaScript檢測(cè)瀏覽器是否支持css3的屬性
這篇文章主要為大家詳細(xì)介紹了如何編寫一個(gè) JavaScript 方法來檢測(cè)瀏覽器是否支持特定的 CSS3 屬性,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12