利用JS实现指定时间动态倒计时功能

更新时间:2018-08-17 17:00:21点击:109

在浏览一些购物类的网站时,常常会看到限时抢购类的倒计时功能;这种倒计时功能我们可以利用JS来实现,下面分享一段实现代码,需要的朋友可以收藏下:

 

       显示格式:剩余时间:27天 21时 57分 16秒 ,显示格式及倒计时时间可以指定设置;

       实现代码:

<i id="expireTime"></i> 
<script type="text/javascript"> 
  var expire = 2412169; //倒计时秒数 
  var expireTime = function(expires){ 
    if(expires > 0){ 
      var second = expires; 
    }else{ 
      var second = "0 分"; 
      return second; 
    } 
    var day = hour = min = ""; 
    if(second>86400){ 
      day = Math.floor(second/86400)+"天 "; 
      second = second%86400; 
    } 
    if(second>3600){ 
      hour = Math.floor(second/3600)+"时 "; 
      second = second%3600; 
    } 
    if(second>60){ 
      min = Math.floor(second/60)+"分 "; 
      second = second%60; 
    } 
    second = second+"秒"; 
    return day+hour+min+second; 
  } 
  var timeEle = document.getElementById("expireTime"); 
  var timer = window.setInterval(function(){ 
    timeEle.innerHTML = expireTime(expire--); 
    if(expire<0){ 
      clearInterval(timer); 
    } 
  },1000); 
</script>

      根据上述代码,我们也可以实现一个页面多个倒计时效果,我们可以将以上代码封装成一个函数进行调用,具体实现流程大家自己研究一下吧!


文章关键词  js实现倒计时方法,页面添加多个动态倒计时方法

注:本文转载自林州网站建设工作室,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除。