jquery

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > jquery > jQuery倒计时效果

jQuery简单倒计时效果完整示例

作者:朱羽佳

这篇文章主要介绍了jQuery简单倒计时效果,结合完整实例形式分析了jQuery针对日期与时间的计算与页面元素动态操作相关技巧,需要的朋友可以参考下

本文实例讲述了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日期与时间操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:
阅读全文