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