使用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>