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 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
javascript的函数作用域
Nov 12 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
js 事件小结 表格区别
2007/08/13 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
Python命名空间详解
2014/08/18 Python
Python对象转JSON字符串的方法
2016/04/27 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
python3正则模块re的使用方法详解
2020/02/11 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
房地产销售大学生自我评价分享
2013/11/11 职场文书
生产班组长岗位职责
2014/01/05 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
小学生作文批改评语
2014/12/25 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书