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中自定义对象的属性方法分享
Jul 12 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
js网页右下角提示框实例
Oct 14 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
JavaScript实现京东快递单号查询
Nov 30 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
php中in_array函数用法分析
2014/11/15 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
PHP7 list() 函数修改
2021/03/09 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
Python中的匿名函数使用简介
2015/04/27 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Django实现图片文字同时提交的方法
2015/05/26 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
python中tab键是什么意思
2020/06/18 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
办公文员的工作岗位职责
2013/11/12 职场文书
美发活动策划书
2014/01/14 职场文书
三万活动总结
2014/04/28 职场文书
优秀大学生自荐信
2014/06/09 职场文书
优秀会计求职信
2014/07/04 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
springboot中的pom文件 project报错问题
2022/01/18 Java/Android