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中xml操作实现代码
Nov 21 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
three.js 制作动态二维码的示例代码
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
星际争霸任务指南——人族
2020/03/04 星际争霸
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
php object转数组示例
2014/01/15 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
Python中的多重装饰器
2015/04/11 Python
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
制药工程专业个人求职自荐信
2014/01/25 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
数学系个人求职信范文
2014/01/30 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
节能宣传周活动总结
2014/05/08 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
消防验收申请报告
2015/05/15 职场文书
张思德观后感
2015/06/09 职场文书
python单向链表实例详解
2022/05/25 Python
Python可视化神器pyecharts绘制水球图
2022/07/07 Python