演习倒计时例子

倒计时就是时候一秒秒的倒数,平常都是目的时候跟如今时候举行比较

html部份

<input id='inputTime' type="text" placeholder="eg:2018-03-03">
<button id="submit">set</button>
<div>
    效果:
    <p id="view"></p>
</div>

js部份

• Date对象的运用

  • Date 对象基于1970年1月1日（天下标准时候）起的毫秒数,返回的是毫秒数

  • 传入的参数dateString示意日期的字符串值。该字符串应该能被 Date.parse() 要领辨认的才能够剖析为毫秒数

  • 经由过程剖析时候字符串取得他们的毫秒数,然后可以对毫秒数举行运算来猎取相差值

  • 有相似getFullYear()的要领提取时候值,参考

• 关于数字运算后的取整(Math对象的运用)

  • floor要领是取整,而且没有四舍五入的状况

• setInterval的运用

 var inputTime = document.getElementById('inputTime');
    var submitBtn = document.getElementById('submit');

    submitBtn.addEventListener('click', function () {
        countDownFunc();
    }, false);

    //倒计时func
    var countDownFunc = function(){
        setInterval(function () {
            var dstTime = new Date((inputTime.value));
            var now = new Date();
            var time = (dstTime - now) / 1000;
            console.log(time);
            // 秒转化为小时，分钟，天
            var day = Math.floor(time / (24 * 60 * 60));
            var hour = Math.floor(time % (24 * 60 * 60) / (60 * 60));
            var minute = Math.floor(time % (24 * 60 * 60) % (60 * 60) / 60);
            var second = Math.floor(time % (24 * 60 * 60) % (60 * 60) % 60);


            var str = "间隔还剩下:" + day + "天" + hour + "时" + minute + "分" + second + "秒";
            var _timmer = document.getElementById('view');
            _timmer.innerHTML = str;
        },1000)
    };