基于jQuery实现美观且实用的倒计时实例代码

首页

web前端

js教程

基于jQuery实现美观且实用的倒计时实例代码_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:22 PM

倒计时效果有着广泛的应用，比如奥运会倒计时、高考倒计时和放假倒计时等，本章节分享一个比较美观且实用的倒计时效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>倒计时效果代码</title>
<style type="text/css">
* {
 padding:0;
 margin:0;
}
.colockbox {
 width:250px;
 height:30px;
 overflow:hidden;
 color:#000000;
 background:url(mytest/jQuery/colockbg.png) no-repeat;
 margin:0px auto;
}
.colockbox span {
 float:left;
 display:block;
 width:40px;
 height:29px;
 line-height:29px;
 font-size:20px;
 font-weight:bold;
 text-align:center;
 color:#ffffff;
 margin-right:22px;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
 countDown("2016/2/3 6:30:59","#colockbox1"); 
}); 
function countDown(time,id){ 
 var day_elem=$(id).find('.day'); 
 var hour_elem=$(id).find('.hour'); 
 var minute_elem=$(id).find('.minute'); 
 var second_elem=$(id).find('.second'); 
 var end_time = new Date(time).getTime();
 var sys_second = (end_time-new Date().getTime())/1000; 
 var timer = setInterval(function(){ 
  if(sys_second>1) { 
   sys_second-=1; 
   var day=Math.floor((sys_second/3600)/24); 
   var hour=Math.floor((sys_second/3600)%24); 
   var minute=Math.floor((sys_second/60)%60); 
   var second=Math.floor(sys_second%60); 
   $(day_elem).text(day);
   $(hour_elem).text(hour<10&#63;"0"+hour:hour);
   $(minute_elem).text(minute<10&#63;"0"+minute:minute); 
   $(second_elem).text(second<10&#63;"0"+second:second);
  } 
  else { 
   clearInterval(timer); 
  } 
 }, 1000); 
} 
</script>
</head>
<body>
<div class="colockbox" id="colockbox1"> 
 <span class="day">00</span> 
 <span class="hour">00</span> 
 <span class="minute">00</span> 
 <span class="second">00</span> 
</div>
</body>
</html>

以上代码实现了我们的要求，可以实现秒到天的倒计时效果，下面就介绍一下实现过程。

一.实现原理:

原理比较简单，就是取得到期时间的时间戳减去当前时间的时间戳，就是两者之间相差的秒数，然后通过这个秒数除以3600就是相差的小时数，然后再除以24，然后使用Math.floor()函数进行下舍入，就是相差的天数，下面获取小时、分钟和秒都是此原理。使用定时器函数每隔一秒调用一次相应的函数就实现了倒计时的效果。

二.代码注释:

1.$(function(){}）,当文档结构完全加载完毕再去执行函数中的代码。
2.countDown("2016/2/3 6:30:59","#colockbox1")，调用函数，第一个参数是到期的时间，第二个是div的id属性值。
3.function countDown(time,id){}，声明此函数。
4.var day_elem=$(id).find('.day')，获取div下class属性值为day的对象。
5.var hour_elem=$(id).find('.hour')，获取div下class属性值为hour的对象。
6.var minute_elem=$(id).find('.minute')，获取div下class属性值为minute的对象。
7.var second_elem=$(id).find('.second')，获取div下class属性值为second的对象。
8.var end_time=new Date(time).getTime()，获取到期事件的时间戳。
9.var sys_second=(end_time-new Date().getTime())/1000，获取到期时间和当前时间相差的秒数。
10.var timer=setInterval(function(){}，1000），每隔一秒执行一次函数。
11.if(sys_second>1) ，如果相差的秒大于1。
12.sys_second-=1，秒减一。
13.var day=Math.floor((sys_second/3600)/24)，获取相差的天数。
14.var hour=Math.floor((sys_second/3600)%24)，获取相差的小时数，注意后面是取模运算。
15.var minute=Math.floor((sys_second/60)%60)，获取相差的分钟数。
16.var second=Math.floor(sys_second%60)，获取相差的秒数。
17.$(day_elem).text(day)，将天写入span元素。
18.$(hour_elem).text(hour 19.clearInterval(timer)，如果相差的秒数到0，就停止计时器函数setInterval的执行。

以上内容是小编给大家分享的基于jQuery实现美观且实用的倒计时实例代码，希望本文分享能够给大家带来帮助。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

如何创建和发布自己的JavaScript库？Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能？Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。

如何使用浏览器开发人员工具有效调试JavaScript代码？Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。

如何构建简单的jQuery滑块Mar 11, 2025 am 12:19 AM

本文将引导您使用jQuery库创建一个简单的图片轮播。我们将使用bxSlider库，它基于jQuery构建，并提供许多配置选项来设置轮播。如今，图片轮播已成为网站必备功能——一图胜千言！决定使用图片轮播后，下一个问题是如何创建它。首先，您需要收集高质量、高分辨率的图片。接下来，您需要使用HTML和一些JavaScript代码来创建图片轮播。网络上有很多库可以帮助您以不同的方式创建轮播。我们将使用开源的bxSlider库。 bxSlider库支持响应式设计，因此使用此库构建的轮播可以适应任何

jQuery矩阵效果Mar 10, 2025 am 12:52 AM

将矩阵电影特效带入你的网页！这是一个基于著名电影《黑客帝国》的酷炫jQuery插件。该插件模拟了电影中经典的绿色字符特效，只需选择一张图片，插件就会将其转换为充满数字字符的矩阵风格画面。快来试试吧，非常有趣！工作原理插件将图片加载到画布上，读取像素和颜色值： data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地读取图片的矩形区域，并利用jQuery计算每个区域的平均颜色。然后，使用