做一个倒计时的小例子

做一个倒计时的小例子

css样式代码：

      body,p{

           margin: 0;

           padding: 0;

           list-style: none;

      }

      .box{

           width: 500px;

           height: 300px;

           margin: 50px auto;

           border: 1px solid #ccc;

           background: #eee;

      }

      .ipt{

         margin: 20px 80px;

      }

      .div{

         width: 340px;

         height: 50px;

         background: green;

         margin-left: 80px;

         color: #fff;

         margin: 0 auto;

         text-align: center;

         line-height: 50px;

         font-size: 30px;

      }

      .ta{

         margin: 20px 80px;

         width: 340px;

         height: 150px;

         background: #ded;

      }

      .ta p{

         margin: 10px 20px;

      }

html的基本结构：

<div class="box">
    <input type="text" class="ipt">
    <button class="btn">倒计时间</button>
    <div class="div"></div>
    <div class="ta">
        <p>格式如下：</p>
        <p>2018-7-19,20:00:00</p>
        <p>2018-2-11</p>
    </div>
</div>

js代码如下：

var ipt = document.querySelector('.box .ipt');

    var btn = document.querySelector('.box .btn');

    var div = document.querySelector('.box .div');

    var str = '';

    btn.onclick = function(){

        btn.timer = setInterval(fn,1000);

        function fn(){

            var val = ipt.value;

            var dateNew = new Date(val);

            var dateCurrent = new Date();

              var millis = parseInt((dateNew - dateCurrent)/1000);

              if(millis){

            var d = parseInt(millis/(60*60*24));

                  var h = parseInt((millis%86400)/3600);

                  var m = parseInt((millis%3600)/60);

                  var s = parseInt(millis%60);

                str = d+'天'+h+'小时'+m+'分钟'+s+'秒';

                div.innerHTML = str;

              }else{

                  clearInterval(btn.timer);

            div.innerHTML = '我喜欢你';

            }

            }

    }

这样就实现了一个倒计时的例子