实现网页倒计时和显示当前时间

本文将介绍如何使用 JavaScript 在网页中实现倒计时和显示当前时间的功能。

目录

显示当前时间

插入到网页中

网页倒计时

格式化并插入到网页中

---

在网页开发中，我们经常需要展示当前时间，同时也可能需要在某些特定场景中进行倒计时。借助 JavaScript，我们可以轻松地实现这些功能。

显示当前时间

要在网页中显示当前时间，我们可以使用 JavaScript 的 `Date` 对象获取当前时间，并通过 DOM 操作将其插入到网页中。在提供的代码中，通过以下代码段实现了这一功能：
// 获取当前时间并格式化
const date = new Date();
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();
h = h < 10 ? '0' + h : h;
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
const d = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

插入到网页中

const div = document.querySelector('div');
div.innerHTML = `现在是：${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日 ${h}:${m}:${s} ${d[new Date().getDay()]}`;

通过将上述代码放置在页面加载完成后执行，并使用 `setInterval` 函数每秒更新一次时间，就可以实现网页中实时显示当前时间的效果。

网页倒计时

在某些场景中，如活动开始前的倒计时或者特定日期的倒计时，我们可通过 JavaScript 实现一个简单的倒计时效果。在提供的代码中，通过以下代码段实现了距离未来某个特定日期的倒计时功能：

// 获取当前时间并计算倒计时
const now = +new Date();
const last = +new Date('2024-2-10 00:00:00');
const count = (last - now) / 1000;
d1 = parseInt(count / 60 / 60 / 24);
h1 = parseInt(count / 60 / 60 % 24);
m1 = parseInt(count / 60 % 60);
s1 = parseInt(count % 60);

格式化并插入到网页中

const div1 = document.querySelector('.div1');
div1.innerHTML = `距离春节只剩下：${d1} 天 ${h1}:${m1}:${s1}`;

同样，通过将上述代码放置在页面加载完成后执行，并使用 `setInterval` 函数每秒更新一次倒计时，就可以在网页中实现倒计时的效果。

借助 JavaScript，我们可以很方便地在网页中显示当前时间和实现倒计时功能。通过上述代码示例，你可以灵活运用这些技巧，为你的网页添加更多动态和实用的功能。希望本文能对你有所帮助！