倒计时功能_span.yxt-color-warning计时-CSDN博客

本文链接：https://blog.csdn.net/messary/article/details/121199547

倒计时功能

话不多说，线上效果图，时间是动态跳转的设置setInterval即可

在这里插入图片描述

html代码

 <p>现在时间是:<span id="now"></span></p>
 <p>距离今天结束还有:<span id="end"></span></p>

html代码较少，直接使用两个p标签在里面嵌套span标签即可

css代码

在这里插入图片描述

就设置了一个居中，字体大小，行高，颜色也很简单

js代码：最重要的就是这一部分，最最重要的是思路，要搞懂思路

先捋一遍思路，就是要获取今天剩下的时间就要先获y一天的时间的值，明天整点的时间，今天整点的时间，今天已经过去的时间，当前时间的毫秒值，剩下的时间值，然后通过一整天的时间-已经过去了的时间得到剩余的时间，然后在转换为小时，分钟，秒即可，

 // 获取当天的整点值
 let todayTime = new Date(`${year}/${month}/${day} 00:00:00`).getTime();    .getTime()代表当前Date对象所表示的时间距计算机元年1970年1月1日的毫秒数。     
 //一天整点的时间值 (即24时 * 60分 * 60秒  * 1000毫秒)，最终结果是86400000;
 let allDay = 24 * 60 * 60 * 1000;
 //明天整点时间值 (今天整点值 + 一天整点值 ).getTime();    
 let nextTime = new Date(todayTime + allDay).getTime();
 //获取当前时间的毫秒值
 let seconds = date.getTime();
 //今天过去的时间   (当前时间毫秒值+相差的8个小时)在和一整天的时间取余
 //计算机元年，1970年1月1日和北京时间相差8个小时
 let pastTime = (seconds +  8 * 60 * 60 * 1000) % allDay;
 // 距离今天结束还剩的时间单位秒 (一整天的时间值 - 今天已经过去的时间值)在除以1000，最终得到的值的单位是秒
 let resideTime = (allDay - pastTime) / 1000;
 //进行转换小时  (剩余的时间除以3600秒）然后再通过Math.floor()向下取整转换为小时
 let h = Math.floor(resideTime / 3600);   
 //分钟转换  (剩余的时间对3600取余再除以60秒）
 let m = Math.floor(resideTime % 3600 / 60);
 //秒转换(剩余的时间对3600取余再取余60秒）
 let s = Math.floor(resideTime % 3600 % 60);

上面的就是实现倒计时功能的最最主要的代码以及思路下面就全部的代码的截图

在这里插入图片描述

<!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>
        p {
            text-align: center;
            line-height: 40px;
            font-size: 30px;
        }
        
        p span {
            font-size: 40px;
            color: red;
        }
    </style>

    <body>
        <p>现在时间是:<span id="now"></span></p>
        <p>距离今天结束还有:<span id="end"></span></p>
        <p>加油吧！！！！！！！！！！！</p>
        <script>
            setInterval(function() {
                let date = new Date();
                // 年
                let year = date.getFullYear();
                // 月
                let month = date.getMonth();
                // 日
                let day = date.getDate();
                // 时
                let hour = date.getHours();
                // 分
                let minute = date.getMinutes();
                // 秒
                let second = date.getSeconds();
                // 对月份，日，分，秒进行设置当小于10的时候前面+0，这里需要注意月份必须加1，因为月份默认是从0开始计算的
                month = month < 10 ? ('0' + month + 1) : (month + 1);
                day = day < 10 ? ('0' + day) : day;
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                // 获取界面显示的窗口
                let now = document.querySelector("#now");
                // 将数据渲染到界面上去
                now.innerText = year + '年' + month + '月' + day + '日' + hour + '时' + minute + '分' + second + '秒';

                // 获取当天的整点值
                let todayTime = new Date(`${year}/${month}/${day} 00:00:00`).getTime();
                // 获取一整天的毫秒值
                let allDay = 24 * 60 * 60 * 1000;
                // 获取明天整点的值
                let nextTime = new Date(todayTime + allDay).getTime();
                // 当前时间的整点毫秒值
                let seconds = date.getTime();
                // 计算机元年，1970年1月1日和北京时间相差8个小时
                // 今天过去的时间
                let pastTime = (seconds + 8 * 60 * 60 * 1000) % allDay;
                // 距离今天结束还剩的时间单位秒
                let resideTime = (allDay - pastTime) / 1000;
                // 转换小时
                let h = Math.floor(resideTime / 3600);
                // 转换为分
                let m = Math.floor(resideTime % 3600 / 60);
                // 剩余的秒
                let s = Math.floor(resideTime % 3600 % 60);
                // 样式设置
                h = h < 10 ? ('0' + h) : h;
                m = m < 10 ? ('0' + m) : m;
                s = s < 10 ? ('0' + s) : s;
                // 渲染到界面
                end.innerText = h + '时' + m + '分' + s + '秒';
            }, 1000)
        </script>
    </body>
</html>


前端小白还在继续努力学习，一起加油，如果有上面代码有不对的地方，请各位大佬指出！！！！！！！！！