jQuery.Countdown简单免费的jQuery倒计时插件

jQuery Countdown是一个倒计时jQuery插件, jQuery Countdown是一款免费的jQuery倒计时插件,使用非常简单,直接下载源文件拷贝里面的代码到你需要使用的页面,然后自定义倒计时的开始时间即可,缺点是兼容性不是很好,当然只是在像IE6、IE7这样淘汰的浏览器上面不能运行,其它主流浏览器上面还是可以完美运行的。

这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒。倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒计时。

jQuery.Countdown易于更换皮肤。代码使用非常简单,下载源码一看就明白了,一个页面可以有多个倒计时实例,可以停止和开始。

jQuery Countdown使用

1、添加下面的JS代码到你页面的Head标签内

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>

2、插入下面的DIV标签到你页面的Body区域

<div id="counter"></div>

3、插入下面重要的自定义配置代码到Head标签内

<script type="text/javascript">
      $(function(){
        $('#counter').countdown({//counter与Body区域的DIV标签名相同
          image: 'images/digits.png',//注意此处图片路径
          startTime: '01:12:12:00'//此次自定义倒计时开始时间
        });
    </script>

4、最后就是插入下面的CSS样式文件即可

.cntSeparator {
    font-size: 54px;
    margin: 10px 7px;
    color: #000;
}
.desc { margin: 7px 3px; }
.desc div {
   float: left;
   font-family: Arial;
   width: 70px;
   margin-right: 65px;
   font-size: 13px;
   font-weight: bold;
   color: #000;
}

示例: 

Basic coupon site with format N days hr:min:sec

Advance coupon with conditionals and pluralization, format N weeks N days hr:min:sec

Product launch in… (callback style)

New year’s eve (legacy style)

Multiple instances on the same page

Calculate the countdown total hours


教程:http://hilios.github.io/jQuery.countdown/examples/advanced-coupon-site.html

GitHub:https://github.com/hilios/jquery.countdown

下载:https://github.com/hilios/jQuery.countdown/releases/download/2.1.0/jquery.countdown-2.1.0.zip


赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏