美文网首页
简单的倒计时js

简单的倒计时js

作者: riyihu | 来源:发表于2017-07-23 20:19 被阅读0次

    '''
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>倒计时</title>
    <style type="text/css">
    .box{
    width: 660px;
    height: 300px;
    background: #181818 url() 0 0 no-repeat;
    margin: 0 auto;
    }
    p.top{
    width: 660px;
    height: 80px;
    border-bottom: 2px solid #A3FE47;
    margin: 0 auto;
    }

    p.i{
        line-height: 80px;
        font-style: normal;
        font-size:45px;
        color: #FFFFFF;
        padding-left: 180px;
    }
    
    p.ii{
        line-height: 100px;
        font-style: normal;
        font-size:30px;
        color: #FFFFFF;
    }
    
    p.box1{
        width: 100px;
        height: 100px;
        background: #7F7F7F url() 0 0 no-repeat;
        float: left;
        margin-left:50px; 
    }
    p.bottom{
        width: 550px;
        height: 50px;
        background: #7F7F7F url() 0 0 no-repeat;
        float: left;
        margin-left:50px; 
    }
    

    </style>
    </head>
    <body>

    <script type="text/javascript">
    window.onload= function(){

    var now=new Date();
    var atime=now.getTime();
    
    var yd=new Date('2018/01/01 00:00:00');
    var btime=yd.getTime();
    
    atime=parseInt(atime);
    btime=parseInt(btime);
    timec=(btime-atime);
    //                      秒  分 时 天
    days=Math.floor(timec/1000/60/60/24);//剩余天数
    
    hours=Math.floor(timec/1000/60/60-(days*24));
    
    minutes=Math.floor(timec/1000/60-(days*24*60)-hours*60);
    seconds=Math.floor(timec/1000-(days*24*60*60)-hours*60*60-minutes*60);
    
    document.getElementById('day').innerHTML=(days+" 天");
    document.getElementById('hour').innerHTML=(hours+" 时");
    document.getElementById('minute').innerHTML=(minutes+" 分");
    document.getElementById('sec').innerHTML=(seconds+" 秒");
    

    }
    </script>

    <div class="box">
    <p class="top i" id="top">距离高考还有:</p>
    <p class="box1 ii" id="day"></p>
    <p class="box1 ii" id="hour"></p>
    <p class="box1 ii" id="minute"></p>
    <p class="box1 ii" id="sec"></p>
    <p class="bottom" id="bottom"></p>
    </div>

    </body>
    </html>

    相关文章

      网友评论

          本文标题:简单的倒计时js

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