<!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) { // Firefoxelem.mozRequestFullScreen();} else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Operaelem.webkitRequestFullscreen();} else if (elem.msRequestFullscreen) { // IE/Edgeelem.msRequestFullscreen();}
}
/*** 退出全屏模式** @returns 无返回值*/
function exitFullScreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) { // Firefoxdocument.mozCancelFullScreen();} else if (document.webkitExitFullscreen) { // Chrome, Safari and Operadocument.webkitExitFullscreen();} else if (document.msExitFullscreen) { // IE/Edgedocument.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>
