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

练习倒计时例子

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

html部分



结果:

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

你可能感兴趣的:(javascript)