jQuery翻转倒计时定时器插件

所属分类:输入-日期和时间

 59951  371  查看评论 (27)
分享到微信朋友圈
X
jQuery翻转倒计时定时器插件 ie兼容7

使用方法

添加在HTML页面

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.flipcountdown.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.flipcountdown.css" />

添加div元素

<div id="flipcountdownbox1"></div>

和init flipcountdown

$(function(){
    $('#flipcountdownbox1').flipcountdown();
})

设置

- 尺寸(使用自举尺寸符号)

$("#flipcountdownbox1").flipcountdown({
    size:"lg"
});

lg-large大  md-middle中, default默认   sm-smallSM小  xs-Extra small 超小型

- 隐藏秒或分钟或小时

$("#flipcountdownbox1").flipcountdown({
    showHour:false,
    showMinute:false,
    showSecond:true
});

偏移时区

$("#flipcountdownbox3").flipcountdown({
    tzoneOffset:3,
    showSecond:false
});

- 12小时格式

$("#flipcountdownbox4").flipcountdown({am:true});


相关插件-日期和时间

日程表插件(fullcalendar),自定义任务显示、切换视图

加载事件数据、能切换年月视图、控制任务的自定义显示数量和效果、单元格绑定事件和元素
  日期和时间
 41342  317

基于amazeui全年日历

一款基于amazeui的全年日历,日历可以添加时间记录,中英文切换
  日期和时间
 42435  336

一个简单的jQuery日历插件Calendar.js

Calendar.js一个简单的日历插件;体积很小,使用方便,便于我们使用到不同场景,只需修改css就可适用moblie、pc
  日期和时间
 83074  311

jQuery日期时间选择插件jHsDate

一个简单的jQuery日期时间选择插件
  日期和时间
 46263  334

讨论这个项目(27)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    浅い.ウ韵 0
    2020/9/5 22:04:06
    下载下来,压缩包报错
        西瓜0
        2020/9/5 22:11:55
        刚测试下载文件正常,你用的是MAC系统吗?如果是,需要安装压缩软件解压不要用自带的。
    回复
    冰冷的夜 0
    2019/7/4 16:04:17
    有没有大佬知道怎么改成倒计时
        70
        2019/9/2 18:17:41

        我的怎么出不来啊

        <!DOCTYPE html>
        <html>
        
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
        
        
            <link rel="stylesheet" type="text/css" href="jquery.flipcountdown.css" />
            <title>index</title>
        </head>
        
        <body>
            <div id="flipcountdownbox1"></div>
        </body>
        
        <script type="text/javascript">
            window.onload = function() {
                $('#flipcountdownbox1').flipcountdown();
            }
        </script>
        
        </html>
        BattleofLexington0
        2019/9/2 20:46:19

        chrome浏览器f12自己看错误提示哦,你发这个看不出来错误的。

        70
        2019/9/3 10:52:25
        弄出来了,但是我设置size:lg 还是感觉太小了,怎么能再变大点
        西瓜0
        2019/9/3 11:44:58

        这个问题有点麻烦,数字是用图片作的,放大会失真,否则自己作一套图片替换,可以直接用CSS放大属性

        transform: scale(1.1);
         -ms-transform:scale(1.1);     /* IE 9 */
         -moz-transform:scale(1.1);     /* Firefox */
         -webkit-transform:scale(1.1); /* Safari 和 Chrome */
         -o-transform:scale(1.1);
    回复
    superdameng 0
    2018/12/17 11:21:49
    可以改成计数器吗 回复
    邓十八 0
    2018/8/14 13:17:49
    请问下,vue的项目引用这个插件,报错,找不到flipcountdown()函数
    回复
    sunlong685 0
    2018/8/1 14:19:23
    这个没有倒计时
        /~ā&?Оo?0
        2019/4/2 15:40:56
        有倒计时
    回复
    导演丶 0
    2018/6/4 11:27:39
    这是搬运过来的 正确的文档在这里 https://xdsoft.net/jqplugins/flipcountdown/
        导演丶0
        2018/6/4 11:28:15
        设置固定时间
        jQuery('#flipcountdownbox6').flipcountdown({tick:function(){
        return new Date('5.10.2012 12:34:23');
        }});
    回复
    放荡的Daisy灬 0
    2018/4/3 10:24:13
    怎么让时间固定在某一时刻 回复
    Peter@小飞侠 0
    2018/2/22 16:57:29
    可以改样式吗?
    回复
    wjs57y 0
    2017/12/17 20:07:28

    时区偏移不是整数咋弄

    回复
    小熊饼干 0
    2017/2/20 14:22:59

    怎么弄成倒计时啊 

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复