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

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

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

淘建站为您提供更多_日期时间_倒计时_倒计时_翻牌,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 241 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。
分类:日期时间 > 倒计时 难易程度:中级

演示一:时钟

<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('倒计时结束!');
            }
        });
});

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/169.html
jQuery+flipTimer演示倒计时与时钟效果 希望对你有帮助,感谢您的支持!
  • jquery倒计时插件可自定义多个倒计时间展示

    jquery倒计时插件可自定义多个倒计时间展示

  • 高仿京东移动端首页纯js轮播 倒计时 触摸滑动 滚动特效

    高仿京东移动端首页纯js轮播 倒计时 触摸滑动 滚动特效

  • js css3仿手机app广告页倒计时效果

    js css3仿手机app广告页倒计时效果

  • jQuery倒计时插件6种不同倒计时效果代码

    jQuery倒计时插件6种不同倒计时效果代码

  • JS实现倒计时,时间到了显示活动开始

    JS实现倒计时,时间到了显示活动开始

  • jQuery一分钟带毫秒倒计时代码

    jQuery一分钟带毫秒倒计时代码

  • js自定义设置日期时间倒计时代码

    js自定义设置日期时间倒计时代码

  • jQuery手机短信验证码登录倒计时代码

    jQuery手机短信验证码登录倒计时代码

  • CSS & jQuery 制作一款漂亮的多彩时钟

    CSS & jQuery 制作一款漂亮的多彩时钟

  • js倒计时秒杀专场 结束有加遮罩的效果

    js倒计时秒杀专场 结束有加遮罩的效果

  • jquery商城促销活动倒计时设置天,小时,分钟,秒且显示到期提醒

    jquery商城促销活动倒计时设置天,小时,分钟,秒且显示到期提醒

  • 非常简单的倒计时,代码非常少,样式背景可以自己改

    非常简单的倒计时,代码非常少,样式背景可以自己改

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2