前端学习笔记JavaScript - 倒计时

预览

html代码

<div class="main-view">
  <h1 class="property-center">京东秒杀</h1>
  <p class="property-center">FLASH DEALS</p>
  <img src="img/shandian.png" alt="闪电">
  <p class="property-center">本场距离结束还剩</p>
  <div class="time-view">
    <div class="hour time-subview">00</div>
    <div class="minute time-subview">00</div>
    <div class="second time-subview">00</div>
  </div>

css代码

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

    .property-center {
      text-align: center;
    }

    .main-view {
      width: 200px;
      margin: 100px auto;
      text-align: center;
      background-color: #E83733;
    }

    h1 {
      height: 40px;
      line-height: 40px;
      padding:20px 0 5px 0;
      font-size: 28px;
      font-weight: 700;
      color: white;
    }

    .main-view p:nth-of-type(1) {
      font-size: 17px;
      color: rgba(255,255,255,0.5);
      margin-bottom: 20px;
    }

    .main-view p:nth-of-type(2) {
      color: white;
      margin-top: 10px;
    }

    .time-view {
      /*居中布局*/
      display: flex;
      justify-content: center;
    }

    .time-subview {
      position: relative;
      text-align: center;
      width: 40px;
      height: 40px;
      line-height: 40px;
      margin: 10px 0 20px 0;
      font-size: 22px;
      font-weight: 700;
      color: white;
      background-color: #323234;
    }

    .minute {
      margin: 10px 10px 0 10px;
    }

    .time-subview::before {
      content:"";
      width: 40px;
      height: 2px;
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: #E83733;
    }
  </style>

javascript代码

<script>
  let hour = document.querySelector(".hour");
  let minute = document.querySelector(".minute");
  let seconde = document.querySelector(".second");

  // - 首次进入设置时分秒
  setTimeText("2020-08-22 12:30:45");
  setInterval(function () {
    // - 计时设置时分秒
    setTimeText("2020-08-22 12:30:45");
  },1000)

  // - 设置时间文字
  function setTimeText(specifyTime) {
    let time = getTime(specifyTime);
    // - 设置小时
    hour.innerText = time.hour;
    // - 设置分钟
    minute.innerText = time.minute;
    // - 设置秒
    seconde.innerText = time.second;
  }

  // -- 获取时间差，转换成时分秒
  function getTime(specifyTime) {
    // - 当前时间
    let nTiem = new Date();
    // - 指定时间
    let sTime = new Date(specifyTime);
    // -- 获取现在时间和指定时间的时间差，转换成秒
    let cha = (sTime - nTiem)/1000;
    // -- 获取现在时间和指定时间相差多少小时
    let tHour = Math.floor(cha/(60*60))
    tHour = tHour<10?"0"+tHour:tHour;
    // -- ...相差多少分
    let tMinute = Math.floor(cha/60%60)
    tMinute = tMinute<10?"0"+tMinute:tMinute;
    // -- ...相差多少秒
    let tSecond = Math.floor(cha/60*60%60)
    tSecond = tSecond<10?"0"+tSecond:tSecond;
    // - 返回时分秒
    return {
      hour:tHour,
      minute:tMinute,
      second:tSecond
    };
  }
</script>