jQuery简单倒计时效果完整示例


Posted in Javascript onSeptember 20, 2016

本文实例讲述了jQuery简单倒计时效果。分享给大家供大家参考,具体如下:

前天做了一个活动项目,其中有一块需要做倒计时的效果,由于需求比较简单,所以也就没用网上各种倒计时的插件。今天抽空整理出来,分享给大家。

html 代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8"/>
  <title>倒计时效果</title>
  <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
  <style type="text/css">
  #countDown{font-size:48px;line-height:10;text-align:center;}
  </style>
</head>
<body>
  <div id="countDown"></div>
</body>
</html>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function countDown(years,months,days,hours,minutes){
  var dateFinal = new Date(years,months,days,hours,minutes);  //设置倒计时到达时间
  var dateNow = new Date();  //获取系统当前时间
  var dateSub = dateFinal - dateNow;  //计算差值,单位毫秒
  var day = hour = minute = second = dayBase = hourBase = minuteBase = secondBase = 0;  //初始化各个数值
  var timeHtml = '';
  timeHtml += '距离' + years + '年' + toDouble(months + 1) + '月' + toDouble(days) + '日' + toDouble(hours) + '时' + toDouble(minutes) + '分还剩下';
  dayBase = 24 * 60 * 60 * 1000;  //计算天数的基数,单位毫秒。1天等于24*60*60*1000毫秒
  hourBase = 60 * 60 * 1000;  //计算小时的基数,单位毫秒。1小时等于60*60*1000毫秒
  minuteBase = 60 * 1000;  //计算分钟的基数,单位毫秒。1分钟等于60*1000毫秒
  secondBase = 1000;  //计算秒钟的基数,单位毫秒。1秒钟等于1000毫秒
  day = Math.floor(dateSub / dayBase);  //计算天数,并取下限值。如 5.9天 = 5天
  hour = Math.floor(dateSub % dayBase / hourBase);  //计算小时,并取下限值。如 20.59小时 = 20小时
  minute = Math.floor(dateSub % dayBase % hourBase / minuteBase);  //计算分钟,并取下限值。如 20.59分钟 = 20分钟
  second = Math.floor(dateSub % dayBase % hourBase % minuteBase / secondBase);  //计算秒钟,并取下限值。如 20.59秒 = 20秒
  //当天数小于等于0时,就不用显示
  if(day <= 0){
    timeHtml += toDouble(hour) + '时' + toDouble(minute) + '分' + toDouble(second) + '秒';
  }else{
    timeHtml += day + '天' + toDouble(hour) + '时' + toDouble(minute) + '分' + toDouble(second) + '秒';
  }
  $('#countDown').html(timeHtml);
}
//当小时,分钟和秒钟小于 10 的时候会显示为个位数,比较难看,需要在前面加 0。
function toDouble(num){
  if(num < 10){
    return '0'+ num;
  }else{
    return '' + num;
  }
}
$(function(){
  setInterval(function(){
    countDown(2016,9,1,10,0);
  },1000);
});
</script>

运行效果图如下:

jQuery简单倒计时效果完整示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
Vue-component全局注册实例
Sep 06 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 #Javascript
jQuery实现的网页换肤效果示例
Sep 20 #Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 #Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 #Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 #Javascript
关于Javascript中defer和async的区别总结
Sep 20 #Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 #Javascript
You might like
随机广告显示(PHP函数)
2006/10/09 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
laravel入门知识点整理
2020/09/15 PHP
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
再谈JavaScript线程
2015/07/10 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Python实现子类调用父类的方法
2014/11/10 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
Python实现多属性排序的方法
2018/12/05 Python
给我一面国旗 python帮你实现
2019/09/30 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
python如何把字符串类型list转换成list
2020/02/18 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
招标授权委托书样本
2014/09/23 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
英文导游词
2015/02/13 职场文书
出国留学单位推荐信
2015/03/26 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android