打算写几篇博客总结下近来做的一个东西: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>
相关推荐
javascript实现倒计时
javascript 实现网页 倒计时 代码
日常开发中,电商经常使用到抢购,不过当抢购的时候会用到倒计时
倒计时功能插件js
一款几行简单的js实现的倒计时功能.zip 一款几行简单的js实现的倒计时功能.zip 一款几行简单的js实现的倒计时功能.zip
js实现倒计时的例子
js 倒计时!
1、设置自动关机后,即使关掉本窗口,仍然会继续执行定时自动关机。 2、再次打开页面时,会还原之前的倒计时状态。 3、点击“取消自动关机”按钮,可终止自动关机。
利用javascript技术实现时间倒计时
篮球倒计时 工程说明 本项目包含2个按键和4位数码管显示,要求共同实现一个篮球24秒的...在篮球24秒倒计时的模块架构设计方面,只需要一级架构下的BCD译码模块、倒计时模块和数码管显示模块,即可实现24秒倒计时功能。
js实现短信发送倒计时功能(正则验证).docx
利用js实现倒计时功能
比较漂亮的一套js写的倒计时界面,带四种模式可切换
vue混vue天时分秒倒计时效果 https://download.lllomh.com/cliect/#/product/F408496910757528
距离下班时间倒计时 功能描述 实时显示当前时间,并可以设置自己的下班时间,然后实时显示距离下班时间的倒计时。
利用VBA实现幻灯片播放的倒计时功能,找了好久,才找到的!!!
Android开发小功能,倒计时的实现。时间计时器倒计时功能。
在一些购物商城经常看到有很多商品做秒杀活动,也就是倒计时,本篇文章给大家介绍Javascript实现商品秒杀倒计时(时间与服务器时间同步),需要的朋友可以了解下
js实现倒计时效果,天,小时,分钟的倒计时