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

来源:https://www.sucaihuo.com/js/169.html 2015-06-10 14:23浏览(3155) 收藏

本文将演示flipTimer时钟、倒计时和回调的方法,有点像日历翻页效果,兼容各大主流浏览器。
jQuery+flipTimer演示倒计时与时钟效果
分类:日期时间 > 倒计时 难易:中级
查看演示 下载资源 下载积分: 20 积分

演示一:时钟

<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('倒计时结束!');
            }
        });
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2