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遮罩层代码实例
Nov 14 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
javascript回调函数详解
Feb 06 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 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+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
js实现文字截断功能
2016/09/14 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
python得到单词模式的示例
2018/10/15 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
浅谈python锁与死锁问题
2020/08/14 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
网游商务专员求职信
2013/10/15 职场文书
大学生毕业鉴定
2014/01/31 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
先进班组事迹材料
2014/12/25 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
python 下划线的多种应用场景总结
2021/05/12 Python
zabbix配置nginx监控的实现
2022/05/25 Servers