倒计时效果练习

最新推荐文章于 2024-08-14 20:13:10 发布

我若成魔，佛赖我何，我就是程序狂魔

最新推荐文章于 2024-08-14 20:13:10 发布

阅读量95

点赞数 5

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/wangmengsasa/article/details/125519954

版权

HTML CSS JavaScript 倒计时实时更新

关键词由CSDN通过智能技术生成

HTML代码


    <div>
        <p>
            剩余
           <span class="hour"></span>
            时
           <span class="minute"></span>
            分
           <span class="coned"></span> 
            秒
        </p>
    </div>

CSS代码


    <style>
        div{
            width: 400px;
            height: 200px;
            margin: 100px auto;
            background: pink;
            padding-top: 100px;
        }
        div>p{
            width: 300px;
            height: 40px;
            margin: 0px auto;
            font-size: 16px;
        }
        div>p>span{
            display: inline-block;
            width: 40px;
            height: 40px;
            font-size: 16px;
            line-height: 40px;
            text-align: center;
            background: black;
            color: white;
        }
    </style>

JS代码

 //获取元素
            let hour=document.querySelector('.hour');
            let minute=document.querySelector('.minute');
            let coned=document.querySelector('.coned');
            let inputTime= +new Date("2022-8-20 8:00:00");//设置未来的时间
            //获取时 分 秒
            function shijian(){
               let newTime= + new Date();//获取当前总的毫秒数
               let times= (inputTime-newTime) /1000 //获取剩余总的毫秒数
               let h = parseInt(times/60/60%24);//获取当前小时
                   h = h<10 ?  '0' + h : h;//当小时数小于10的时候在前面加个0
                   hour.innerHTML=h;//把获取的小时数传到页面
               let m=parseInt(times/60%60);//获取当前分钟
                   m= m<10 ? '0' + m:m;//当分钟数小于10的时候在前面加个零
                   minute.innerHTML=m;//把获取的分钟传到页面
               let c=parseInt(times%60)//获取当前秒数
                   c = c<10 ? '0' + c:c;//当秒数小于10在前面加个0
                   coned.innerHTML=c;//把获取的秒数传到页面
            }
            setInterval(shijian,1000)//开启定时器每秒

效果图