倒计时 

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <style type="text/css">
    .bj{
        background-color:grey;
    }
    #djs{
        text-align:center;
        color:#fff;
        font-size:20px; 
        margin-top:200px;
        text-shadow:1px 1px 1px rgba(0,0,0,0.4)
        }
    .js-bj {
        background:#505050;
        color:yellow;
        border-radius:5px;
        width:200px;
        font-family:Impact;
        font-size:120px;
        display:inline-block
        }
    #djs div{
        font-weight:bold;
        font-size:80px;
        margin-bottom:20px;
    }
  </style>
</head>
<body class='bj'>
    <div id="djs">
    </div> 
</body> 

<script type="text/javascript">
    var sdate = new Date();   //开始时间 
    var edate = new Date("2020/11/08");  //结束时间
    var diffdate = edate.getTime() - sdate.getTime();   //时间差的毫秒数
    var sysSecond = diffdate / 1000;
    console.log(sdate);
    console.log(edate);
    console.log(diffdate);

      
    var interValObj;

    function setRemainTime() {
        if (sysSecond > 0) {  
            var second = Math.floor(sysSecond % 60) >= 10 ? Math.floor(sysSecond % 60) : ('0' + Math.floor(sysSecond % 60));// 计算秒     
            var minite = Math.floor((sysSecond / 60) % 60) >= 10 ? Math.floor((sysSecond / 60) % 60) : ('0' + Math.floor((sysSecond / 60) % 60));//计算分
            var hour = Math.floor((sysSecond / 3600) % 24) >= 10 ? Math.floor((sysSecond / 3600) % 24) : ('0' + Math.floor((sysSecond / 3600) %24));//计算小时
            var day = Math.floor((sysSecond / 3600) / 24) >= 10 ? Math.floor((sysSecond / 3600) / 24) : ('0' + Math.floor((sysSecond / 3600) / 24));//计算天
            var year = Math.floor((sysSecond / 3600) / 24/365) >= 10 ? Math.floor((sysSecond / 3600) / 24/365) : ('0' + Math.floor((sysSecond / 3600) / 24/365));//计算年

            var timeHtml = "<div>距离软考还剩</div><br/><label class='js-bj'>" + day + "</label> 天 <label class='js-bj'>" + hour + "</label> 时 <label class='js-bj'>" + minite + "</label> 分 <label class='js-bj'>" + second + "</label> 秒"
            try {
                $("#djs").html(timeHtml);
                sysSecond--;
            }
            catch (e) { }
            interValObj = window.setTimeout("setRemainTime()", 1000);
        }
        else {
            $("#djs").html("<div style='color:yellow'>软考加油！！！</div><div style='color:yellow'>争取一次通过！！！</div>");
            window.clearTimeout(interValObj);
        }
    }
    setRemainTime();
</script>
</html>

 

posted @ 2015-05-21 14:17  怪咖Eric  阅读(259)  评论(0)    收藏  举报