jQuery翻转倒计时定时器插件

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

 45409  227  查看评论 (25)
分享到微信朋友圈
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});


相关插件-日期和时间

jQuery日期时间选择器插件

jQuery日期时间选择器插件
  日期和时间
 60816  282

自定义样式日程插件(原创)

可以根据需求自定义显示样式,当前demo为显示一个周
  日期和时间
 29816  193

移动端日期选择插件mtimer

移动端日期选择插件
  日期和时间
 67500  252

mobiscroll可上下滑动的日期时间插件

上下滑动日期时间插件,也可用做上下滑动选择菜单,移动端可用。
  日期和时间
 31806  244

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

    冰冷的夜 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
    怎么让时间固定在某一时刻 回复
    可以改样式吗?
    回复
    wjs57y 0
    2017/12/17 20:07:28

    时区偏移不是整数咋弄

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

    怎么弄成倒计时啊 

    回复
    果断~ 0
    2016/7/20 15:07:53
    不是倒计时啊  是在加时间  
        小熊饼干0
        2017/2/20 14:24:10

        请问你有没有改成倒计时?

    回复
取消回复