staticHeader(静态标头)

最新推荐文章于 2024-11-02 12:42:04 发布
妖为邻
最新推荐文章于 2024-11-02 12:42:04 发布
阅读量256
点赞数 3
文章标签： javascript html css3 标头 header
本文链接：https://blog.csdn.net/lulei5153/article/details/141504343
版权
<!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);
            margin-top: 15px;
            margin-left: -15px;
            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;
            }
            img {
                width: 60px;
                height: 35px;
                border-radius: 50%;
                transition: transform 0.3s ease;
                position: absolute;
                &:hover {
                    transform: scale(1.3);
                    filter: drop-shadow(0 0 0.3em #ff0202);
                }
            }
            .kong {
                margin-top: 7px;
                margin-left: 200px;
            }
            .ying {
                top: 7px;
                margin-left: 2px;
            }
        }
        /* 时间 */
        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;
            }
        }
        /* 全屏还原关闭按钮 */
        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>
<!-- <link rel="stylesheet" href=" staticHeader.css"> -->

<body>
    <!--  staticHeader(静态标头)-->
    <header id="staticHeader">头部 staticHeader(静态标头)</header>
</body>
<!-- <script src="staticHeader.js"></script> -->
<script >
    /**头部staticHeader 开始 */
/**
* HTML初始结构
*
* @returns 无返回值
*/
document.getElementById('staticHeader').innerHTML = `
    <!-- 头部 开始 -->
    <header class="dynamicHeader">
        <!-- 创建 <figure> 元素 -->
        <figure class="logo">
            <!-- 创建第一个 <a> 元素 -->
            <a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" target="_blank">
                <!-- 创建 <img> 元素 -->
                <img class="kong" src="file:///D:/img/icon.ico" alt="与妖为邻">
            </a>
            <!-- 创建第一个 <figcaption> 元素 -->
            <figcaption class="my_name1">与妖为邻</figcaption>
            <!-- 创建第二个 <figcaption> 元素 -->
            <figcaption class="my_name2">与妖为邻</figcaption>
            <!-- 创建第二个 <a> 元素 -->
            <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> 元素 -->
                <img class="ying" src="file:///D:/img/ying.png" alt="与妖为邻">
            </a>
        </figure>
        <!-- 创建 <time> 元素 -->
        <time datetime="2024-07-10" title="2024-07-10" class="dateTime" id="dateTime">2024-07-10</time>
        <!-- 创建 <iframe> 元素 -->
        <iframe class="tianqi" frameborder="0" width="280" height="36" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&id=99"></iframe>
        <!-- 创建 <menu> 元素 -->
        <menu>
            <!-- 创建第一个 <button> 元素 -->
            <button class="fullScreen" type="button">
                <!-- 创建第一个 <img> 元素 -->
                <img src="file:///D:/img/全屏.svg" alt="全屏">
            </button>
            <!-- 创建第二个 <button> 元素 -->
            <button class="exitFullScreen" type="button">
                <!-- 创建第二个 <img> 元素 -->
                <img src="file:///D:/img/还原.svg" alt="还原">
            </button>
            <!-- 创建第三个 <button> 元素 -->
            <button type="button" class="closeWindow">
                <!-- 创建第三个 <img> 元素 -->
                <img src="file:///D:/img/关闭.svg" alt="关闭">
            </button>
        </menu>
    </header>
    <!-- 头部 结束 -->
`;
/**
 * 显示当前时间
 *
 * @returns 无返回值
 */
function showTime() {
    var time = document.getElementById("dateTime");
    if (time) {
        var d = new Date();
        var y = d.getFullYear();
        var m = padZero(d.getMonth() + 1);
        var W = "星期" + "日一二三四五六".charAt(d.getDay());
        var D = padZero(d.getDate());
        var H = padZero(d.getHours());
        var M = padZero(d.getMinutes());
        var S = padZero(d.getSeconds());
        time.innerHTML = y + '-' + m + '-' + D + '<sub>' + W + '</sub>' + H + ':' + M + ':' + S;
    }
}

/**
 * 在数字小于10时，在数字前补零
 *
 * @param num 待补零的数字
 * @returns 返回补零后的数字字符串
 */
function padZero(num) {
    return num < 10 ? "0" + num : num;
}
showTime();
setInterval(showTime, 1000);
/**
 * 全屏函数
 *
 * @returns 无返回值
 */
function fullScreen() {
    var elem = document.documentElement;
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { // Firefox
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { // IE/Edge
        elem.msRequestFullscreen();
    }
}
/**
 * 退出全屏模式
 *
 * @returns 无返回值
 */
function exitFullScreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { // Firefox
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { // IE/Edge
        document.msExitFullscreen();
    }
}
// 获取全屏和还原按钮
var fullScreenBtn = document.querySelector(".fullScreen");
var exitFullScreenBtn = document.querySelector(".exitFullScreen");
var closeWindowBtn = document.querySelector(".closeWindow");
// 绑定点击事件
fullScreenBtn.addEventListener("click", fullScreen);
exitFullScreenBtn.addEventListener("click", exitFullScreen);
closeWindowBtn.addEventListener("click", function () {
    window.close();
});
// 监听全屏和还原事件
document.addEventListener("fullscreenchange", function () {
    if (document.fullscreenElement) {
        fullScreenBtn.style.display = "none";
        exitFullScreenBtn.style.display = "block";
    } else {
        fullScreenBtn.style.display = "block";
        exitFullScreenBtn.style.display = "none";
    }
});
// 全屏功能与关闭 结束
/*头部staticHeader 结束
*-------------------------------------------------------------------------------------------------
  */

</script>

</html>