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 相关文章推荐
javascript 面向对象编程基础 多态
Aug 21 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
JavaScript实例 ODO List分析
Jan 22 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注销代码(session注销)
2012/05/31 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
pygame实现俄罗斯方块游戏
2018/06/26 Python
Python中的 enum 模块源码详析
2019/01/09 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
Python数据可视化图实现过程详解
2020/06/12 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
雷人标语集锦
2014/06/19 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
纪录片信仰观后感
2015/06/08 职场文书
高中历史教学反思
2016/02/19 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers