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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
JavaScript 学习技巧
Feb 17 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
package.json中homepage属性的作用详解
Mar 11 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对数组内元素进行随机调换的方法
2015/05/12 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
django模板结构优化的方法
2019/02/28 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
微型企业创业投资计划书
2014/01/10 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
评先进个人材料
2014/12/29 职场文书
先进个人材料怎么写
2014/12/30 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
python基础之模块的导入
2021/10/24 Python
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers