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中的事件
Sep 23 Javascript
javascript 常用功能总结
Mar 18 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
json数据处理及数据绑定
Jan 25 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 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中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
UNIX文件类型
2013/08/29 面试题
优秀求职信范文分享
2013/12/19 职场文书
大学生实习证明范本
2014/01/15 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
春节超市活动方案
2014/08/14 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
作息时间调整通知
2015/04/22 职场文书
海洋天堂观后感
2015/06/05 职场文书
办公室管理规章制度
2015/08/04 职场文书
2016年感恩节寄语
2015/12/07 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android