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 相关文章推荐
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
TypeScript 中接口详解
Jun 19 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
基于JSON数据格式详解
Aug 31 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 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
基于mysql的bbs设计(五)
2006/10/09 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
(function(){})()的用法与优点
2007/03/11 Javascript
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
Vue框架之goods组件开发详解
2018/01/25 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
管理学专业个人求职信范文
2013/09/21 职场文书
公司市场部岗位职责
2013/12/02 职场文书
管理心得体会
2013/12/28 职场文书
安全隐患整改报告
2014/11/06 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
Mysql数据库命令大全
2021/05/26 MySQL
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python