jQuery+flipTimer演示倒计时与时钟效果

收藏

本文将演示flipTimer时钟、倒计时和回调的方法，有点像日历翻页效果，兼容各大主流浏览器。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

演示一：时钟

<div id="times"> 
    <div class="hours"></div> 
    <div class="minutes"></div> 
    <div class="seconds"></div> 
</div>

$(function() { 
    $('#times').flipTimer({ 
        seconds: true 
    }); 
});

演示二：倒计时

$(function() { 
        var d = new Date(); 
        var myDate = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + (d.getDate() + 1) + ' 00:00:00'; 
 
        $('#times').flipTimer({ 
            direction: 'down', 
            date: myDate 
        }); 
});

倒计时回调

$(function() { 
        var d = new Date(); 
        var myDate = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + (d.getSeconds() + 10); 
 
        $('#times').flipTimer({ 
            direction: 'down', 
            date: myDate, 
            callback: function() { 
                alert('倒计时结束！'); 
            } 
        }); 
});