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设置元素的readonly和disabled的写法
Sep 22 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
Vue的Options用法说明
Aug 14 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 Javascript
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
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
php字符串截取的简单方法
2013/07/04 PHP
如何在php中正确的使用json
2013/08/06 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
php实现短信发送代码
2015/07/05 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
DOM事件探秘篇
2017/02/15 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
tensorflow 环境变量设置方式
2020/02/06 Python
python实现批量命名照片
2020/06/18 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
应届毕业生个人自我评价
2013/09/20 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
生日宴会答谢词
2014/01/09 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
2014年部门工作总结
2014/11/12 职场文书
管理失职检讨书
2015/05/05 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电