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 相关文章推荐
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
详解Node全局变量global模块
Sep 28 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
微信小程序实现电影App导航和轮播
Nov 30 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连接Oracle for NT 远程数据库
2006/10/09 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
javascript引导程序
2008/10/26 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
python 提取文件的小程序
2009/07/29 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
C#面试常见问题
2013/02/25 面试题
物业招聘计划书
2014/01/10 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
应届生自荐书
2014/06/23 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
店铺转让协议书
2015/01/29 职场文书
2015年材料员工作总结
2015/04/30 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL