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 ui(接口)介绍
Sep 17 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
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
PHP的FTP学习(一)
2006/10/09 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
php 表单验证实现代码
2009/03/10 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
总结一些js自定义的函数
2006/08/05 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
python实现html转ubb代码(html2ubb)
2014/07/03 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
机器学习实战之knn算法pandas
2019/06/22 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
Python如何批量生成和调用变量
2020/11/21 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
大学生就业自荐书
2014/06/16 职场文书
品质保证书格式
2015/02/28 职场文书
拉贝日记观后感
2015/06/05 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP