商场时间秒杀倒计时简单实现

最新推荐文章于 2021-08-23 16:41:40 发布

强运

最新推荐文章于 2021-08-23 16:41:40 发布

阅读量243

点赞数

分类专栏：功能实现文章标签： html css web

本文链接：https://blog.csdn.net/weixin_43161796/article/details/107392034

版权

功能实现专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍如何简单实现商场时间秒杀倒计时功能，只需通过复制粘贴代码并修改startSet与endHour参数。

摘要由CSDN通过智能技术生成

复制粘贴，修改startSet与endHour即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
    <div id="main" class="main">
      <header><h1>大型购物秒杀倒计时</h1></header>
      <h1 class="count" id="count">
        
      </h1>
    </div>
  
  <script>
    let startSet = "2020/7/16 18:00:00"; // 修改开始时间
    let startTime = new Date(startSet);
    let count = document.getElementById('count');
    let endHour = 3; //持续时间

    function zero(b) {
      return (`00${b}`.slice(b.length, b.length+2))
    }

    function TimeToEnd(midTime, str) {
      let hour = parseInt(midTime/3600); //计算剩余小时
      let minute = parseInt((midTime - hour*3600) / 60); //计算剩余分钟
      let second = parseInt(midTime - hour*3600 - minute*60); //计算剩余秒
      let content = `还有 ${zero(hour.toString())}小时${zero(minute.toString())}分${zero(second.toString())}秒 活动${str}！！！`;
          
      return content;
    }

    setInterval(()=> {
      let nowTime = new Date();
      let midTime = (startTime.getTime() - nowTime.getTime())/1000;//时间戳想减, 得到毫秒时间差 除以1000, 得到秒差
      if(parseInt(midTime/3600) < 24) {  // 超过一天 不记时

        if(midTime < 0) { // 判断活动是否开始
          let midmidTime = midTime + endHour*3600;

          count.innerText = midmidTime > 0 ? TimeToEnd(midmidTime,'结束') : "活动已经结束"; //判断活动是否结束
          
        } else {
          count.innerText = TimeToEnd(midTime,'开始');
        }
      }  else {
        count.innerText = '活动尚未开始, 敬请期待';
      }
    },1000)

  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .main {
      position: fixed;
      width: 100%;
      height: 100%;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      background-color: red;
      background: linear-gradient(red,orange,rgb(255, 238, 0),rgb(255, 251, 0));
    }
    .count {
      display: flex;
      flex-flow: column;
      justify-content: center;
      height: 500px;
    }
  </style>
</body>
</html>