网页制作常用代码 不断增加 [2025年7月8更新] 网页制作常用代码：一、直接使用节日代码：<!-- <script defer src="https://four-root-occupation.glitch.me/chunjie-denglong.js"></script> 春节快乐--> <!-- <script defer src="https://four-root-occupation.glitch.me/wuyi-denglong.js"></script> 五一快乐--> <!-- <script defer src="https://four-root-occupation.glitch.me/guoqing-denglong.js"></script> 国庆快乐--> <!-- <script defer src="https://four-root-occupation.glitch.me/yuandan-denglong.js"></script> 元旦快乐--> <!-- <script defer src="https://four-root-occupation.glitch.me/zhongqiu-denglong.js"></script> 中秋快乐-->二、本页总访问量1、自建busuanzi<br /> <p> 本页总访问量 <span id="busuanzi_site_pv"></span> 次</p> <script defer src="https://bsz.211119.xyz/js"></script>2、其它busuanzi<br /> <p> 本页总访问量 <span id="busuanzi_value_site_pv"></span> 次</p> <script defer src="https://four-root-occupation.glitch.me/bsz.js"></script>三、网站时间、本页总访问量及其它相关，可灵活修改式样1，访问量、运行时间和版本<span id="timeDate">载入天数...</span> <script language="javascript"> var now = new Date(); function createtime(){ var grt= new Date("01/05/2025 00:00:00");/*---这里是网站的启用时间：月/日/年--*/ now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); document.getElementById("timeDate").innerHTML = "稳定运行"+dnum+"天"; } setInterval("createtime()",250); </script> <span <p> | 本页总访问量 <span id="busuanzi_site_pv"></span> 次 | @ws01 v1.0.0 2025</p></span> <script defer src="https://bsz.211119.xyz/js"></script>式样2，访问量、运行时间、开源和信息<span id="timeDate">载入天数...</span> <script language="javascript"> var now = new Date(); function createtime(){ var grt= new Date("05/09/2024 00:00:00");/*---这里是网站的启用时间：月/日/年--*/ now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); document.getElementById("timeDate").innerHTML = "稳定运行"+dnum+"天"; } setInterval("createtime()",250); </script> <span <p> | 本页总访问量 <span id="busuanzi_site_pv"></span> 次 | 开源于 GitHub <a href="https://github.com/wszx123/My-Nav" target="_blank">@wszx123</a></p></span> <script defer src="https://bsz.211119.xyz/js"></script>式样3，访问量、运行时间、博客和导航链接<span id="timeDate">载入天数...</span> <script language="javascript"> var now = new Date(); function createtime(){ var grt= new Date("05/09/2024 00:00:00");/*---这里是网站的启用时间：月/日/年--*/ now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); document.getElementById("timeDate").innerHTML = "稳定运行"+dnum+"天"; } setInterval("createtime()",250); </script> <span <p> | 本页总访问量 <span id="busuanzi_site_pv"></span> 次 | <a href="https://boke.199881.xyz/" target="_blank"> <span style="color: blue;">博客 | <a href="https://www.199881.xyz/" target="_blank"> <span style="color: green;">导航 </p></span> <script defer src="https://bsz.211119.xyz/js"></script> 四、其它常用代码transform: translateY(12px); /* 子元素往下移动12px */ transform: translateY(-12px); /* 子元素往上移动12px */ justify-content: space-between; /* 子元素分散排列 */ justify-content: flex-start; /* 子元素从左侧开始排列 */ gap: 20px; /* 子元素之间的空隙 */ background: url('https://121.freewebhostmost.com/') no-repeat center center fixed; /* 背景图片 */ background-color: #f4f4f4; /* 背景色 */ min-height: 60px; /* 最小高度设置为60px */ max-height: 120px; /* 最大高度设置为120px */ font-size: 18px; /* 字号大小*/ border-radius: 5px; /* 四角弧度，一般高为5，50为圆*/ border: 2px solid gray; /* 添加2px灰色边框 */ border: 1px #aaa; /* 添加 1px 和 #aaa 色边框 */ --border-color: #aaa; /* 边框，原#436EEED */ border-bottom: 2px dashed #6495ED; /* 添加灰色虚线#ccc */ overflow-y: auto; /* 当内容超过最大高度时显示滚动条 */ margin-left: 20px; /* 分类标签右移添加这一行 */ color: green; /* 分类标签字体颜色添加这一行 */ text-align: left; /* 添加左对齐 */ /* 设置文件名的最大宽度，并且超出部分省略显示 */ .file-name { max-width: 200px; /* 设置最大宽度，您可以调整为合适的值 */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; /* 确保文件名在一行内显示 */ } /* 设置图片背景的毛玻璃效果，值越大越模糊 */ backdrop-filter: blur(2px); margin-top: -20px; /* 验证码图片向上移动20px */footer代码.footer {position: fixed;bottom: 1cm;left: 50%;transform: translateX(-50%);background-color: rgba(230, 230, 250, 0.4);color: #000000;min-width: 400px;max-width: 1120px;height: 55px;text-align: center;margin: 2px auto;padding: 1px;border-radius: 10px;font-size:15px;}五、php代码中单位转换，其中($bytes, 1) 是保留小数点后一位，改2是二位<?php // 格式化文件大小函数 function formatSize($bytes) { $units = ['字节', 'KB', 'MB', 'GB', 'TB']; $unitIndex = 0; while ($bytes >= 1024 && $unitIndex < count($units) - 1) { $bytes /= 1024; $unitIndex++; } return number_format($bytes, 1) . ' ' . $units[$unitIndex]; } ?>六、适配手机时添加1、网页代码在手机上不适配时，在添加以下代码<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 添加viewport meta标签，确保页面在移动设备上正确缩放 -->2、大括号中添加相应代码@media (max-width: 768px) { } @media (max-width: 480px) { }七、在html页面添加输入密码才能打开1、密码24小时有效【 使用时请修改 admin 为自己的密码 】 <script> // 页面加载时弹出密码验证 (function() { // 检查是否已存储有效密码 const storedAuth = localStorage.getItem('imagePageAuth'); if (storedAuth) { const authData = JSON.parse(storedAuth); const now = new Date().getTime(); // 检查密码是否在24小时内（24*60*60*1000 = 86400000毫秒） if (now - authData.timestamp < 86400000) { // 密码仍在有效期内，允许访问 return; } else { // 密码已过期，清除存储 localStorage.removeItem('imagePageAuth'); } } // 如果没有有效密码，则要求输入 var password = prompt("请输入密码访问本页面："); if (password !== "admin") { alert("密码错误！禁止访问。"); window.location.href = "about:blank"; // 密码错误跳转至空白页 } else { // 密码正确，存储当前时间和密码信息（24小时内有效） const authData = { password: password, timestamp: new Date().getTime() }; localStorage.setItem('imagePageAuth', JSON.stringify(authData)); } })(); </script>2、密码当次有效，下一次打开也需要输入【 使用时请修改 admin 为自己的密码 】 <script> // 页面加载时弹出密码验证 (function() { var password = prompt("请输入密码访问本页面："); if (password !== "admin") { alert("密码错误！禁止访问。"); window.location.href = "about:blank"; // 密码错误跳转至空白页 } })(); </script> 七、icon代码方法1，用图片 <link rel="icon" href="https://img.keplu.eu.org/file/img1/1749897585818_logo04.png" type="image/ico">方法2，用字符 <link rel="shortcut icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🌐</text></svg>">

哪吒面板添加其它信息代码 哪吒面板添加其它信息代码，两种方式中的小鸡多少都可以自由增减，要举一反三。样式一：<script> window.onload = function() { const affLinks = { 1: { price: '⏰2024.10.16；💰9.5$/年'}, 2: { price: '⏰2024.1.29；💰7￥/年'}, 3: { price: '⏰2025.6.5；💰8.8$/年'}, 4: { price: '⏰2024.1.8；💰7￥/年'}, 5: { price: '⏰2025.8.19；💰4.99￥/月'} }; const createPriceTag = (price) => { if (!price) return null; const $priceTag = document.createElement('span'); $priceTag.setAttribute('style', 'background-color: rgba(30, 144, 255, 0.8); color: white; padding: 3px 6px; border-radius: 5px; margin-left: 5px;'); $priceTag.textContent = price; return $priceTag; }; const uiCards = document.querySelectorAll('.ui.card'); uiCards.forEach((card) => { let cardId = card.id; if (cardId && affLinks[cardId]) { let $aLinkBox = document.createElement('div'); $aLinkBox.setAttribute('style', 'position: absolute; bottom: 8px; right: 10px; display: flex; align-items: center;'); let $priceTag = createPriceTag((typeof affLinks[cardId] === 'object') ? affLinks[cardId].price : null); if ($priceTag) { $aLinkBox.appendChild($priceTag); } card.appendChild($aLinkBox); } }); }; </script> 样式二<script> window.onload = function(){ const extraData = { 1: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16；'}, 2: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16；'}, 3: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16；'}, 4: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16；'}, 5: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16；'} } const cats = document.querySelectorAll('.ui.accordion'); cats.forEach((e, i)=>{ let $catsTitle = e.querySelector('.title'); let ct = $catsTitle.innerText; ct = ct.trim(); let $itemCard = e.querySelectorAll('.ui.card'); let uiCardCount = $itemCard.length; $catsTitle.innerHTML = $catsTitle.innerHTML.replace(ct, ct+ ' ('+ uiCardCount +')'); $itemCard.forEach((ee, ii)=>{ let $content = ee.querySelector('.content'); let $descriptionGrid = ee.querySelector('.description .ui.grid'); let $itemTitle = $content.querySelector('.header'); let id = ee.getAttribute('id'); if(extraData[id]){ let pid = extraData[id].pid; pid = parseInt(pid); let shop = extraData[id].shop; let price = extraData[id].price; let start = extraData[id].start; let expire = extraData[id].expire; let expire1 = extraData[id].expire1; let cycle = extraData[id].cycle; if(price){ let $priceL = document.createElement('div'); $priceL.setAttribute('class', 'three wide column'); $priceL.innerHTML = '其它'; $descriptionGrid.insertBefore($priceL, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length-3]); let $priceR = document.createElement('div'); $priceR.setAttribute('class', 'thirteen wide column'); $priceR.innerHTML = '<div class="ui blue label">'+cycle+ expire1 +price +'</a></div>'; $descriptionGrid.insertBefore($priceR, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length-3]) } } }); }); } </script> 式样三【在用完整，加入续期和其它】：<style> :root { --popup-filter: blur(10px); --bb: blur(15px) brightness(110%); --lc-color-light: rgba(255, 255, 255, 0.7); --bc-color-light: rgba(255, 255, 255, 0.1); --the-color-light: rgba(255, 255, 255, 0.4); --he-color-light: rgba(255, 255, 255, 0.5); --message-color-light: rgb(22, 22, 22, 1); --popup-color-light:rgba(235, 235, 235, 0.6); --bc-color-dark: rgba(0, 0, 0, 0.3); --lc-color-dark: rgba(55, 55, 55, 0.8); --the-color-dark: rgba(70, 70, 70, 0.1); --he-color-dark: rgba(35, 35, 35, 0.7); --message-color-dark: rgb(235, 235, 235, 0.8); --popup-color-dark:rgba(78, 78, 78, 0.6); } /* 背景图片 */ body { content: " " !important; background: fixed !important; z-index: -1 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; background-position: top !important; background-repeat: no-repeat !important; background-size: cover !important; background-image: url(https://121.freewebhostmost.com/) !important; font-family: Arial,Helvetica,sans-serif !important; } /* 大卡片 */ #app .ui.fluid.accordion { background-color: #fbfbfb26 !important; border-radius: 0.4rem !important; } /* 小卡片 */ .ui.four.cards>.card { border-radius: 0.6rem !important; background-color: #fafafaa3 !important; } /* 有点累状态进度条颜色 */ .ui.progress.warning .bar { background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); !important; } /* 高负载状态进度条颜色 */ .ui.progress.error .bar { background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);important; } /* 高负载状态进度条颜色续费专用 */ .ui.progress.error1 .bar { background-image: linear-gradient(to right, #00CD00 0%, #008B00 100%);important; } </style> <script> window.onload = function() { const extraData = { 1: { pid: 23, shop: 'CC', price: ' 💰9.5$ / 年；', cycle: '⏰续期:', cycle1: '⏰', cycle2: '月流量:', cycle3: '3T ', cycle4: '⌚', start: '12/13/2023', expire: '12/13/2024', expire1: '2024.12.13；' }, 2: { pid: 23, shop: 'CC', price: ' 💰9.5$ / 年；', cycle: '⏰续期:', cycle1: '⏰', cycle2: '月流量:', cycle3: '3T ', cycle4: '⌚', start: '12/13/2023', expire: '12/13/2024', expire1: '2024.12.13；' }, 3: { pid: 23, shop: 'CC', price: ' 💰9.5$ / 年；', cycle: '⏰续期:', cycle1: '⏰', cycle2: '月流量:', cycle3: '3T ', cycle4: '⌚', start: '12/13/2023', expire: '12/13/2024', expire1: '2024.12.13；' }, } const cats = document.querySelectorAll('.ui.accordion'); cats.forEach((e, i) => { let $catsTitle = e.querySelector('.title'); let ct = $catsTitle.innerText; ct = ct.trim(); let $itemCard = e.querySelectorAll('.ui.card'); let uiCardCount = $itemCard.length; $catsTitle.innerHTML = $catsTitle.innerHTML.replace(ct, ct + ' (' + uiCardCount + ')'); $itemCard.forEach((ee, ii) => { let $content = ee.querySelector('.content'); let $descriptionGrid = ee.querySelector('.description .ui.grid'); let $itemTitle = $content.querySelector('.header'); let id = ee.getAttribute('id'); if (extraData[id]) { let pid = extraData[id].pid; let shop = extraData[id].shop; let price = extraData[id].price; let start = extraData[id].start; let expire = extraData[id].expire; let expire1 = extraData[id].expire1; let cycle = extraData[id].cycle; let cycle1 = extraData[id].cycle1; let cycle2 = extraData[id].cycle2; let cycle3 = extraData[id].cycle3; let cycle4 = extraData[id].cycle4; if (price) { let $priceL = document.createElement('div'); $priceL.setAttribute('class', 'three wide column'); $priceL.innerHTML = '续期'; $descriptionGrid.insertBefore($priceL, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length - 3]); let remainingTime = ''; if (expire !== '∞') { let endTime = new Date(expire).getTime(); let nowTime = new Date().getTime(); let timeDiff = endTime - nowTime; let daysRemaining = Math.ceil(timeDiff / (1000 * 3600 * 24)); remainingTime = daysRemaining > 0 ? `<span style="color: red;"> 剩${daysRemaining}天</span>` : '<span style="color: red;">(已过期)</span>'; } let $priceR = document.createElement('div'); $priceR.setAttribute('class', 'thirteen wide column'); $priceR.innerHTML = '<div class="ui blue label">' + cycle1 + expire1 + cycle4 + remainingTime + '</div>'; $descriptionGrid.insertBefore($priceR, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length - 3]); } if (price) { let $priceL = document.createElement('div'); $priceL.setAttribute('class', 'three wide column'); $priceL.innerHTML = '其它'; $descriptionGrid.insertBefore($priceL, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length - 3]); let $priceR = document.createElement('div'); $priceR.setAttribute('class', 'thirteen wide column'); $priceR.innerHTML = '<div class="ui blue label">' + price + ' ' + cycle2 + ' ' + cycle3 + '</div>'; $descriptionGrid.insertBefore($priceR, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length - 3]); } } }); }); } </script> <style> body { overflow-y: scroll; } </style> <!-- 返回顶部按钮 --> <button id="topBtn" class="top-btn" style="display: none; position: fixed; bottom: 20px; right: 20px; z-index: 9999; background-color: #ffcc00; color: white; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer;">▲</button> <script> // 获取返回顶部按钮 const topBtn = document.getElementById('topBtn'); // 当DOM加载完成后执行 document.addEventListener('DOMContentLoaded', function() { // 监听滚动事件 window.onscroll = function() { scrollFunction(); }; // 显示或隐藏返回顶部按钮 function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { topBtn.style.display = "block"; } else { topBtn.style.display = "none"; } } // 当点击按钮时滚动到顶部 topBtn.addEventListener('click', function() { document.body.scrollTop = 0; // 对于 Safari document.documentElement.scrollTop = 0; // 对于 Chrome, Firefox, IE 和 Opera }); }); </script>