电商网站经常看到的倒计时

最新推荐文章于 2023-10-31 11:12:06 发布

绘梨衣的Sakura

最新推荐文章于 2023-10-31 11:12:06 发布

阅读量874

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/Azhongpu/article/details/111066980

版权

倒计时案例

相信大家经常看到电商网站做活动时，会在旁边写上倒计时活动还有多长时间结束。所以今天也来写个小案例，然后我自己的理解来分析一下。

在这里插入图片描述
示例
html代码

<body>
  <!-- 标题 -->
  <h1 class="title">距离春节，还有</h1>
   <!-- 倒计时的天数，时，分，秒 -->
  <div class="time-item">
    <span><span id="day">00</span>天</span>
    <strong><span id="hour">00</span>时</strong>
    <strong><span id="minute">00</span>分</strong>
    <strong><span id="second">00</span>秒</strong>
  </div>
</body>

css样式

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .time-item {
      width: 430px;
      height: 45px;
      margin: 0 auto;
    }

    .time-item strong {
      background: skyblue;
      color: palevioletred;
      line-height: 49px;
      font-size: 36px;
      font-family: Arial;
      padding: 0 10px;
      margin-right: 10px;
      border-radius: 5px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    .time-item>span {
      float: left;
      line-height: 49px;
      color: palevioletred;
      font-size: 32px;
      margin: 0 10px;
    }

    .title {
      width: 260px;
      height: 50px;
      margin: 200px auto 50px auto;
    }
  </style>

没有写js之间的样子
在这里插入图片描述
js代码

  <script>
    //先封装个函数，用DOM来获取html里的标签
      function $(id){
        return document.getElementById(id);
      }
      // 给要改变的天数，时间，var个变量来接受，获取的标签
      var day = $("day");
      var hour = $("hour");
      var minute = $("minute");
      var second = $("second");
      // 给变量来获取春节的时间 new Date()是获取当前时间，new Date(写上的时间)获取写上的时间
      var chunjie = new Date("2021-2-12 00:00:00")
      //封装一个函数，这里算出时间差
      function fn(){
          // 用春节的时间减去当前时间，得出毫秒数
          var cha = (chunjie - new Date())
          //这里用算出的毫秒数来算出天时分秒，因为这里毫秒数来计算会出现小数，所以给parseInt来去整数
          var d = parseInt( cha / 1000 / 60 / 60 / 24)
          var h = parseInt(cha / 1000 / 60 / 60 % 24)
          var m = parseInt(cha / 1000 / 60 % 60)
          var s = parseInt(cha / 1000 % 60)
          //innerText获取标签里的内容，这条件判断，如果d为个数，前面就拼接个0
          day.innerText = d > 10 ? d :"0" + d
          hour.innerText = h
          minute.innerText = m
          second.innerText = s
      }
      //执行函数
      fn();
      //setTerval是指定时器，因为现在写出的时间静态的，只有手动刷新才会更新时间，所以这里给个定时器，每过1000毫秒（1秒），这个定时就会刷新
      setInterval(fn,1000);
  </script>

在这里插入图片描述

绘梨衣的Sakura

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
电商网站经常看到的倒计时

倒计时案例相信大家经常看到电商网站做活动时，会在旁边写上倒计时活动还有多长时间结束。所以今天也来写个小案例，然后我自己的理解来分析一下。示例html代码<body>  <h1 class="title">距离春节，还有</h1>  <div class="time-item"> <span><span id="day"&
复制链接

扫一扫