练习倒计时例子_v1.0-byKL

练习倒计时例子

倒计时就是时间一秒秒的倒数,一般都是目标时间跟现在时间进行比较

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)
    };