美文网首页
js中date倒计时

js中date倒计时

作者: 小纸人儿 | 来源:发表于2016-09-27 16:38 被阅读0次

    获取倒计时之前,我们不妨先来看怎样获取当前时间吧!!!

    function time(){
                var oDate = new Date();
                var year = oDate.getFullYear();
                var month = oDate.getMonth() + 1     ;
                var dDate = oDate.getDate();
                var day = oDate.getDay();
                var house = oDate.getHours();
                var minu = oDate.getMinutes();
                var sec = oDate.getSeconds();
                
                
                switch(day){
                    case 1:
                    day = '星期一';
                    break;
                    case 2:
                    day = '星期二';
                    break;
                    case 3:
                    day = '星期三';
                    break;
                    case 4:
                    day = '星期四';
                    break;
                    case 5:
                    day = '星期五';
                    break;
                    case 6:
                    day = '星期六';
                    break;
                    case 0:
                    day = '星期日';
                    break;
                }
                
                function double( t ){
                    if( t < 10 ){
                        t = '0' + t;
                    }
                    return t;
                }
                
                
                document.body.innerHTML = year + '年' + month +'月'+ dDate + '日  ' + day + ' ' + double(house) +':'+ double(minu) +':' + double(sec);
            }
            time();
            setInterval(time,1000);
    

    获取倒计时

    1、实现倒计时功能
    2、倒计时结束按钮可被点击,之前不可被点击

    <div id="lastTime">
        <span>0天 </span>
        <span>00: </span>
        <span>00: </span>
        <span>00 </span>
    </div>
    <br /><br />
    #btn{
        text-decoration: none;
        display: block;
        width: 100px;
        height: 35px;
        background: #ccc;
        text-align: center;
        line-height: 35px;
        color: #666;
    }
    #btn.btn{
        background: red;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
    }
    <a href="javascript:;" id="btn">即将开抢!</a>
    <script type="text/javascript">
        var oLt = document.getElementById("lastTime");
        var oBtn = document.getElementById("btn");
        time();
        var timer = setInterval( time , 1000 );
        function time(){
            var endTime = new Date('2016/10/01 00:00:00');
            var nowTime = new Date();
            var splus = endTime.getTime() - nowTime.getTime();
            //天 时 分 秒
            if( splus <= 1 ){
                clearInterval( timer );
                oBtn.className = 'btn';
                oBn.innerHTML = '开始秒杀!';
                oBtn.href = 'http://www.baidu.com';
                return;
            }else{
                oBtn.className = '';
            }
            var day = Math.floor( splus / 1000 / 60 / 60 / 24 );
            var hours = Math.floor( splus / 1000 / 60 / 60 % 24 );
            var min = Math.floor(splus / 1000 / 60 % 60);
            var sec = Math.floor(splus / 1000 % 60);
            oLt.innerHTML = day + '天 ' + double( hours ) + ':' + double( min ) + ':' + double( sec );
                    
            function double( n ){
                if( n < 10 ){
                    n = '0' + n;
                }
                return n;
            }
        }
    </script>
    

    效果图如下:

    Paste_Image.png

    相关文章

      网友评论

          本文标题:js中date倒计时

          本文链接:https://www.haomeiwen.com/subject/esrgettx.html