基于jQuery实现倒计时特效插件

基于jQuery实现倒计时特效插件

jQuery时间戳转换倒计时代码是一款可以数字时间转换,倒计时,数字转汉字等网站中常用到的代码,简单使用兼容性好。

使用方法
在页面引入相关JS样式代码

1
2
<script src="countdown.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>

Javascript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function(){
    $(".timeBar").each(function () {
        $(this).countdownsync({
            dayTag: "",
            hourTag: "<label class='tt hh dib vam'>00</label><span>时</span>",
            minTag: "<label class='tt mm dib vam'>00</label><span>分</span>",
            secTag: "<label class='tt ss dib vam'>00</label><span>秒</span>",
            dayClass: ".dd",
            hourClass: ".hh",
            minClass: ".mm",
            secClass: ".ss",
            isDefault: false,
            showTemp:1

        }, function () {
            location.reload();
        });
    });
});

HTML结构
实现倒计时的HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
     <h3>60秒倒计时</h3>
     <p>data="60" </p>
    <div class="container timeBar ys1" data="60" ></div>
   
    <h3>600秒倒计时</h3>
    <p>data="600秒倒计时" </p>
    <div class="container timeBar ys2" data="600" ></div>
   
    <h3>160000秒倒计时</h3>
    <p>data="160000" </p>
    <div class="container timeBar ys3" data="160000" ></div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论