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 相关文章推荐
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
php以post形式发送xml的方法
2014/11/04 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
python中私有函数调用方法解密
2016/04/29 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
python怎么删除缓存文件
2020/07/19 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
3个CCIE对一个工程师的面试题
2012/05/06 面试题
新春寄语大全
2014/04/09 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书