秒杀倒计时

周亚鑫

已于 2023-03-26 10:29:29 修改

阅读量84

点赞数 2

分类专栏： js vue JavaScript 文章标签： css css3 前端

于 2022-08-22 13:29:42 首次发布

本文链接：https://blog.csdn.net/q4717529/article/details/126464110

版权

vue 同时被 3 个专栏收录

121 篇文章 14 订阅

订阅专栏

24 篇文章 0 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!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>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }

      .box {
        box-sizing: border-box;
        margin: 100px auto;
        width: 500px;
        min-height: 700px;
        background-color: rgb(216, 0, 0);
      }

      .top {
        box-sizing: border-box;
        width: 500px;
        height: 350px;
        padding: 5px;
        padding-top: 35px;
        text-align: center;
        line-height: 130px;
        font-size: 70px;
        color: rgb(255, 255, 255);
        font-weight: bold;
      }
      .bottom {
        padding: 10px;
      }
      .lefts {
        box-sizing: border-box;
        text-align: center;
        margin: 0 10px;
        height: 140px;
        background-color: rgb(0, 0, 0);
        color: azure;
        padding: 19px;
        font-size: 80px;
        font-weight: bold;
      }
      .left {
        box-sizing: border-box;
        margin: 10px;
        float: left;
        width: 140px;
        height: 140px;
        background-color: rgb(0, 0, 0);
        color: azure;
        padding: 19px;
        font-size: 80px;
        font-weight: bold;
      }

      .center {
        box-sizing: border-box;
        margin: 10px;
        float: left;
        width: 140px;
        height: 140px;
        background-color: rgb(0, 0, 0);
        color: azure;
        padding: 19px;
        font-size: 80px;
        font-weight: bold;
      }

      .right {
        box-sizing: border-box;
        margin: 10px;
        float: left;
        width: 140px;
        height: 140px;
        background-color: rgb(0, 0, 0);
        color: azure;
        padding: 19px;
        font-size: 80px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        var Y = document.querySelector(".lefts");
        var hour = document.querySelector(".left");
        var minute = document.querySelector(".center");
        var second = document.querySelector(".right");
        timer();
        var clock = window.setInterval(function() {
          timer();
        }, 1000);
        function timer() {
          var nowtime = new Date();
          var aimtime = new Date("2025-1-15 00:00:00");
          console.log((aimtime - nowtime) / 1000 / 60 / 60 / 24);
          time = (aimtime - nowtime) / 1000;
          Y.innerHTML = parseInt(time / 60 / 60 / 24) + " 天";
          var h = parseInt((time / 60 / 60) % 24);
          h = h < 10 ? "0" + h : h;
          hour.innerHTML = h;
          var m = parseInt((time / 60) % 60);
          m = m < 10 ? "0" + m : m;
          minute.innerHTML = m;
          var s = parseInt(time % 60);
          s = s < 10 ? "0" + s : s;
          second.innerHTML = s;
        }
      });
    </script>
    <div class="box">
      <div class="top">11.11<br />秒杀倒计时</div>

      <div class="bottom">
        <div class="lefts"></div>
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
      </div>
    </div>
  </body>
</html>