节日倒计时

效果图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
</head>
<body>
    <!-- 距离国庆倒计时 -->
    <div>距离国庆倒计时:<span>00</span>天 
        <span>00</span>时
        <span>00</span>分
        <span>00</span>秒
    </div>
</body>
<script type="text/javascript">
function diffTime(){
    var guo = +new Date("2020-10-1");
    var now = +new Date();
    var different = guo - now;
    var diffSec = parseInt(different/1000);
    var resSec = diffSec%60;
    var diffMin = parseInt(diffSec/60);
    var resMin = diffMin%60;
    var diffHour = parseInt(diffMin/60);
    var resHour = diffHour%24;
    var days = parseInt(diffHour/24)
    var oSpan = document.getElementsByTagName("span");
    var timeArr = [days,resHour,resMin,resSec];
    for(var i=0;i<oSpan.length;i++){
        oSpan[i].innerText = timeArr[i];
    }
}
setInterval(diffTime,1000);
</script>
</html>

 

posted @ 2020-04-06 18:13  结发授长生  阅读(216)  评论(0)    收藏  举报