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 globalStorage类代码
Jun 04 Javascript
jquery tools 系列 scrollable学习
Sep 06 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 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中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
python基础教程之获取本机ip数据包示例
2014/02/10 Python
有趣的python小程序分享
2017/12/05 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
小学毕业感言150字
2014/02/05 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
公司业务员岗位职责
2014/03/18 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
邀请函的格式
2015/01/30 职场文书
公司管理制度范本
2015/08/03 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers