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 firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
简单的渐变轮播插件
Jan 12 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 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
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
vue3.0 上手体验
2020/09/21 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
python逐行读取文件内容的三种方法
2014/01/20 Python
python中stdout输出不缓存的设置方法
2014/05/29 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
不可错过的十本Python好书
2017/07/06 Python
获取Django项目的全部url方法详解
2017/10/26 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
python2和python3哪个使用率高
2020/06/23 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
应聘自荐信
2013/12/14 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
工作表扬信
2015/01/17 职场文书
应聘教师自荐信
2015/03/26 职场文书
举起手来观后感
2015/06/09 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
Python借助with语句实现代码段只执行有限次
2022/03/23 Python