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 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
判断控件是否已加载完成的代码
Feb 24 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
详解php中serialize()和unserialize()函数
2017/07/08 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
vue的for循环使用方法
2019/02/12 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
python实现汉诺塔方法汇总
2016/07/25 Python
用python实现对比两张图片的不同
2018/02/05 Python
python多线程下信号处理程序示例
2019/05/31 Python
python动态文本进度条的实例代码
2020/01/22 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
素质拓展感言
2014/01/29 职场文书
同志主要表现材料
2014/08/21 职场文书
库房管理员岗位职责
2015/02/12 职场文书
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers