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 相关文章推荐
web基于浏览器的本地存储方法应用
Nov 27 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
原生js实现吸顶效果
Mar 13 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 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
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
javascript简易画板开发
2020/04/12 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python验证码识别处理实例
2015/12/28 Python
Python OpenCV获取视频的方法
2018/02/28 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
python实现贪吃蛇双人大战
2020/04/18 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
企业管理培训感言
2014/01/27 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
保密工作目标责任书
2014/07/28 职场文书
社会实践活动总结格式
2015/05/11 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
Python Flask实现进度条
2022/05/11 Python