倒计时演示 查看演示

引用timecountdown.min.js

<script src="https://www.xcsoft.cn/Public/js/timecountdown.min.js?v20150120"></script>

JS示例代码:

<script>
window.onload=function(){
    //倒计时间为时间格式的例子,格式:2015-10-29 16:05:59 或者 2015/10/29 不写时分秒时,默认为0,当时间后面加小数点时(时间格式要写完整格式:2015-10-19 00:00:00.3),则可以获取3位毫秒数
    xcsoft.countdown('2015-11-29 16:08:59.3',function(time){
        if(time.finish==true){
            //倒计时完成的操作
            }
        var string=time.day+'天'+time.hour+'时'+time.minute+'分'+time.second+'秒'
        document.getElementById("id109").innerHTML=string
        //time.stop=true;//强制停止
        });
    //倒计时间为时间戳的例子,js获得当前时间parseInt(new Date().getTime())需要除以1000,精确到秒的时间戳,同上,在后面加小数点,可获得相应位数的毫秒数.
    xcsoft.countdown(1447171200,function(time){
        var string=time.day+'天'+time.hour+'时'+time.minute+'分'+time.second+'秒'
        document.getElementById("id108").innerHTML=string
        },function(time){
            //倒计时完成的操作
            });
    //倒计时间为对象的例子
    /**
      * startTime:时间戳格式(秒),当为0时,则取系统当前时间,否则以startTime为起始时间,一般取服务器时间
      * endTime:同上,支持时间格式和时间戳格式(秒),小数点无效
      * msec:毫秒位数,和倒计时间为时间格式和时间戳的小数点位数类同.
      */
    var nextday='2015-11-11 00:00:00'
    document.getElementById("times").innerHTML=nextday;
    xcsoft.countdown({
        'startTime':0,//此处一般取服务器时间,用于防止更改当前系统时间而发生变动.
        'endTime':nextday,
        'msec':3
        },function(obj){
            document.getElementById("id100").innerHTML=obj.day;
            document.getElementById("id101").innerHTML=obj.hour;
            document.getElementById("id102").innerHTML=obj.minute;
            document.getElementById("id103").innerHTML=obj.second;
            document.getElementById("id104").innerHTML=obj.msecZero;
        },function(){
            document.getElementById("id100").innerHTML=1;
            });
    }
    //发送验证码的例子
    function start60(){
        var button60=document.getElementById("v");
        button60.disabled=true;
        var time=parseInt(new Date().getTime()/1000)+60
        xcsoft.countdown(time,function(obj){
            button60.innerHTML='请在'+((obj.minute*60)+obj.second)+'秒后再次获取';
            },function(obj){
                button60.disabled=false
                button60.innerHTML='请点击这里获取验证码'
                })
        }
    </script>

CSS示例代码:

<style>
*{padding: 0;margin: 0;font-family: "微软细黑"}
body{background: #ffffff}
span{display: block;width: 100%;text-align:center}
div{display: inline-block;height: 50px;padding:0 5px;text-align: center;vertical-align: middle;line-height: 50px;font-size: 45px;background: #930;color: #ffffff;}
input{width: 250px;height: 40px;outline: none;font-size: 40px;}
a{display: inline-block;background: #C60;color: #FFF;height: 50px;line-height: 50px;vertical-align: middle;text-align: center;font-size: 30px;}
b{color:#FF0; padding:0 5px;}
</style>

HTML示例代码:

<i id="id109" style="font-size:80px; background:#ff0000; text-align:center; display:block"></i>
<i id="id108" style="font-size:80px;background:#ffff00; text-align:center; display:block"></i>
<span> <a id="time">距离<b id="times">光棍节兼剁手节</b>还有</a><div id="id100"></div><a>天</a><div id="id101"></div><a>时</a><div id="id102"></div><a>分</a><div id="id103"></div><a>秒</a><div id="id104"></div> </span>
<span><button id="v" onclick="start60()" style="height:40px; padding:0 10px; margin:5px; font-size:16px;">请点击这里获取验证码</button></span>

timeCountDown使用方法

xcsoft.countdown(倒计时间[时间|对象],正常回调函数,结束回调函数);

参数:

       1.倒计时间:支持时间格式和时间戳,时间格式为:2015-10-28 16:54:10(或2015/10/29:当需要显示毫秒的时候,需要完整格式) 时间戳:1446019410(10位数)

       注:倒计时为对象的时候,看以上的js的倒计时为对象的例子

       Javascript获取时间戳时须除以1000,如:parseInt(new Date().getTime()/1000)

       不管是时间格式还是时间戳，后面加.2，即显示2位毫秒,最多3位，如2015-10-28 16:10:10.2,1446019410.2。

       2.正常回调函数(持续返回,直到结束):这里写返回数据后的逻辑判断,返回参数是一个对象,本实例命为time

       time.stop :可设置,强制结束,time.stop=true时,强制结束当前倒计时.

       time.decimal :可设置，小数点的位数,time.decimal=1;不管之前设置的几位，均改变为1位

       --------------------------------->>>

       time.finish :倒计时是否已经结束:默认false,当倒计时结束后,time.finish自动为true,与结束回调函数理同,均可用于当倒计时结束后的操作逻辑(选其一即可).

       time.year: 年

       time.day :天

       time.days: 总天数[year+day]

       time.hour : 时

       time.minute : 分

       time.second : 秒

       time.msec:毫秒

       当day,hour,minute,second,后面带上Zero时,不足两位数时自动补0,如:time.dayZero,当为8时,则自动转成08

       当msecZero时,则根据小数点的位数进行填充,如小数点的位数为3时,毫秒为8,则自动转成008

       3.结束回调函数(结束即返回):当倒计时结束后,即调用此函数,返回一个对象,和正常回调函数一样.

xcsoft.countup(计时起始时间,正常回调函数);

参数:

       1.计时起始时间:支持时间格式和时间戳,时间格式为:2015-10-28 16:54:10(或2015/10/29)时间戳:1446019410(10位数)

       Javascript获取时间戳时须除以1000,如:parseInt(new Date().getTime()/1000)

       2.正常回调函数(持续返回,无止尽):这里写返回数据后的逻辑判断,返回参数是一个对象,本实例命为time

       time.year: 年

       time.day :天

       time.days: 总天数[year+day]

       time.hour : 时

       time.minute : 分

       time.second : 秒

       当day,days,hour,minute,second,后面带上Zero时,不足两位数时自动补0,如:time.dayZero,当为8时,则自动转成08

       return true 停止当前计时

xcsoft.now(正常回调函数); //获得当前系统时间

参数:

       1.正常回调函数(持续返回,无止尽):这里写返回数据后的逻辑判断,返回参数是一个对象,本实例命为time

       time.date:实例化后的new Date()

       time.year: 年

       time.month :月

       time.day :天

       time.days: 总天数=time.day

       time.hour : 时

       time.minute : 分

       time.second : 秒

       当day,days,hour,minute,second,后面带上Zero时,不足两位数时自动补0,如:time.dayZero,当为8时,则自动转成08

标签  技巧

按键盘左右方向键可快速浏览上一篇(←)、下一篇(→)