HTML+CSS+JS 倒计时案例_html css js日历倒计时怎么做-CSDN博客

本文链接：https://blog.csdn.net/weixin_46041602/article/details/136110283

本文详细介绍了如何使用HTML、CSS和JavaScript创建一个带有倒计时功能的计时器，包括获取当前时间、设定截止时间以及倒计时显示。同时，文中提到了一些关键的语法点和注意事项，如时间戳处理和DOM元素的操作方法。

摘要由CSDN通过智能技术生成

HTML+CSS+JS 倒计时案例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .total{
        width: 80px;
        font-size:6px;
        position:absolute;
        top:0px;
        left: 0px;
        /*line-height: 60px;*/
        text-align: center;
        background-color: rgb(203, 241, 153);
       } 
       i{
        font-style: normal;
       }
       .now{
        line-height: 10px;
        margin-top: 10px;
       }
       .now i{
        font-size: 10px;
        color: rgb(4, 83, 46);
       }
       .rest{
        margin-top: 10px;
        font-size: 8px;
       }
       .rest span{
        background-color: #493f04;
        color:#fff;
        border-radius: 1px;
       }
       .end{
        margin-top: 10px;
        margin-bottom: 10px;
       }
       .end i{
        font-size: 10px;
        color:rgb(255, 0, 55)
       }
    </style>
</head>
<body>
    <div class="total">
        <p class="now"><i>当前时间</i><br><span></span></p>
        <div class="rest">
            <span id="hour">11</span>
            <i>:</i>
            <span id="minute">12</span>
            <i>:</i>
            <span id="second">13</span>
        </div>
        <div class="end"><i>截止时间</i><br><span></span></div>
    </div>

    <script>  
        //补零
        function fillZero(p){
           return p=p<10?'0'+p:p
        }
        //获取当前时间
        const now=document.querySelector('.now span')
        let date1=new Date()
        function Time(){
        date1=new Date()
        let Date1=fillZero(date1.getFullYear())+'-'+fillZero(date1.getMonth()+1)+'-'+fillZero(date1.getDate())+' '+fillZero(date1.getHours())+':'+fillZero(date1.getMinutes())+':'+fillZero(date1.getSeconds())
        return Date1}
        now.innerHTML=Time()
        setInterval(function(){
            now.innerHTML=Time()
        },1000)
        //截止时间
        const end=document.querySelector('.end span')
            let endTime=new Date('2024-02-13 22:42')
            let endTime1=fillZero(endTime.getFullYear())+'-'+fillZero(endTime.getMonth()+1)+'-'+fillZero(endTime.getDate())+' '+fillZero(endTime.getHours())+':'+fillZero(endTime.getMinutes())+':'+fillZero(endTime.getSeconds())
            end.innerHTML=endTime1
        //倒计时
        const rTime=document.querySelectorAll('.rest span')
        const hour1=document.querySelector('.rest #hour')
        const min1=document.querySelector('.rest #minute')
        const sec1=document.querySelector('.rest #second')
        let rest=new Date(endTime-date1)
        hour1.innerHTML=fillZero(rest.getHours()-8)
        min1.innerHTML=fillZero(rest.getMinutes())
        sec1.innerHTML=fillZero(rest.getSeconds())
        setInterval(function(){
            let rest=new Date(endTime-date1)
            let num=+rest
            if(num<10000){//十秒倒计时后字体变色
                for(let i=0;i<rTime.length;i++){
                rTime[i].style.color='red'   
            }}
            let k=+fillZero(rest.getHours())-8
            if(k<0){//到达截止时间，倒计时全部归零
            hour1.innerHTML='00'
            min1.innerHTML='00'
            sec1.innerHTML='00'
            }else{
            hour1.innerHTML=fillZero(rest.getHours()-8)
            min1.innerHTML=fillZero(rest.getMinutes())
            sec1.innerHTML=fillZero(rest.getSeconds())}
        },1000)
    </script>
</body>
</html>

效果图

语法及注意事项

获取当前时间：let date=new Date()
时间戳：let date=+new Date()/let date=+new Date('2024-02-13 00:00)
注意：时间戳指的是从1970年1月1日 00：00到你设置时间的间隔时间(单位是毫秒)
obj.innerHTML=XXX(这个必须是字符型数据，不是也会被强制转换成字符型数据)