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 预解析
Oct 25 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
JavaScript 数组去重详解
Sep 15 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(1)
2006/10/09 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
PHP导入导出Excel代码
2015/07/07 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
Python解析最简单的验证码
2016/01/07 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
详解python while 函数及while和for的区别
2018/09/07 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
python利用线程实现多任务
2020/09/18 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
pandas 数据类型转换的实现
2020/12/29 Python
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
《荷花》教学反思
2014/04/16 职场文书
师德师风自我评价范文
2014/09/11 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
公司借款担保书
2015/09/22 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
Docker官方工具docker-registry案例演示
2022/04/13 Servers