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