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自动判断浏览器分辨率的代码
Jan 28 Javascript
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
uniapp实现横向滚动选择日期
Oct 21 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
PHP4中实现动态代理
2006/10/09 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
简单实现python聊天程序
2018/04/01 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
Pandas分组与排序的实现
2019/07/23 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
pycharm导入源码的具体步骤
2020/08/04 Python
服务型党组织建设典型材料
2014/05/07 职场文书
项目经理任命书范本
2014/06/05 职场文书
承租经营合作者协议书
2014/10/01 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
远程教育学习心得体会
2016/01/23 职场文书
详解CSS3浏览器兼容
2022/12/24 HTML / CSS