staticHeader(静态标头)：精减代码，添加个倒计时-CSDN博客

本文链接：https://blog.csdn.net/lulei5153/article/details/142294815
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>staticHeader(静态标头)</title>
</head>
<style type="text/css" media="screen" rel="stylesheet">
    /* 头部样式 */
    header {
        margin: -8px;
        padding: 0;
        width: 99vw;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #cbcbcb;
        position: fixed;
        /* logo */
        figure.logo {
            width: 262px;
            height: 50px;
            transform: scale(0.8) translate(-70px, 2px);
            border-radius: 50%;
            background: #f30303;
            box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
                inset -4px -4px 5px rgba(0, 0, 0, 0.6);
            z-index: 99;
            figcaption {
                background: hsl(0, 0%, 0%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-weight: bold;
                box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
                letter-spacing: -3px;
                line-height: 45px;
                border-radius: 50%;
                font-size: 40px;
                width: 152px;
            }
            .my_name1 {
                text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.726);
                clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
                transform: translate(35%, 0%);
                -webkit-text-stroke: #fffbfb 1px;
            }
            .my_name2 {
                text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);
                clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
                transform: translate(35%, -93%);
                -webkit-text-stroke: #ffffff 1px;
            }
            .avatarYing,
            .avatarKong {
                position: absolute;
                width: 60px;
                height: 35px;
                /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(243, 3, 3, 0.8)); */
                border-radius: 50%;
                margin-left: 204px;
            }
            img {
                --s: 60px;
                --b: -5px;
                --f: 1;
                --bgOptions: content-box no-repeat center/ calc(100% / var(--f)) 100%;
                --shrink: calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b));
                padding-top: 15px;
                width: var(--s);
                height: var(--s);
                transform: scale(var(--f));
                transition: 0.5s;
                mask: linear-gradient(#000 0 0) no-repeat center calc(0px - var(--shrink)) / calc(100% / var(--f) - 2 * var(--b)) 50%,
                    radial-gradient(circle closest-side, #fff 60%, transparent) var(--bgOptions);
            }
            .avatarYing {
                margin-left: 0px;
                margin-top: -77px;
            }
            .avatarKong {
                margin-left: 202px;
                margin-top: 13px;
            }
            .kong {
                margin-top: -40px;
                &:hover {
                    --f: 1.5;
                }
            }
            .ying {
                margin-top: -44px;
                --f: 1.4;
                &:hover {
                    --f: 1.8;
                }
            }
        }
        /* 时间 */
        time {
            background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 1.5rem;
            font-weight: 900;
            text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
            sub {
                -webkit-text-fill-color: #cfd601;
                text-shadow: 1px 1px 1px #100000;
                font-size: 1rem;
            }
        }
        /* 倒计时 */
        #countdownElement {
            font-size: 1.3rem;
            border-radius: 3px;
            background-color: #f3030300;
            padding: 3px;
        }
        /* 全屏还原关闭按钮 */
        menu {
            display: flex;
            button {
                background: none;
                border: none;
            }
            img {
                width: 35px;
                margin-top: 5px;
                margin-right: 5px;
                cursor: pointer;
                &:hover {
                    transform: scale(1.2);
                    padding: 5px;
                    background: #ffd000;
                }
            }
            button:nth-child(2) {
                display: none;
                /* 放大镜效果 */
                transform: scale(1.16);
            }
        }
    }
    /* 头部样式 结束 */
</style>
<body>
    <header id="staticHeader">头部 staticHeader(静态标头)</header>
</body>
<script>
    /**头部staticHeader 开始 */
    document.getElementById('staticHeader').innerHTML = `
  <header class="dynamicHeader">
        <figure class="logo">
            <div class="avatarKong">
                <a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" target="_blank">
                    <img class="kong" src="file:///D:/img/空抠图.png" alt="与妖为邻">
                </a>
            </div>
            <figcaption class="my_name1">与妖为邻</figcaption>
            <figcaption class="my_name2">与妖为邻</figcaption>
            <div class="avatarYing">
                <a href="file:///D:/web/html%E9%A6%96%E9%A1%B5/%E5%A4%87%E5%BF%98%E5%BD%95.html" title="首页"
                    target="_blank">
                    <img class="ying" src="file:///D:/img/荧抠图.png" alt="与妖为邻">
                </a>
            </div>
        </figure>
        <time datetime="2024-07-10" title="2024-07-10" class="dateTime" id="dateTime">2024-07-10</time>
        <button onclick="dialogCountdownElement.showModal()" id="countdownElement">倒计时</button>
        <dialog id="dialogCountdownElement">
            <form method="dialog">
                <div>
                    <label for="message">更改提示信息：</label>
                    <input type="text" id="message" value="距离2024年国庆节还有：">
                </div>
                <div>
                    <label for="targetDate">更改目标日期：</label>
                    <input type="date" id="targetDate">
                </div>
                <button type="submit" style="display: block; margin: 5px auto;">关闭</button>
            </form>
            <p>2025主要节日时间表</p>
            <ul>
                <li>元旦：2025年1月1日</li>
                <li>春节：2025年2月12日</li>
                <li>清明节：2025年4月4日</li>
                <li>劳动节：2025年5月1日</li>
                <li>端午节：2025年6月2日</li>
                <li>中秋节：2025年9月21日</li>
                <li>国庆节：2025年10月1日</li>
            </ul>
        </dialog>
        <iframe class="tianqi" frameborder="0" width="280" height="36" scrolling="no" hspace="0"
            src="https://i.tianqi.com/?c=code&id=99"></iframe>
        <menu>
            <button class="fullScreen" type="button">
                <img src="file:///D:/img/全屏.svg" alt="全屏">
            </button>
            <button class="exitFullScreen" type="button">
                <img src="file:///D:/img/还原.svg" alt="还原">
            </button>
            <button type="button" class="closeWindow">
                <img src="file:///D:/img/关闭.svg" alt="关闭">
            </button>
        </menu>
    </header>
`;
    /* 现在时间 */
    (s = el => { d = new Date, f = n => ("0" + n).slice(-2), w = "日一二三四五六"; el.innerHTML = `${d.getFullYear()}-${f(d.getMonth() + 1)}-${f(d.getDate())}<sub>星期${w[d.getDay()]}</sub>${f(d.getHours())}:${f(d.getMinutes())}:${f(d.getSeconds())}` })(setInterval(() => ["dateTime"].forEach(id => s(document.getElementById(id))), 1000));
    /* 现在时间 结束 */
    /* 倒计时 */
    function countdown() {
        // 从localStorage读取数据
        window.onload = () => {
            ['message', 'targetDate'].forEach(key => {
                const value = localStorage.getItem(key);
                if (value) document.getElementById(key).value = value;
            });
        };
        const saveData = () => {
            ['message', 'targetDate'].forEach(key => {
                localStorage.setItem(key, document.getElementById(key).value);
            });
        };
        ['message', 'targetDate'].forEach(id => {
            document.getElementById(id).addEventListener('input', saveData);
        });
        const showCountdown = () => {
            const message = document.getElementById('message').value;
            const targetDate = new Date(document.getElementById('targetDate').value || '2024-10-01');
            const diff = targetDate - new Date();
            const formatTime = (ms, unit) => Math.floor((ms / unit) % 60);
            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            document.getElementById('countdownElement').innerHTML = `${message}${days}天${formatTime(diff, 1000 * 60 * 60)}小时${formatTime(diff, 1000 * 60)}分${formatTime(diff, 1000)}秒`;
        };
        setInterval(showCountdown, 1000);
        showCountdown();  // 首次调用
    }
    // 启动倒计时
    countdown();
    /* 倒计时 结束 */
    /**
     * 全屏函数
     */
   function toggleFullScreen() {
    var elem = document.documentElement;
    if (document.fullscreenElement) {
        document.exitFullscreen();
    } else {
        elem.requestFullscreen();
    }
}
// 获取按钮
var fullScreenBtn = document.querySelector(".fullScreen");
var exitFullScreenBtn = document.querySelector(".exitFullScreen");
var closeWindowBtn = document.querySelector(".closeWindow");
// 绑定事件
fullScreenBtn.addEventListener("click", toggleFullScreen);
exitFullScreenBtn.addEventListener("click", toggleFullScreen);
closeWindowBtn.addEventListener("click", () => window.close());
// 监听全屏变化
document.addEventListener("fullscreenchange", () => {
    fullScreenBtn.style.display = document.fullscreenElement ? "none" : "block";
    exitFullScreenBtn.style.display = document.fullscreenElement ? "block" : "none";
});
    /*头部staticHeader 结束
    *-------------------------------------------------------------------------------------------------
      */
</script>
</html>