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 相关文章推荐
js调用flash的效果代码
Apr 26 Javascript
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
纯js实现倒计时功能
Jan 06 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
详解react组件通讯方式(多种)
May 06 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
python del()函数用法
2013/03/24 Python
9种python web 程序的部署方式小结
2014/06/30 Python
解决Python传递中文参数的问题
2015/08/04 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
会计专业自荐信范文
2013/12/02 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
食堂个人先进事迹
2014/01/22 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
企业安全生产检查制度
2015/08/06 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书