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 相关文章推荐
父节点获取子节点的字符串示例代码
Feb 26 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
js实现简易ATM功能
Oct 27 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
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
jQuery实现图片滑动效果
2017/03/08 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
Python字符转换
2008/09/06 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
大专生简历的自我评价
2013/11/26 职场文书
会计学个人自荐信模板
2013/12/13 职场文书
财务工作失职检讨书
2014/11/21 职场文书
大学生党性分析材料
2014/12/19 职场文书
财务经理岗位职责
2015/01/31 职场文书
廉政承诺书范文
2015/04/28 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
迎国庆主题班会
2015/08/17 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python