[JS] 日期 + 时间 + 星期模板
使用 JavaScript 实时显示当前日期和时间的方法
📅 本模板的用途与优点
- 可同时显示年月日和当前时间
- 通过显示星期提升对日期的理解
- 通过 setInterval 学习实时更新
- 可应用于数字标牌和公告栏等场景
👇就是这种效果👇
----/--/-- --:--:-- (---)
📋 可复制粘贴的实用代码
<div id="datetime"></div>
<script>
setInterval(() => {
const now = new Date();
const y = now.getFullYear();
const m = (now.getMonth() + 1).toString().padStart(2, '0');
const d = now.getDate().toString().padStart(2, '0');
const h = now.getHours().toString().padStart(2, '0');
const min = now.getMinutes().toString().padStart(2, '0');
const s = now.getSeconds().toString().padStart(2, '0');
const dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
const w = dayNames[now.getDay()];
document.getElementById("datetime").textContent = `${y}/${m}/${d} ${h}:${min}:${s} (${w})`;
}, 1000);
</script>
🧩 应用与扩展
本模板使用 setInterval(() => {...}, 1000) 每秒实时更新当前的日期、时间和星期。通过调用 getFullYear() 与 getDay() 等方法获取系统时间数据，并以清晰的格式呈现在页面上。
星期的显示是利用 getDay() 返回的数字索引配合 dayNames[] 数组进行转换。如果需要中文显示，可将该数组内容替换为 ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]，使其更符合本地化需求。
📌 实际应用示例
该代码可用于展示当前时间信息，例如学校的电子公告栏、商店展示屏、或需要显示系统时间的网站。您也可以自由调整样式（CSS）以符合自己项目的视觉设计。
由于使用的是用户设备上的本地时间，这种方法非常适合多语言、多时区支持的网页或服务。