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 相关文章推荐
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
Vue自定义组件的四种方式示例详解
Feb 28 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数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
js 调整select 位置的函数
2008/02/21 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
前台文员岗位职责
2013/12/28 职场文书
优良学风班申请材料
2014/02/13 职场文书
人力资源求职信
2014/05/25 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
未婚证明书模板
2014/10/08 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
sql server 累计求和实现代码
2022/02/28 SQL Server
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android