js倒计时简单实现方法

 更新时间:2015年12月17日 10:31:19   作者:eecjimmy  
这篇文章主要介绍了js倒计时简单实现方法,方便一些提示重要日期的来临,感兴趣的小伙伴们可以参考一下

本文实例讲述了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程序设计有所帮助。

相关文章

  • ts中的void和never类型及区别

    ts中的void和never类型及区别

    void类型和never类型都是ts新增的类型,这两者的共同点是都常见用于声明函数的返回值的类型,这里我们把它们两放在一起介绍有助于大家区分,这篇文章主要介绍了ts中的void和never类型及区别,需要的朋友可以参考下
    2023-05-05
  • Bootstrap 手风琴菜单的实现代码

    Bootstrap 手风琴菜单的实现代码

    这篇文章主要介绍了Bootstrap 手风琴菜单的实现代码,需要的朋友可以参考下
    2017-01-01
  • 理解JS事件循环

    理解JS事件循环

    这篇文章主要帮助大家理解JS事件循环,深入浅出的讲解了javascript事件循环,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • js仿微信抢红包功能

    js仿微信抢红包功能

    这篇文章主要为大家详细介绍了js仿微信抢红包功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • js实现验证码功能

    js实现验证码功能

    这篇文章主要为大家详细介绍了js实现验证码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • JS中的数组转变成JSON格式字符串的方法

    JS中的数组转变成JSON格式字符串的方法

    这篇文章主要介绍了JS中的数组转变成JSON格式字符串的方法,需要的朋友可以参考下
    2017-05-05
  • JS弹出对话框返回值代码(asp.net后台)

    JS弹出对话框返回值代码(asp.net后台)

    JS弹出对话框返回值代码,需要的朋友可以参考下。
    2010-12-12
  • js中将URL中的参数提取出来作为对象的实现代码

    js中将URL中的参数提取出来作为对象的实现代码

    将URL中的参数提取出来作为对象的实现代码,适合希望获取url参数的朋友。
    2011-08-08
  • js DNA动态序列比对代码

    js DNA动态序列比对代码

    JavaScript动态序列比对代码,随便 写着玩的,在网上见到用VC、VB写的比较多,这个算法以前在高中课本上见到过,我只是用Js写一下试试,或许还不是太准确。
    2010-07-07
  • JS 文件本身编码转换 图文教程

    JS 文件本身编码转换 图文教程

    JS编码转换,这句话本身就是一句具有二重义的话。通常理解为JS文件里能转换编码的代码,但是,我所碰到的问题并不是这样的,是要解决JS文件本身的编码问题,它是UTF-8编码的还是ANSI编码的?
    2009-10-10

最新评论