美文网首页
倒计时的实现

倒计时的实现

作者: 王二彪 | 来源:发表于2019-07-20 10:34 被阅读0次

    倒计时实现的思路
    获取现在的时间与过去的时间差;
    求出他们的分钟数
    加入定时器

    // 获取他HTML中的h2元素
    var h = document.getElementsByTagName('h2')[0];
    function countDown(stoptimestr){
        // 获取当前的时间 
        var nowTime = new Date();
        //  获取停止的时间
        var stopTime = new Date(stoptimestr);
        // 获取他的时间差   停止的时间减去现在的时间
        var mistiming = stopTime.getTime() - nowTime.getTime();
        // 获取他的天数 
        var days = Math.floor(mistiming / 1000 / 60 / 60 / 24);
        // 获取他的小时
        var hours = Math.floor(mistiming / 1000 / 60 / 60 %24);
        // 获取他的分钟数
        var minuse = Math.floor(mistiming / 1000 / 60 %60);
        // 获取他的秒数 
        var seconds = Math.floor(mistiming / 1000 % 60);
        // 如果他的数值小于10的话 数值的前方加个0
        days < 10 ? days = '0' + days : days;
        hours < 10 ? hours = '0' + hours : hours;
        minuse < 10 ? minuse = '0' + minuse : minuse;
        seconds < 10 ? seconds = '0' + seconds : seconds;
        // 如果正确的话就返回他的倒计时时间  不是的话返回‘请输入正确时间’
        var rels = mistiming > 0 ? `${days}天${hours}时${minuse}分${seconds}秒` : '请输入正确时间';
    
        // 返回值  返回rels
        return rels;
    }
    // 定时器
    setInterval(function(){
        // 写入HTML的页面中
        h.innerHTML = countDown('2020-2-01 19:30:30')
    },1000) 
    

    相关文章

      网友评论

          本文标题:倒计时的实现

          本文链接:https://www.haomeiwen.com/subject/bkuylctx.html