2种简单的js倒计时方式


Posted in Javascript onOctober 20, 2017

一般倒计时的时间都是后台传来的然后渲染到页面,这里有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);
}

如何使用

2种简单的js倒计时方式

2种简单的js倒计时方式

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

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

Javascript 相关文章推荐
JQuery中$之选择器用法介绍
Apr 05 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
pm2 部署 node的三种方法示例
Oct 20 #Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 #Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 #Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 #Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 #Javascript
jquery select插件异步实时搜索实例代码
Oct 20 #jQuery
移动端效果之IndexList详解
Oct 20 #Javascript
You might like
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
JS继承用法实例分析
2015/02/05 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python对列表排序的方法实例分析
2015/05/16 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
Python字符串的常见操作实例小结
2019/04/08 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
PHP如何与mysql建立链接
2013/05/05 面试题
工商管理自荐书
2014/07/06 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
学生通报表扬范文
2015/05/04 职场文书
入党群众意见范文
2015/06/02 职场文书
环保建议书范文
2015/09/14 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
一文搞懂redux在react中的初步用法
2021/06/09 Javascript