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 26 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 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
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
python判断端口是否打开的实现代码
2013/02/10 Python
python多线程编程方式分析示例详解
2013/12/06 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
基于python中__add__函数的用法
2019/11/25 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
python绘制雷达图实例讲解
2021/01/03 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
车间班组长的职责
2013/12/13 职场文书
办理信用卡工作证明
2014/01/11 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python