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

花卷卷爱吃肉

已于 2023-11-29 11:26:12 修改

阅读量2.4k

点赞数 23

分类专栏： JavaScript 文章标签： javascript css html5

于 2023-11-29 11:22:01 首次发布

本文链接：https://blog.csdn.net/2301_76675652/article/details/134685443

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文将介绍如何使用 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，我们可以很方便地在网页中显示当前时间和实现倒计时功能。通过上述代码示例，你可以灵活运用这些技巧，为你的网页添加更多动态和实用的功能。希望本文能对你有所帮助！

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h3 {
      background-color: rgb(0, 250, 142);
      padding: 50px 100px;
      width: 500px;
      height: 40px;
      text-align: center;
      margin: 0 auto;
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <div></div>
  <div class="div1" style="color: rgb(255, 0, 140);"></div>
  <Script>
    const div = document.querySelector('div')
    function showTime() {
      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 = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      // let d = date.getDay();
      // switch (date.getDay()) {
      //   case 0: d = "星期天"; break;
      //   case 1: d = "星期一"; break;
      //   case 2: d = "星期二"; break;
      //   case 3: d = "星期三"; break;
      //   case 4: d = "星期四"; break;
      //   case 5: d = "星期五"; break;
      //   default: d = "星期六";
      // }
      return `现在是：${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日 ${h}:${m}:${s} ${d[new Date().getDay()]}`
    }
    div.innerHTML = showTime()
    setInterval(function () {
      div.innerHTML = "<h3>" + showTime() + "</h3>";
    }, 1000)

    const div1 = document.querySelector('.div1')
    function Gettime() {
      const now = +new Date();
      const last = +new Date('2024-2-10 00:00:00');
      const count = (last - now) / 1000;
      // 转换为时分秒
      // h = parseInt(总秒数 / 60 / 60 % 24)   //   计算小时
      // m = parseInt(总秒数 / 60 % 60);     //   计算分
      // s = parseInt(总秒数 % 60);    //   计算秒
      // let d = parseInt(count / 60 / 60 / 24)    //   计算天
      // mo1 = parseInt(count / 60 / 60 / 24 / 30 % 12)   计算月，但不准确
      d1 = parseInt(count / 60 / 60 / 24)
      h1 = parseInt(count / 60 / 60 % 24)
      m1 = parseInt(count / 60 % 60);
      s1 = parseInt(count % 60);
      // mo1 = mo1 < 10 ? '0' + mo1 : mo1;
      d1 = d1 < 10 ? '0' + d1 : d1;
      h1 = h1 < 10 ? '0' + h1 : h1;
      m1 = m1 < 10 ? '0' + m1 : m1;
      s1 = s1 < 10 ? '0' + s1 : s1;
      return `距离春节只剩下：${d1} 天 ${h1}:${m1}:${s1}`
    }
    div1.innerHTML = Gettime();
    setInterval(function () {
      div1.innerHTML = "<h3>" + Gettime() + "</h3>";
    }, 1000)
  </Script>
</body>

</html>

花卷卷爱吃肉

关注

23
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
实现网页倒计时和显示当前时间

本文将介绍如何使用 JavaScript 在网页中实现倒计时和显示当前时间的功能。在网页开发中，我们经常需要展示当前时间，同时也可能需要在某些特定场景中进行倒计时。借助 JavaScript，我们可以轻松地实现这些功能。
复制链接

扫一扫

专栏目录