利用js原生实现爆款商品倒计时

如何手写原生的倒计时

思路展现

首先要了解时间戳这块
利用将来的时间与现在时间差值
利用取余方式确定时分秒
在把转化好的时分秒展示在页面中
利用定时器做好动态倒计时

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>倒计时</title>
  <style>
    #box1 {
      width: 300px;
      height: 50px;
      margin: 50px auto
    }

    #box2,
    #box3,
    #box4,
    #box5,
    #box6 {
      width: 50px;
      height: 50px;
      background-color: red;
      float: left;
      margin-left: 10px;
      border-radius: 10px;
      font-size: 25px;
      text-align: center;
      line-height: 50px;
    }
  </style>
</head>

<body>

  <div id="box1">
    <div id="box2">00</div>
    <div id="box5">:</div>
    <div id="box3">00</div>
    <div id="box6">:</div>
    <div id="box4">00</div>
  </div>
  <script>
    // 对盒子进行绑定
    var box2 = document.getElementById('box2');
    var box3 = document.getElementById('box3');
    var box4 = document.getElementById('box4');

    // var time = prompt("请输入时间")
    function conutDown(time) {
      var futureTime = +new Date("2020-06-22 12:30:00")//将来的时间
      var currentTime = +new Date()//当前的时间
      // console.log(futureTime);
      var timer = (futureTime - currentTime) / 1000//将来的时间和当前的额时间差值
      var d = parseInt(timer / 60 / 60 / 24).toString().padStart(2, "0")//获取当前的天数，padStart为字符串首端补0操作，第一个参数为字符串的长度，第二个参数为补的内容
      var h = parseInt(timer / 60 / 60 % 24).toString().padStart(2, "0")//获取小时数
      var m = parseInt(timer / 60 % 60).toString().padStart(2, "0")//获取分钟数
      var s = parseInt(timer % 60).toString().padStart(2, "0")//获取秒数

      /* 另外一种补0操作 */
      // var h = parseInt(timer / 60 / 60 % 24)//获取小时数
      // h = h > 10 ? h : "0" + h
      // var m = parseInt(timer / 60 % 60)//获取分钟数
      // m = m > 10 ? m : "0" + m
      // var s = parseInt(timer % 60)//获取秒数
      // s = s > 10 ? s : "0" + s
      // return d + "天" + h + ":" + m + ":" + s
      box2.innerHTML = h;
      box3.innerHTML = m;
      box4.innerHTML = s
      if(timer>0){ //当倒计时即将归0时，不允许页面出现负数
        setTimeout(conutDown, 1000)
      }else{
        return  box2.innerHTML = "00",box3.innerHTML ="00", box4.innerHTML = "00" 
      }
    }
    conutDown()

    // setTimeout(conutDown, 1000）
    // setInterval(conutDown("2020-06-22 12:30:00"), 1000)

    // console.log(conutDown("2020-06-22 24:00:00"));




    //获取时间戳的四种方式
    // var timer=new Date
    // console.log(timer.valueOf(),1);//通过valueOf
    // console.log(timer.getTime(),2);//通过getTime
    // var timerDate=+new Date //通过+new
    // console.log(timerDate,3);
    // //用h5新增的方法
    // console.log(Date.now(),4);


    //封装一个倒计时函数

    /*
    1.用将来的时间减去现在的时间
    2.利用时间戳进行转化
    4.利用取余来转化时分秒
    3.利用定时器实现自动变化
    */

  </script>
</body>

</html>

利用js原生实现爆款商品倒计时

如何手写原生的倒计时

猜你喜欢