脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js倒计时

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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • setTimeout()与setInterval()方法区别介绍

    setTimeout()与setInterval()方法区别介绍

    计时器setTimeout()和setInterval()两个都是js的计时功能的函数两个有些区别，下面为大家简单介绍下，希望对大家有所帮助
    2013-12-12
  • JavaScript 空位补零实现代码

    JavaScript 空位补零实现代码

    JavaScript代码实现空位补零
    2010-02-02
  • JS路由跳转的简单实现代码

    JS路由跳转的简单实现代码

    本文给大家分享一个简单的js路由跳转功能，非常不错，需要的朋友参考下吧
    2017-09-09
  • 基于JavaScript实现动态添加删除表格的行

    基于JavaScript实现动态添加删除表格的行

    又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能，接下来通过代码实例给大家介绍JavaScript实现动态添加删除表格的行，需要的朋友参考下
    2016-02-02
  • 通过实例了解JS执行上下文运行原理

    通过实例了解JS执行上下文运行原理

    这篇文章主要介绍了通过实例了解JS执行上下文运行原理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 微信小程序实现获取准确的腾讯定位地址功能示例

    微信小程序实现获取准确的腾讯定位地址功能示例

    这篇文章主要介绍了微信小程序实现获取准确的腾讯定位地址功能,结合实例形式详细分析了微信小程序使用腾讯地理位置接口的相关注册、操作步骤及接口使用技巧,需要的朋友可以参考下
    2019-03-03
  • js判断手机系统是android还是ios

    js判断手机系统是android还是ios

    本文主要介绍了js判断手机系统是android还是ios的方法，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 第五章之BootStrap 栅格系统

    第五章之BootStrap 栅格系统

    Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。本文给大家介绍BootStrap 栅格系统的相关资料,需要的朋友可以参考下
    2016-04-04
  • TypeScript条件类型与内置条件类型超详细讲解

    TypeScript条件类型与内置条件类型超详细讲解

    我们可以使用TypeScript中的条件类型来根据逻辑定义某些类型，就像是在编写代码那样。它采用的语法和我们在JavaScript中熟悉的三元运算符很像：condition ? ifConditionTrue : ifConditionFalse。我们来看看他是怎么工作的
    2023-03-03
  • JavaScript实现点击自制菜单效果

    JavaScript实现点击自制菜单效果

    这篇文章主要为大家详细介绍了JavaScript实现点击自制菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-02-02

最新评论