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跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
深入了解JavaScript 私有化
May 30 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
layui table单元格事件修改值的方法
Sep 24 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代码
2010/08/08 PHP
Yii2中datetime类的使用
2016/12/17 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
jquery延迟对象解析
2016/10/26 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
python爬取代理ip的示例
2020/12/18 Python
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
陈安之励志演讲稿
2014/08/21 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
党支部四风整改方案
2014/10/25 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书