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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 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程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
python版本五子棋的实现代码
2018/12/11 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
Python tkinter实现日期选择器
2021/02/22 Python
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
上班早退检讨书
2014/01/09 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
答谢词范文
2015/01/05 职场文书
会议简讯范文
2015/07/20 职场文书
《小小的船》教学反思
2016/02/18 职场文书
深入理解python协程
2021/06/15 Python
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android