js倒计时简单实现方法


Posted in Javascript onDecember 17, 2015

本文实例讲述了js倒计时简单实现方法的代码,分享给大家供大家参考,具体如下:

function timeDown(second) {
  var month = '', day = '', hour = '', minute = '';
  if (second >= 86400 * 30) {
   month = Math.floor(second / (86400 * 30)) + '月';
   second = second % (86400 * 30);
  }
  if (second >= 86400) {
   day = Math.floor(second / 86400) + '天';
   second = second % (86400);
  }
  if (second >= 3600) {
   hour = Math.floor(second / 3600) + '小时';
   second = second % 3600;
  }
  if (second >= 60) {
   minute = Math.floor(second / 60) + '分';
   second = second % 60;
  }
  if (second > 0) {
   second = second ? second + '秒' : '';
  }
  return month + day + hour + minute + second;
 }

如果想显示倒计时效果,可以使用如下代码调用:

<!-- 引入jquery -->
<script>
 $(function () {
  var second = 10000;
  $('.remain_time').html(timeDown(second));
  setInterval(function () {
   second--;
   $('.remain_time').html(timeDown(second));
  }, 1000);
 })
</script>
<span class="remain_time"></span>

 jquery插件形式:

$.fn.timeDown = function (opt) {
    var second = opt.second;
    var tip = '已过期';
    var $this = this;
    self._timeDown = function (second) {
     var month = '', day = '', hour = '', minute = '';
     if (second >= 86400 * 30) {
      month = Math.floor(second / (86400 * 30)) + '月';
      second = second % (86400 * 30);
     }
     if (second >= 86400) {
      day = Math.floor(second / 86400) + '天';
      second = second % (86400);
     }
     if (second >= 3600) {
      hour = Math.floor(second / 3600) + '小时';
      second = second % 3600;
     }
     if (second >= 60) {
      minute = Math.floor(second / 60) + '分';
      second = second % 60;
     }
     if (second > 0) {
      second = second ? second + '秒' : '';
     } else {
      return tip;
     }
     return month + day + hour + minute + second;
    };
    $this.html(self._timeDown(second));
    setInterval(function () {
     second--;
     $this.html(self._timeDown(second));
    }, 1000)
   };
// 使用方式
$('.remain_time').timeDown({second:1000,tip:'已过期'})

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
高效的jquery数字滚动特效
Dec 17 #Javascript
JS函数的几种定义方式分析
Dec 17 #Javascript
js实现文字闪烁特效的方法
Dec 17 #Javascript
基于jquery实现省市联动特效
Dec 17 #Javascript
js实现网页收藏功能
Dec 17 #Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 #Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 #Javascript
You might like
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
PHP7 新增功能
2021/03/09 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
Python编程中装饰器的使用示例解析
2016/06/20 Python
python实现日常记账本小程序
2018/03/10 Python
浅谈python常用程序算法
2019/03/22 Python
Python列表推导式实现代码实例
2020/09/09 Python
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
委托公证书
2014/04/08 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
党员倡议书
2015/01/19 职场文书
初中信息技术教学计划
2015/01/22 职场文书
员工手册董事长致辞
2015/07/29 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python