2种简单的js倒计时方式

 更新时间:2017年10月20日 15:06:37   作者:逗伴不是瓣  
这篇文章主要为大家详细介绍了2个简单js倒计时方式,一是带天数的倒计时,二是单纯分钟和秒倒计时,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一般倒计时的时间都是后台传来的然后渲染到页面,这里有2个简单的倒计时方式

//带天数的倒计时
function countDown(times){
 var timer=null;
 timer=setInterval(function(){
  var day=0,
   hour=0,
   minute=0,
   second=0;//时间默认值
  if(times > 0){
   day = Math.floor(times / (60 * 60 * 24));
   hour = Math.floor(times / (60 * 60)) - (day * 24);
   minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);
   second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
  }
  if (day <= 9) day = '0' + day;
  if (hour <= 9) hour = '0' + hour;
  if (minute <= 9) minute = '0' + minute;
  if (second <= 9) second = '0' + second;
  //
  console.log(day+"天:"+hour+"小时:"+minute+"分钟:"+second+"秒");
  times--;
 },1000);
 if(times<=0){
  clearInterval(timer);
 }
}
//单纯分钟和秒倒计时
function resetTime(time){
 var timer=null;
 var t=time;
 var m=0;
 var s=0;
 m=Math.floor(t/60%60);
 m<10&&(m='0'+m);
 s=Math.floor(t%60);
 function countDown(){
  s--;
  s<10&&(s='0'+s);
  if(s.length>=3){
  s=59;
  m="0"+(Number(m)-1);
  }
  if(m.length>=3){
  m='00';
  s='00';
  clearInterval(timer);
  }
  console.log(m+"分钟"+s+"秒");
 }
 timer=setInterval(countDown,1000);
}

如何使用

更多关于倒计时的文章请查看专题: 《倒计时功能》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Webpack中publicPath路径问题详解

    Webpack中publicPath路径问题详解

    这篇文章主要介绍了Webpack中publicPath路径问题详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • JS(JQuery)操作Array的相关方法介绍

    JS(JQuery)操作Array的相关方法介绍

    本篇文章主要是对JS(JQuery)操作Array的相关方法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • Bootstrap按钮下拉菜单组件详解

    Bootstrap按钮下拉菜单组件详解

    这篇文章主要为大家详细介绍了Bootstrap按钮下拉菜单组件,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JavaScript实现继承的4种方法总结

    JavaScript实现继承的4种方法总结

    这篇文章主要介绍了JavaScript实现继承的4种方法总结,本文给出了原型链继承、构造继承、实例继承、拷贝继承等实现JS继承的方法,需要的朋友可以参考下
    2014-10-10
  • uniapp实现人脸识别功能详细示例

    uniapp实现人脸识别功能详细示例

    这次使用uni-app框架开发一个小程序,有一个刷脸功能,所以下面这篇文章主要给大家介绍了关于uniapp实现人脸识别功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • 详解处理bootstrap4不支持远程静态框问题

    详解处理bootstrap4不支持远程静态框问题

    这篇文章主要介绍了详解处理bootstrap4不支持远程静态框问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • javascript div 遮罩层封锁整个页面

    javascript div 遮罩层封锁整个页面

    在客户端浏览器中,可以在某个时机使用javascript把一个div作为遮罩层,来封锁整个页面。
    2009-07-07
  • 利用javascript中的call实现继承

    利用javascript中的call实现继承

    利用javascript中的call实现继承...
    2007-01-01
  • 浅谈js数组和splice的用法

    浅谈js数组和splice的用法

    下面小编就为大家带来一篇浅谈js数组和splice的用法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • JavaScript requestAnimationFrame动画详解

    JavaScript requestAnimationFrame动画详解

    这篇文章主要为大家详细介绍了JavaScript requestAnimationFrame动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09

最新评论