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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
Ajax::prototype 源码解读
Jan 22 Javascript
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
使用javascript做在线算法编程
May 25 Javascript
微信小程序canvas实现签名功能
Jan 19 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安全配置
2006/10/09 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
php关联数组快速排序的方法
2015/04/17 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
js+css在交互上的应用
2010/07/18 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
使用原生js写的一个简单slider
2014/04/29 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
python解析文件示例
2014/01/23 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
英语演讲稿范文
2014/01/03 职场文书
中专生职业生涯规划书范文
2014/01/10 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
商务考察邀请函范文
2014/01/21 职场文书
秋天的图画教学反思
2014/05/01 职场文书
个人委托书范本汇总
2014/10/01 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS