用js实现倒计时效果-CSDN博客

本文链接：https://blog.csdn.net/weixin_65137412/article/details/129976563

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日期对象练习</title>
    <style>
        table {
            width: 600px;
            margin: 10px auto;
            border: 1px solid rgb(248, 244, 244);
            border-collapse: collapse;
        }
        
        td {
            border: 1px solid rgb(25, 26, 27);
            /* width: 300px; */
            height: 40px;
            text-align: center;
            line-height: 30px;
            color: rgb(101, 13, 243);
        }
    </style>
</head>

<body>

    <table>
        <tr>
            <td>
                 <!-- <td>软工2020级30班张三</td> -->
            </td>       
        </tr>
        <tr>
            <td>
                <h1 id="down" style="color: red;"></h1>
            </td>
        </tr>

        </tr>
    </table>
    <Script>
        window.onload=countdate;
        function countdate(){
           var nowtime= +new Date(); 
           var inputtime=+new Date("2023-5-22 0:0:0");
           var times=(inputtime-nowtime)/1000;
           var d=parseInt(times/60/60/24);
           d=d<10?"0"+d:d;
           var h=parseInt(times/60/60%24);
           h=h<10?"0"+h:h;
           var m=parseInt(times/60%60);
           m=m<10?"0"+m:m;
           var s=parseInt(times%60);
           s=s<10?"0"+s:s;
           document.getElementById("down").innerHTML= d+"天"+h+"时"+m+"分"+s+"秒";
        }
    </Script>
</body>

</html>

效果展示：