qinyi素材网
当前位置: 首页 > jQuery素材 > jQuery制作日历倒计时翻转效果
  时间: 2021-11-03   阅读:347

插件介绍

使用jQuery制作一个简单的日历倒计时翻转效果,只用引入必要的文件之后就能实现,不需要太多复制的代码。

简要教程

使用jQuery制作一个简单的日历倒计时翻转效果,只用引入必要的文件之后就能实现,不需要太多复制的代码。

使用方法

在HTML中引入js和css

<link href="css/media.css" rel="stylesheet" type="text/css"/>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="js/jquery.countdown.js"></script>

HTML结构

<div class="wrapper">
    <div class="cell">
        <div id="holder">
            <div class="digits"></div>
        </div>
    </div>
</div>
<div style="position:fixed;height:90px;width:100%;left:0;bottom:40px">
    <div class="footer-banner" style="width:728px; margin:0px auto"></div>
</div>

插件初始化

<script>
    $(function () {
        $(".digits").countdown({
            image: "images/digits.png",
            format: "mm:ss",
            startTime: "25:14"
        });
    });
</script>

展示效果

上一篇: 下一篇: