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 相关文章推荐
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
vue按需加载实例详解
Sep 06 Javascript
JavaScript WeakMap使用详解
Feb 05 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 的 __FILE__ 常量
2007/01/15 PHP
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
jquery 表格的增行删行实现思路
2013/03/21 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
python验证码识别教程之滑动验证码
2018/06/04 Python
python实现Flappy Bird源码
2018/12/24 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
保险经纪人求职信
2014/03/11 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
安全承诺书
2015/01/19 职场文书
总结高并发下Nginx性能如何优化
2021/11/01 Servers