打算写几篇博客总结下近来做的一个东西：www.eccpitbj.org/chitec2014
项目中要用到倒计时，找了几个，发现有比较漂亮的，当不支持ie6/ie7，后来没办法就做了兼容。现在将兼容方案介绍下：
- 在网上找了一个比较漂亮的javascript倒计时功能，效果如下：
用法就比较简单了，官网上都有，就不详细介绍了。官网地址：
https://github.com/nikhiln/Circular-Countdown
这个最大的问题是漂亮，但是使用了html5的canvas，所以ie6，ie7，ie8都不支持，我又在网上找了jquery的另外一个倒计时，两个结合起来即可，下来介绍另外一个兼容ie6/ie7/ie8.
https://github.com/hilios/jQuery.countdown
这个的效果就比较差了：
具体用法就不写了，这个地方顺便附上判断ie浏览器的脚本。
$PCenter.ISIE = /msie (\d+\.\d+)/i.test(navigator.userAgent) ? (document.documentMode || + RegExp['\x241']) : undefined; $PCenter.ISIE6 = /msie 6.0/i.test(navigator.userAgent) ? (document.documentMode || + RegExp['\x241']) : undefined; $PCenter.ISIE7 = /msie 7.0/i.test(navigator.userAgent) ? (document.documentMode || + RegExp['\x241']) : undefined; $PCenter.ISIE8 = /msie 8.0/i.test(navigator.userAgent) ? (document.documentMode || + RegExp['\x241']) : undefined;
<body>
<div id="countdown_container">
<div id="beautifulCounter">
<div class="ccounter">
<input class="knob hour" data-width="160" data-min="0" data-max="24" data-displayPrevious=true data-fgColor="#368cfd" data-readOnly="true" value="1">
<input class="knob minute" data-width="160" data-min="0" data-max="60" data-displayPrevious=true data-fgColor="#9dd97f" data-readOnly="true" value="1">
<input class="knob second" data-width="160" data-min="0" data-max="60" data-displayPrevious=true data-fgColor="#ffdd57" data-readOnly="true" value="0">
</div>
<div class="ccounter_title">
<div class="ccounter_label_hour"><span>小时</span></div>
<div class="ccounter_label"><span>分</span></div>
<div class="ccounter_label"><span>秒</span></div>
</div>
</div>
<div id="normalCounter" class="big-countdown">
<div id="clock">
</div>
</div>
</div>
<script>
if($PCenter.ISIE6 || $PCenter.ISIE7 || $PCenter.ISIE8){
$("#beautifulCounter").remove();
$('#clock').countdown('2014/05/14 20:00:00', function(event) {
var $this = $(this).html(event.strftime(''
+ '<span style="background-color: #368cfd">%H</span> 小时 '
+ '<span style="background-color: #9dd97f">%M</span> 分 '
+ '<span style="background-color: #ffdd57" >%S</span> 秒'));
});
} else {
$("#normalCounter").remove();
$(".ccounter").ccountdown(2014,05,14,'20:00');
}
</script>
</body>
相关推荐
在这个案例中，“js写的倒计时功能，简单漂亮交互好”指的是使用JavaScript实现的一个具有视觉吸引力且用户交互体验良好的倒计时组件。 倒计时功能在网页上有着广泛的应用，例如活动预告、考试倒计时、新年倒计时等...
在本示例中，我们将探讨如何利用JavaScript（Js）和Cascading Style Sheets（CSS）来创建一个类似广州亚运会倒计时的美观效果。 首先，我们需要了解JavaScript在倒计时中的作用。JavaScript是网页动态功能的核心，...
最后，`js/countdown.js`文件是整个项目的重点，实现了倒计时功能。jQuery的核心方法`$(document).ready()`用于确保DOM加载完成后再执行相关代码。首先，当用户点击“设置时间”按钮时，弹出一个对话框让用户输入倒...
在本文中，我们将深入探讨如何使用JavaScript实现一个简单而美观的彩色方块计时器和倒计时功能。JavaScript是一种广泛应用于网页开发的脚本语言，它可以为网站添加动态交互性，包括实时更新时间信息。 首先，让我们...
在Web开发中，倒计时功能经常被用于各种应用场景，如活动开始时间提醒、考试倒计时等。jQuery，作为一款轻量级的JavaScript库，提供了丰富的API来简化DOM操作，使得创建倒计时插件变得相对简单。本文将深入探讨基于...
综上所述，构建一个"漂亮的倒计时跳转404页面"涉及到网页设计原则、用户体验优化以及前端JavaScript技术的应用。通过合理的设计和编程，我们可以为用户提供一个既美观又能有效引导他们返回网站其他部分的404页面。在...
接下来，我们来看看如何在Bootstrap中实现倒计时功能。通常，这涉及到使用JavaScript（例如jQuery）与HTML和CSS结合。在HTML中，可以创建一个时间显示元素，然后在JavaScript中设置定时器来更新这个元素的内容。...
在这个案例中，JavaScript将用于实现倒计时功能。它会根据特定的日期计算剩余时间，并实时更新在页面上。这通常涉及到JavaScript的Date对象、定时器（setTimeout或setInterval）以及DOM操作（修改页面元素的文本或...
本文将详细解析"jquery倒计时源码"这一主题，旨在帮助开发者理解和实现自己的倒计时功能。 倒计时是网页应用中常见的功能，常用于活动开始时间预告、考试倒计时等场景。jQuery提供了丰富的API和方法，使得创建倒...
2. **计算剩余时间**：为了实现倒计时功能，我们需要计算目标时间与当前时间之间的差值，并将其转换为天、小时、分钟和秒。这通常涉及到`getTime()`、`setTime()`以及`diff()`等函数。 3. **定时更新**：使用`...
JavaScript在这套模板中起着关键作用，尤其是对于倒计时功能的实现。JavaScript库，可能是jQuery或者其他轻量级的库，用于处理动态更新时间显示，确保随着时间的推移，倒计时精确无误。此外，JavaScript也可能用于...
压缩包中的“倒计时”文件很可能包含了实现这个倒计时脚本的所有必要资源，如HTML文件（包含倒计时的结构和JavaScript代码）、CSS文件（定义倒计时的样式和动画）以及可能的图片或字体资源。为了使用这个脚本，...
例如，`border-radius`属性可以将矩形转换为圆形，而`animation`属性则用于定义自定义的过渡效果，使得进度条在倒计时过程中平滑变化。 在`index.html`中，可以看到HTML结构，通常包括一个`<canvas>`元素，用于显示...
在软件开发领域，计时器和倒计时器是常见的功能模块，广泛应用于各种应用中，如体育赛事、考试计时、健身训练等。计时器用于记录从某个时间点开始流逝的时间，而倒计时器则从设定的时间点开始向零倒数。这两个功能的...
总结起来，这个项目是一个使用JavaScript实现的、注重美学的倒计时定时器。开发者需要掌握JavaScript时间日期处理、DOM操作以及CSS样式设计等技能。通过阅读和理解`index.html`中的代码，可以学习到如何用JavaScript...
它不仅可以实现倒计时功能，还可以展示倒计时的天数、小时数、分钟数和秒数。该插件的亮点在于它使用了圆形进度条作为倒计时动画，既美观又富有现代感。 为了使用jQuery Final Countdown插件，开发者需要引入jQuery...
【标签】"元旦倒计时 项目源码"表明这是一份可供参考和学习的源代码，涵盖了元旦倒计时功能的实现。"项目源码"意味着你将能够获得完整的代码文件，以便于分析、修改或自定义你的倒计时应用。这可能是开源的，允许...
例如，可以用于倒计时、定时提醒或者游戏计时等。 2. **操作按钮**：提供开始、暂停和重新开始三个基本操作按钮，用户可以根据需要随时控制计时器的状态，增强了用户体验。 3. **自定义样式**：插件允许开发者通过...
标题中的“漂亮的网站上线倒计时bootstrap模板_html5 bootstrap 响应式模板UI前端源码.rar”表明这是一个基于HTML5、Bootstrap框架制作的响应式网站界面模板，特别用于展示网站上线倒计时功能。Bootstrap是Twitter...
计时器通常用于显示倒计时、实时计时或者任何需要动态更新时间的场景。C3counter.js的亮点在于它的视觉吸引力，它可以很好地融入各种网站设计，提升用户体验。 **图片作为计时器背景** 在网页设计中，将图片作为...