用JavaScript + HTML实现，类似于双十一的倒计时功能(自动倒计时，不需要手动刷新页面)

狮子座的男孩

已于 2022-03-11 13:41:50 修改

阅读量2.6k

点赞数 11

分类专栏： # 前端实战与例子文章标签： html javascript dome 前端

于 2021-05-21 20:54:57 首次发布

本文链接：https://blog.csdn.net/weixin_43405300/article/details/117134555

版权

前端实战与例子专栏收录该内容

53 篇文章 10 订阅

订阅专栏

Ⅰ、问题描述：

1、用JavaScript + html实现，倒计时功能；
2、分析：
A、需要用html将显示的格式做出来；
B、调用Date及设置定时器函数( setInterval(); )等，实现倒计时功能；

Ⅱ、实现过程如下：

1、运行软件VScode，亲测可实现；
2、运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 用HTML先写好输出格式即样式 -->
  <h1>距离2021双十一还剩<span id="d"></span>天<span id="h"></span>时<span id="m"></span>分<span id="s"></span>秒</h1>


  <script>
    //调用Date相关函数和设置定时器(setInterval();)，来实现倒计时功能；
   var d = document.getElementById('d');
   var h = document.getElementById('h');
   var m = document.getElementById('m');
   var s = document.getElementById('s');   /* 通过dome操作来找到相应元素，  根据id的值来找元素；此时会根据 id 值来拿到 html 中的 span 标签的位置，然后再往里面添加相关的信息； */

   var endTime = new Date('2021/11/11');  //获取目标的日期值为： 2021/11/11   00:00:00;
   setInterval(function(){
     var now = new Date(); //获取现在电脑上的日期值； 如：2021/5/21  20:37:35 等信息；
     var diff = endTime.getTime() - now.getTime(); // 现在到目标时间距离的毫秒数   get.time()作用是获取从1970/1/1到某一时间点的毫秒数；
     diff = parseInt(diff/1000);     //将毫秒数换算成秒数；
     var days = parseInt(diff/(24*3600))//获取天数；
     var hours = parseInt(diff%(24*3600)/3600);//获取小时；
     var minutes = parseInt(diff%3600/60);//获取分钟；
     var seconds = diff%60;//获取秒数；

     d.innerHTML = days;   // d.innerHTML 的作用就是：将 day 的值添加到相应的 id 标签中；
     h.innerHTML = hours;
     m.innerHTML = minutes;
     s.innerHTML = seconds;
   },1000); //其中的 1000 指： 1000毫秒( 1s )自动刷新一次，这就造成了我们所看到的倒计时；


  </script>
</body>
</html>

3、结果展示：
倒计时截图(没有办法只有静态图)：
A、第一次截图：
在这里插入图片描述
B、第二次截图：

C、第三次截图：

Ⅲ、小结：

哪里有不对或不合适的地方，还请大佬们多多指点和交流！

狮子座的男孩

关注

11
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
20
评论
用JavaScript + HTML实现，类似于双十一的倒计时功能(自动倒计时，不需要手动刷新页面)

Ⅰ、问题描述：1、用JavaScript + html实现，倒计时功能；2、分析：A、需要用html将显示的格式做出来；B、调用Date及设置定时器函数( setInterval(); )等，实现倒计时功能；Ⅱ、实现过程如下：1、运行软件VScode，亲测可实现；2、运行代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equi
复制链接

扫一扫