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

如何使用

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

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

相关文章

  • 微信小程序实现点击按钮修改文字大小功能【附demo源码下载】

    微信小程序实现点击按钮修改文字大小功能【附demo源码下载】

    这篇文章主要介绍了微信小程序实现点击按钮修改文字大小功能,涉及微信小程序事件绑定及setData动态修改Page页面data数据,进而控制页面元素属性动态改变的相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • js单向链表的具体实现实例

    js单向链表的具体实现实例

    js单向链表的具体实现实例,可以排序,增加,查找,删除的单向链表,需要的朋友可以参考一下
    2013-06-06
  • LayUI switch 开关监听 获取属性值、更改状态的方法

    LayUI switch 开关监听 获取属性值、更改状态的方法

    今天小编就为大家分享一篇LayUI switch 开关监听 获取属性值、更改状态的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 第十篇BootStrap轮播插件使用详解

    第十篇BootStrap轮播插件使用详解

    Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式。本文给大家介绍BootStrap轮播插件使用详解,非常不错具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • 一个简单的JS时间控件示例代码(JS时分秒时间控件)

    一个简单的JS时间控件示例代码(JS时分秒时间控件)

    这篇文章主要介绍了一个简单的JS时间控件示例代码(JS时分秒时间控件)。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • ES6中的rest参数与扩展运算符详解

    ES6中的rest参数与扩展运算符详解

    rest参数和扩展运算符都是ES6新增的特性。下面这篇文章主要给大家介绍了关于ES6中rest参数与扩展运算符的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • 探索JavaScript中私有成员的相关知识

    探索JavaScript中私有成员的相关知识

    这篇文章主要介绍了探索JavaScript中私有成员的相关知识,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • 如何解决webpack-dev-server代理常切换问题

    如何解决webpack-dev-server代理常切换问题

    通常我们有一份webpack.dev.config.js使用webpack-dev-server的proxy,代理到开发服务器,来解决本地跨域问题。假如项目变大,可能需要proxy到不同环境,那么如何解决webpack-dev-server代理常切换问题,下面就一起来了解一下
    2019-01-01
  • javascript基础语法学习笔记

    javascript基础语法学习笔记

    这篇文章主要为大家分享了javascript基础语法学习笔记,帮助大家夯实javascript基础知识,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JavaScipt选取文档元素的方法(推荐)

    JavaScipt选取文档元素的方法(推荐)

    下面小编就为大家带来一篇JavaScipt选取文档元素的方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08

最新评论