首页 > 代码库 > 简易倒计时

简易倒计时

实现效果图:

技术分享

整体代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒计时</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .spans{
    border-radius: 5px;
    background-color: lightblue;
  }
  div{
    position: absolute;
    left: 200px;
    top: 200px;

  }
  span{
    width: 100px;
    height: 100px;
    display: block;
    text-align: center;
    line-height: 100px;
    float: left;
    font-size: 30px;
  }
  input:nth-child(1){
    position: absolute;
    left: 100px;
    top: -100px;
  }
  input:nth-child(2){
    position: absolute;
    left: 150px;
    top: -100px;
  }
</style>
<body>
  <div>
    <input type="button" value="http://www.mamicode.com/begin">
    <input type="button" value="http://www.mamicode.com/pause">
    <span class="spans"></span>
    <span>:</span>
    <span class="spans"></span>
    <span>:</span>
    <span class="spans"></span>
    <span>:</span>
    <span class="spans"></span>
    <span>:</span>
    <span class="spans"></span>
  </div>
  <script>
    var inputs=document.getElementsByTagName("input");
    var spans=document.getElementsByClassName("spans");

    // 13、将其封装成函数
    function MyFunction(){
      // 1、获取当前时间
      var nowdate=new Date();
      // console.log(nowdate)

      // 2、2017/5/1
      var enddate=new Date("2017/5/1");
      // console.log(enddate)

      // 3、获取当前毫秒数
      var nowtime=nowdate.getTime(nowdate)
      // console.log(nowtime)

      // 4、获取2017/5/1的毫秒数
      var endtime=enddate.getTime(nowdate)
      // console.log(endtime)

      // 5、当前到2017/5/1的毫秒数
      var netime=endtime-nowdate;
      // console.log(netime)

      // 6、获取毫秒数——利用向下取整,然后取余获得剩余的毫秒数
      var mseconds=Math.floor(netime%1000)
      // console.log(mseconds)

      // 7、获取秒数——利用向下取整,除以1000以后得到毫秒数,再取余获得剩下的秒数
      var seconds=Math.floor(netime/1000%60)
      // console.log(seconds)

      // 8、获取分钟数——利用向下取整,除以1000以后再除以60得到秒数,在取余得到剩下的分钟数
      var minutes=Math.floor(netime/1000/60%60)
      // console.log(minutes)

      // 9、获得小时数——利用向下取整,除以1000,再除以60,再除以60得到分钟数,最后取余得到剩下的小时数
      var hours=Math.floor(netime/1000/60/60%24)
      // console.log(hours)

      // 10、获得天数——利用向下取整,除以1000,再除以60,再除以60,最后除以24得到剩下的天数
      var days=Math.floor(netime/1000/60/60/24)
      // console.log(days)

      // 11、将天数、小时数、分钟数、秒数、毫秒数加到一个数组中
      var arr=[days,hours,minutes,seconds,mseconds];
      for(var i=0;i<arr.length;i++){
        // 12、将数组中的元素添加到浏览器中
        spans[i].innerHTML=bl(arr[i]);
      }
    }
    // 若在这里不加上调用的函数,则第一次时需要反映一段时间
    MyFunction();

    var timer=null;
    // 单击begin按钮开始
    // inputs[0].onclick=function(){
    // // 在开定时器前,先关上定时器——因为这样就可以使我们在连续点击开始以后,再点击关闭以后,出现无法关上的bug出现
      // clearInterval(timer);
      // timer=setInterval(function(){
        // MyFunction();
      // },1000);
    // }

    // 点击pause按钮暂停
    inputs[1].onclick=function(){
      clearInterval(timer);
    }


    // 倒计时
    timer=setInterval(function(){
      MyFunction();
    },100);

    // 19、给小于10的随机数前面补零
    function bl(n){
      return n<10?"0"+n:n;
    }

  </script>
</body>
</html>

简易倒计时