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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
php数据类型判断函数有哪些
2013/09/23 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
Firefox outerHTML实现代码
2009/06/04 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
js实现简单页面全屏
2019/09/17 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
从运行效率与开发效率比较Python和C++
2018/12/14 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
Python 线程池用法简单示例
2019/10/02 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
毕业生求职推荐信
2013/11/04 职场文书
施工人员岗位职责
2013/12/12 职场文书
公司中秋节活动方案
2014/02/12 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
技术员个人工作总结
2015/03/03 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript