美文网首页
如何用js原生方法写出倒计时

如何用js原生方法写出倒计时

作者: 周周很可爱 | 来源:发表于2019-10-14 20:02 被阅读0次

大家在浏览一些购物软件的时候,是不是经常会出现一些限时秒杀的活动呢?其实这里的倒计时 我们是可以用js代码去实现这个效果的,接下来我为大家介绍一下 如何敲出倒计时。
倒计时的逻辑就是 用 将来的时间 - 现在的时间
下面我们来分析一下写倒计时需要什么????
1、首先我们需要用function函数
2、其次我们是不是最少需要4个数据:天、时、分、秒
3、最后需要一个计时器setInterval

接下来我们看代码及注释理解

    <h2></h2> //创建h2标签,用来写入时间 在body后面写 在script前写     
  
    
         // 获取h2标签
      var h = document.getElementsByTagName('h2')[0];
      function countDown(y, m, d) {

        var now_time = new Date();//获取现在时间           
        var stop_time = new Date(y, m - 1, d); //截止时间
        var value = stop_time - now_time; //剩余时间 = 截止时间 - 现在时间
        console.log(value)//剩余时间毫秒数

        var days = Math.floor(value / 1000 / 60 / 60 / 24);//剩余时间换算成天           
        var hours = Math.floor(value / 1000 / 60 / 60 % 24);//剩余时间换算成时           
        var mintues = Math.floor(value / 1000 / 60 % 60); //剩余时间换算成分
        var seconds = Math.floor(value / 1000 % 60);//剩余时间换算成秒           
        
        return `${days<10?"0" + days:days}天${hours<10 ? "0"+days:hours}时${mintues<10 ? "0"+mintues:mintues}分${seconds < 10?"0"+seconds:seconds}秒`
    }//判断,如果显示在页面的天时分秒小于10的时候,在它们前面加0,显示两位数


    countDown(2019, 11, 1);//传入实参,就是我们想要的未来时间
    setInterval(function () {

        h.innerHTML = countDown(2019,11,1);   // 把剩余时间写入页面 隔一秒写一次
    }, 1000)

这样我们就敲出了一个倒计时,是不是很有趣呢,大家快来试试吧

相关文章

网友评论

      本文标题:如何用js原生方法写出倒计时

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