部分效果图：

描述说明：

使用方法

1、引入的文件：

<script src="jquery/jquery-1.8.2.min.js"></script>
<link href="jcountdown/jcountdown.css" rel="stylesheet" type="text/css">
<script src="jcountdown/jquery.jcountdown.min.js"></script>

2、在需要插入倒计时的位置添加以下代码：

<div class="countdown"></div>

3、显示倒计时需要的js代码：

$(function() {
    config = {
        timeText:  '2018/7/25 00:00:00', //倒计时时间，格式：年/月/日 时:分:秒
        timeZone:'8' , //时区，GMT号码
        style: "flip", //显示的样式，flip,slide,metal,crystal(翻动、滑动、金属、水晶)
        color: "white", //显示的颜色，可选值white,black(黑色、白色)
        width: 0, //倒计时宽度，无限制，默认为0
        textGroupSpace: 15, //天、时、分、秒之间间距
        textSpace: 0, //数字之间间距
        reflection: !0, //是否显示倒影
        reflectionOpacity: 10, //倒影透明度
        reflectionBlur: 0, //倒影模糊程度
        dayTextNumber: 3, //倒计时天数数字个数
        displayDay: !0, //是否显示天数
        displayHour: !0, //是否显示小时数
        displayMinute: !0, //是否显示分钟数
        displaySecond: !0, //是否显示秒数
        displayLabel: !0, //是否显示倒计时底部label
        //完成事件，您可以在时间结束时执行一些脚本，在创建倒计时时只需传递一个函数即可。
        onFinish: function() {}
    };
    $(".countdown").jCountdown(config);
});

转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/278.html

　　1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途，下载后请24小时内删除。
　　2、本站所有内容均不能保证其完整性，不能接受请勿购买或下载，如需完整程序，请去其官方购买正版使用
　　3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。
　　4、如侵犯到任何版权问题，请立即告知本站（立即在线告知），本站将及时删除并致以最深的歉意