js实现漂亮的倒计时功能

打算写几篇博客总结下近来做的一个东西：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

这个的效果就比较差了：
js实现漂亮的倒计时功能

具体用法就不写了，这个地方顺便附上判断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实现漂亮的倒计时功能

相关推荐