1.引入资源文件

<script src="jquery/jquery-1.8.2.min.js"></script>

<script src="jquery/jquery-ui-1.9.1.custom.min.js"></script>

<link href="jcountdown/jcountdown.css" rel="stylesheet" type="text/css">

<script src="jcountdown/jquery.jcountdown.min.js"></script>

2.html元素

div class="countdown"></div>

3.调用组件方法

$(function(){

    var b = new Date;

    var b = -b.getTimezoneOffset() / 60;

    var i = '2018/03/18 00:00:00';

    var newTime = +(new Date(i));

    var todayTime = +(new Date());

    var d_value = newTime - todayTime;

    var daysTime = Math.floor(d_value/24/60/60/1000);

    var dayTextNumber = 0;

    if(daysTime >= 100){

    dayTextNumber = 3;

    }else{

    dayTextNumber = 2;

    }

    var config = {

        timeText: i, //倒计时时间

        timeZone: b, //时区

        style: "flip", //显示的样式，可选值有flip,slide,metal,crystal

        color: "white", //显示的颜色，可选值white,black

        width: 0, //倒计时宽度

        textGroupSpace: 15, //天、时、分、秒之间间距

        textSpace: 0, //数字之间间距

        reflection: !0, //是否显示倒影

        reflectionOpacity: 10, //倒影透明度

        reflectionBlur: 0, //倒影模糊程度

        dayTextNumber: dayTextNumber, //倒计时天数数字个数

        displayDay: !0, //是否显示天数

        displayHour: !0, //是否显示小时数

        displayMinute: !0, //是否显示分钟数

        displaySecond: !0, //是否显示秒数

        displayLabel: !0, //是否显示倒计时底部label

        onFinish: function() {}

    };

    $(".countdown").jCountdown(config);

});