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 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
node.js文件上传处理示例
Oct 27 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
JavaScript门面模式详解
Oct 19 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 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
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
JSON相关知识汇总
2015/07/03 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
python中通过预先编译正则表达式提高效率
2017/09/25 Python
如何在python中使用selenium的示例
2017/12/26 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
简单了解django文件下载方式
2020/02/10 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
我们是伦敦女孩:WalG
2018/01/08 全球购物
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
Java面试题汇总
2015/12/06 面试题
财务会计人员求职的自我评价
2014/01/13 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
应届生简历自我评价
2015/03/11 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
浅谈Python协程asyncio
2021/06/20 Python