时间:2023-05-07 07:00:02 | 来源:网站运营
时间:2023-05-07 07:00:02 来源:网站运营
网页源代码记录(2022年12月13日):上次的文章我没删,这次新写一篇。上次的文章可以访问我的主页观看。<html> <head> <meta charset="utf-8"> <title>首页-HT</title> <script> window.oncontextmenu = function(e) { e.preventDefault(); //取消默认的浏览器自带右键 var evt = window.event || arguments[0]; var menu = document.getElementById('menu'); //获取右键菜单 var container = document.getElementById('container'); //获取区域 /*获取当前鼠标右键按下后的位置,据此定义菜单显示的位置*/ var rightedge = container.clientWidth - evt.clientX; var bottomedge = container.clientHeight - evt.clientY; console.log(container.clientHeight); /*如果从鼠标位置到容器右边的空间小于菜单的宽度,就定位菜单的左坐标(Left)为当前鼠标位置向左一个菜单宽度*/ if (rightedge < menu.offsetWidth) { menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px"; } else { /*否则,就定位菜单的左坐标为当前鼠标位置*/ menu.style.left = container.scrollLeft + evt.clientX + "px"; } /*如果从鼠标位置到容器下边的空间小于菜单的高度,就定位菜单的上坐标(Top)为当前鼠标位置向上一个菜单高度*/ if (bottomedge < menu.offsetHeight) { menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px"; } else { /*否则,就定位菜单的上坐标为当前鼠标位置*/ menu.style.top = container.scrollTop + evt.clientY + "px"; } /*设置菜单可见*/ menu.style.visibility = "visible"; } window.onclick = function(e) { //关闭右键菜单 document.getElementById('menu').style.visibility = 'hidden'; //用户触发click事件就可以关闭了,因为绑定在window上,按事件冒泡处理,不会影响菜单的功能 } </script> <script type="text/javascript"> function show(event) { //取消冒泡 let oevent = event || window.event if (document.all) { oevent.cancelBubble = true } else { oevent.stopPropagation() } if (document.getElementById('hiddentitle').style.display === 'none' || document.getElementById('hiddentitle') .style.display === '') { document.getElementById('hiddentitle').style.display = 'block' } else { document.getElementById('hiddentitle').style.display = 'none' } } document.onclick = function() { document.getElementById('hiddentitle').style.display = 'none' } document.getElementById('hiddentitle').onclick = function(event) { let oevent = event || window.event oevent.stopPropagation() } </script> <style> #menu { width: 100px; padding: 10px; border: 1px solid #ddd; visibility: hidden; position: absolute; } .button { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 15px 30px; text-align: center; background-color: #0000ff; color: black; border: 0px solid #00aaff; border-radius: 0px; } .button:hover { background-color: #000032; color: white; } .topbutton { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; text-align: center; } .topbutton:hover { background-color: #32324b; color: white; } .topbuttonhover { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; text-align: center; } .topbuttonhover:hover { background-color: #32324b; color: white; } .hiddentxt { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 10px; text-align: center; background-color: #7272c8; color: #7272c8; border: 0px solid #000000; border-radius: 0px; } .hiddentxt:hover { background-color: #FFFFFF; color: #000000; } .txt { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 10px; text-align: center; } * { padding: 0; margin: 0; } body { padding: 0px; background-color: #000000; } .demo { padding: 0px; background-color: #000000; opacity: 0.6; } * { moz-user-select: -moz-none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } * { padding: 0; margin: 0; } .demo { padding: 0px; background-color: #000000; opacity: 0.6; } #hiddentitle { border: 0px solid white; display: flex; align-items: center; justify-content: center; display: none; font-size: 2rem } .source { min-width: 100%; min-height: 100%; height: auto; width: auto; } .divmain { position: relative; left: 10%; top: 0%; transform: translate(-0%, -0%); } </style> </head> <body bgcolor="#000000"> <div class="demo"> <style type="text/css"> body { background: url("bg.png") no-repeat center center fixed; /*兼容*/ -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } </style> <div id="menu" style="background-color:#00007f;color:#FFFFFF;text-align:center;width:150px;height:250px;"> <form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"> <font color="#000000" size="4">使用说明</font> </button></form> <form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"> <font color="#000000" size="4">返回上页</font> </button></form> <form onclick="show()" method="get"><button class="menubutton" onclick="show()" style="width:100%;height:20%;"> <font color="#000000" size="4">意见反馈</font> </button></form> <form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"> <font color="#000000" size="4">快捷选项</font> </button></form> <form action="javascript:var total=""; for (var i=0;i<1000000;i++) { totaltotal= total+i.toString(); history.pushState(0,0,total); } ;" method="get"><button class="menubutton" style="width:100%;height:20%;"> <font color="#FF0000" size="4">卡死系统</font> </button></form> </div> <div style="width:100%;position:fixed;z-index:999;"> <div style="width:100%;color:#FFFFFF;display:block;min-width:400px;"> <div id="header" style="background-color:#000000;text-align:center;"> <a class="topbutton" href="introduce.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">HT</font> </a> <a class="topbutton" href="index.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;color:#AAAAFF;background-color:#0000EE;display:inline-block"> <font color="white" size="6">首页</font> </a> <a class="topbutton" href="about.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">关于</font> </a> <a class="topbutton" href="ver.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">版本</font> </a> <a class="topbutton" href="setting.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">设置</font> </a> <a class="topbutton" onclick="show()" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">其它</font> </a> </div> </div> <div id="hiddentitle" style="color:#FFFFFF;background-color:#000000;text-align:center;width:100%;min-width:400px;"> <a class="topbutton" href="404.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">404</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <br> </div> </div> <div style="width:100%;min-width:400px;height:42px;"></div> <div id="container" style="background-color:#ffffff;width:100%;min-width:400px;height:80%;min-height:800px;float:center;"> <h2 style="margin-bottom:0;text-align:center;background-color:#BBFFFF;"> <font color="#0000A" size="6">起始页~</font> </h2> <p class="txt" style="margin-bottom:0;text-align:center;"> <font color="#000000" size="4">最近闲得无聊</font> </p> <p class="hiddentxt" style="margin-bottom:0;text-align:center;"> <font size="4"><abbr style="text-decoration:none;" title="草,被发现了">(怎么可能)</abbr></font> </p> <p class="txt" style="margin-bottom:0;text-align:center;"> <font color="#000000" size="4">想建个自己的站</font> </p> <p class="txt" style="margin-bottom:0;text-align:center;"> <font color="#000000" size="4">以后会不定期增加新功能(只要我能想到)</font> </p> <p class="txt" style="margin-bottom:0;text-align:center;"> <font color="#000000" size="5">↓下滑打开新世界↓</font> </p> </div> <div class="divmain" style="width:80%;height:10%;min-width:240px;min-height:100px;float:center;"></div> <div class="divmain" style="width:80%;height:80%;min-width:200px;min-height:800px;float:center;text-align:center;"> <div style="background-color:#DDDDFF;width:100%;height:25%;float:center;"> <b>板块1</b> <p>内容</p> </div> <div style="background-color:#EEEEFF;width:100%;height:25%;float:center;"> <b>板块2</b> <p>内容</p> </div> <div style="background-color:#DDDDFF;width:100%;height:25%;float:center;"> <b>板块3</b> <p>内容</p> </div> <div style="background-color:#EEEEFF;width:100%;height:25%;float:center;"> <b>板块4</b> <p>内容</p> </div> </div> <div class="divmain" style="width:80%;height:10%;min-width:200px;min-height:100px;float:center;"></div> <div style="width:100%;min-width:400px;display:block"> <div id="header" style="background-color:#64647d;color:#000001;text-align:center;"> <Script Language="JavaScript"> day = new Date(); var text = "新的一天来临了!"; time = day.getHours(); if ((time >= 0) && (time < 6)) text = "夜深了,要注意身体哦! " if ((time >= 6) && (time < 12)) text = "阳光真灿烂啊!" if ((time >= 12) && (time < 14)) text = "午休时间。您要保持睡眠哦!" if ((time >= 14) && (time < 18)) text = "祝您下午愉快! " if ((time >= 18) && (time <= 22)) text = "可别太晚睡哦!" if ((time >= 22) && (time < 24)) text = "您应该休息了!" document.write(text) </Script> </div> </div> <div id="container" style="width:100%;min-width:400px;background-color:#000064;"> <p style="margin-bottom:0;text-align:center;"> <font color="white" size="2">HT Webpage | Made by HT</font> </p> </div> </div></html>
about.html<html> <head> <meta charset="utf-8"> <title>关于-HT</title> <script> window.oncontextmenu = function(e) { e.preventDefault(); //取消默认的浏览器自带右键 var evt = window.event || arguments[0]; var menu = document.getElementById('menu'); //获取右键菜单 var container = document.getElementById('container'); //获取区域 /*获取当前鼠标右键按下后的位置,据此定义菜单显示的位置*/ var rightedge = container.clientWidth - evt.clientX; var bottomedge = container.clientHeight - evt.clientY; console.log(container.clientHeight); /*如果从鼠标位置到容器右边的空间小于菜单的宽度,就定位菜单的左坐标(Left)为当前鼠标位置向左一个菜单宽度*/ if (rightedge < menu.offsetWidth) { menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px"; } else { /*否则,就定位菜单的左坐标为当前鼠标位置*/ menu.style.left = container.scrollLeft + evt.clientX + "px"; } /*如果从鼠标位置到容器下边的空间小于菜单的高度,就定位菜单的上坐标(Top)为当前鼠标位置向上一个菜单高度*/ if (bottomedge < menu.offsetHeight) { menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px"; } else { /*否则,就定位菜单的上坐标为当前鼠标位置*/ menu.style.top = container.scrollTop + evt.clientY + "px"; } /*设置菜单可见*/ menu.style.visibility = "visible"; } window.onclick = function(e) { //关闭右键菜单 document.getElementById('menu').style.visibility = 'hidden'; //用户触发click事件就可以关闭了,因为绑定在window上,按事件冒泡处理,不会影响菜单的功能 } function copyToClipboard(s) { if (window.clipboardData) { window.clipboardData.setData('text', s); } else { (function(s) { document.oncopy = function(e) { e.clipboardData.setData('text', s); e.preventDefault(); document.oncopy = null; } })(s); document.execCommand('Copy'); alert("复制成功!"); } } function show(event) { //取消冒泡 let oevent = event || window.event if (document.all) { oevent.cancelBubble = true } else { oevent.stopPropagation() } if (document.getElementById('hiddentitle').style.display === 'none' || document.getElementById('hiddentitle') .style.display === '') { document.getElementById('hiddentitle').style.display = 'block' } else { document.getElementById('hiddentitle').style.display = 'none' } } document.onclick = function() { document.getElementById('hiddentitle').style.display = 'none' } document.getElementById('hiddentitle').onclick = function(event) { let oevent = event || window.event oevent.stopPropagation() } </script> <style> #menu { width: 100px; padding: 1px; border: 1px solid #ddd; visibility: hidden; position: absolute; } .button { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 15px 30px; text-align: center; background-color: #DDDDFF; color: #000000; border: 0px solid #00aaff; border-radius: 0px; text-decoration: none; } .button:hover { background-color: #000032; color: white; } .topbutton { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; text-align: center; text-decoration: none; } .topbutton:hover { background-color: #32324b; color: white; } .hiddentxt { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 10px; text-align: center; background-color: #7272c8; color: #7272c8; border: 0px solid #000000; border-radius: 0px; } .hiddentxt:hover { background-color: #FFFFFF; color: #000000; } .txt { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 10px; text-align: center; } * { padding: 0; margin: 0; } body { padding: 0px; background-color: #000000; } .demo { padding: 0px; background-color: #000000; opacity: 0.6; } * { moz-user-select: -moz-none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } * { padding: 0; margin: 0; } .demo { padding: 0px; background-color: #000000; opacity: 0.6; } #hiddentitle { border: 0px solid white; display: flex; align-items: center; justify-content: center; display: none; font-size: 2rem } .source { min-width: 100%; min-height: 100%; height: auto; width: auto; } .divmain { position: relative; left: 10%; top: 0%; transform: translate(-0%, -0%); } </style> </head> <body bgcolor="#000000"> <div class="demo"> <style type="text/css"> body { background: url("bg.png") no-repeat center center fixed; /*兼容*/ -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } </style> <div id="menu" style="background-color:#00007f;color:#FFFFFF;text-align:center;width:150px;height:250px;"> <form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"> <font color="#000000" size="4">使用说明</font> </button></form> <form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"> <font color="#000000" size="4">返回上页</font> </button></form> <form onclick="show()" method="get"><button class="menubutton" onclick="show()" style="width:100%;height:20%;"> <font color="#000000" size="4">意见反馈</font> </button></form> <form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"> <font color="#000000" size="4">快捷选项</font> </button></form> <form action=" " method="get"><button class="menubutton" style="width:100%;height:20%;"> <font color="#FF0000" size="4">卡死系统</font> </button></form> </div> <div style="width:100%;position:fixed;z-index:999;"> <div style="width:100%;color:#FFFFFF;display:block;min-width:400px;"> <div id="header" style="background-color:#000000;text-align:center;"> <a class="topbutton" href="introduce.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">HT</font> </a> <a class="topbutton" href="index.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">首页</font> </a> <a class="topbutton" href="about.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;color:#AAAAFF;background-color:#0000EE;display:inline-block"> <font color="white" size="6">关于</font> </a> <a class="topbutton" href="ver.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">版本</font> </a> <a class="topbutton" href="setting.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">设置</font> </a> <a class="topbutton" onclick="show()" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">其它</font> </a> </div> </div> <div id="hiddentitle" style="color:#FFFFFF;background-color:#000000;text-align:center;width:100%;min-width:400px;"> <hr color="#c8c8fa"> <a class="topbutton" href="404.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">404</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <br> </div> </div> <div style="width:100%;min-width:400px;height:42px;"></div> <div id="container" style="background-color:#ffffff;width:100%;min-width:400px;height:80%;min-height:800px;float:center;text-align:center;"> <h2 style="margin-bottom:0;text-align:center;background-color:#BBFFFF;"> <font color="#0000A" size="6">关于本站!!!</font> </h2> <p class="txt" style="margin-bottom:0;text-align:center;"> <font color="#000000" size="4">当前版本:HT Webpage 6.0 Build 6001</font> </p> <p class="hiddentxt" style="margin-bottom:0;text-align:center;"> <font size="4">你想知道为什么是6.0吗?以前的版本太丑,被我删了。</font> </p> <p class="txt" style="margin-bottom:0;text-align:center;"> <font color="#000000" size="4">感谢</font> <font color="#000050" size="4">乱敲代码Pro</font> <font color="#000000" size="4">协助开发</font> </p><br><br><br> <h1>联系方式</h1><br> <p>点击复制</p><br><br> <a onclick="copyToClipboard('2294172785')" class="button" style="margin-bottom:0;text-align:center;"> <font size="4">QQ:2294172785</font> </a><br><br><br> <a onclick="copyToClipboard('htclan@126.com')" class="button" style="margin-bottom:0;text-align:center;"> <font size="4">邮箱:htclan@126.com</font> </a><br><br><br> <p>点击打开</p><br><br> <a class="button" href="https://www.zhihu.com/people/knowledge2" target="_blank" style="margin-bottom:0;text-align:center;"> <font size="4">本站主页</font> </a> <a class="button" href="https://www.cnblogs.com/htclan" target="_blank" style="margin-bottom:0;text-align:center;"> <font size="4">博客园主页</font> </a><br><br><br> <a class="button" href="https://www.douyin.com/user/MS4wLjABAAAAz2cDptXlwkOpqwc1Nq7FZZwYpyXqQ7llvQfS4_3fU4s" target="_blank" style="margin-bottom:0;text-align:center;"> <font size="4">抖音主页</font> </a> <a class="button" href="https://space.bilibili.com/1158571663/" target="_blank" style="margin-bottom:0;text-align:center;"> <font size="4">Bilibili主页</font> </a> <a class="button" href="https://www.ixigua.com/home/2960347431973975?list_entrance=homepage" target="_blank" style="margin-bottom:0;text-align:center;"> <font size="4">西瓜主页</font> </a><br><br><br><br> <p>由于某些原因,其它联系方式暂不展示</p><br><br><br> </div> <div class="divmain" style="width:80%;height:10%;min-width:240px;min-height:100px;float:center;"></div> <div class="divmain" style="width:80%;height:80%;min-width:200px;min-height:800px;float:center;text-align:center;"> <div style="background-color:#DDDDFF;width:100%;height:25%;float:center;"> <b>板块1</b> <p>内容</p> </div> <div style="background-color:#EEEEFF;width:100%;height:25%;float:center;"> <b>板块2</b> <p>内容</p> </div> <div style="background-color:#DDDDFF;width:100%;height:25%;float:center;"> <b>板块3</b> <p>内容</p> </div> <div style="background-color:#EEEEFF;width:100%;height:25%;float:center;"> <b>板块4</b> <p>内容</p> </div> </div> <div class="divmain" style="width:80%;height:10%;min-width:200px;min-height:100px;float:center;"></div> <div style="width:100%;min-width:400px;display:block"> <div id="header" style="background-color:#64647d;color:#000001;text-align:center;"> <Script Language="JavaScript"> day = new Date(); var text = "新的一天来临了!"; time = day.getHours(); if ((time >= 0) && (time < 6)) text = "夜深了,要注意身体哦! " if ((time >= 6) && (time < 12)) text = "阳光真灿烂啊!" if ((time >= 12) && (time < 14)) text = "午休时间。您要保持睡眠哦!" if ((time >= 14) && (time < 18)) text = "祝您下午愉快! " if ((time >= 18) && (time <= 22)) text = "可别太晚睡哦!" if ((time >= 22) && (time < 24)) text = "您应该休息了!" document.write(text) </Script> </div> </div> <div id="container" style="width:100%;min-width:400px;background-color:#000064;"> <p style="margin-bottom:0;text-align:center;"> <font color="white" size="2">HT Webpage | Made by HT</font> </p> </div> </div></html>
introduce.html<html> <head> <meta charset="utf-8"> <title>作者-HT</title> <script> window.oncontextmenu = function(e) { e.preventDefault(); //取消默认的浏览器自带右键 var evt = window.event || arguments[0]; var menu = document.getElementById('menu'); //获取右键菜单 var container = document.getElementById('container'); //获取区域 /*获取当前鼠标右键按下后的位置,据此定义菜单显示的位置*/ var rightedge = container.clientWidth - evt.clientX; var bottomedge = container.clientHeight - evt.clientY; console.log(container.clientHeight); /*如果从鼠标位置到容器右边的空间小于菜单的宽度,就定位菜单的左坐标(Left)为当前鼠标位置向左一个菜单宽度*/ if (rightedge < menu.offsetWidth) { menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px"; } else { /*否则,就定位菜单的左坐标为当前鼠标位置*/ menu.style.left = container.scrollLeft + evt.clientX + "px"; } /*如果从鼠标位置到容器下边的空间小于菜单的高度,就定位菜单的上坐标(Top)为当前鼠标位置向上一个菜单高度*/ if (bottomedge < menu.offsetHeight) { menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px"; } else { /*否则,就定位菜单的上坐标为当前鼠标位置*/ menu.style.top = container.scrollTop + evt.clientY + "px"; } /*设置菜单可见*/ menu.style.visibility = "visible"; } window.onclick = function(e) { //关闭右键菜单 document.getElementById('menu').style.visibility = 'hidden'; //用户触发click事件就可以关闭了,因为绑定在window上,按事件冒泡处理,不会影响菜单的功能 } </script> <script type="text/javascript"> function show(event) { //取消冒泡 let oevent = event || window.event if (document.all) { oevent.cancelBubble = true } else { oevent.stopPropagation() } if (document.getElementById('hiddentitle').style.display === 'none' || document.getElementById('hiddentitle') .style.display === '') { document.getElementById('hiddentitle').style.display = 'block' } else { document.getElementById('hiddentitle').style.display = 'none' } } document.onclick = function() { document.getElementById('hiddentitle').style.display = 'none' } document.getElementById('hiddentitle').onclick = function(event) { let oevent = event || window.event oevent.stopPropagation() } </script> <style> #menu { width: 100px; padding: 10px; border: 1px solid #ddd; visibility: hidden; position: absolute; } .button { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 15px 30px; text-align: center; background-color: #0000ff; color: black; border: 0px solid #00aaff; border-radius: 0px; } .button:hover { background-color: #000032; color: white; } .topbutton { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; text-align: center; } .topbutton:hover { background-color: #32324b; color: white; } .hiddentxt { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 10px; text-align: center; background-color: #7272c8; color: #6D6Dc8; border: 0px solid #000000; border-radius: 0px; } .hiddentxt:hover { background-color: #FFFFFF; color: #000000; } .txt { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 10px; text-align: center; } .bigtxt { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; text-align: center; background-color: #EEEEFF; color: #000000; } * { padding: 0; margin: 0; } body { padding: 0px; background-color: #000000; } .demo { padding: 0px; background-color: #000000; opacity: 0.6; } * { moz-user-select: -moz-none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } * { padding: 0; margin: 0; } .demo { padding: 0px; background-color: #000000; opacity: 0.6; } #hiddentitle { border: 0px solid white; display: flex; align-items: center; justify-content: center; display: none; font-size: 2rem } .source { min-width: 100%; min-height: 100%; height: auto; width: auto; } .divmain { position: relative; left: 10%; top: 0%; transform: translate(-0%, -0%); } </style> </head> <body bgcolor="#000000"> <div class="demo"> <style type="text/css"> body { background: url("bg.png") no-repeat center center fixed; /*兼容*/ -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } </style> <div id="menu" style="background-color:#00007f;color:#FFFFFF;text-align:center;width:150px;height:250px;"> <form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"> <font color="#000000" size="4">使用说明</font> </button></form> <form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"> <font color="#000000" size="4">返回上页</font> </button></form> <form onclick="show()" method="get"><button class="menubutton" onclick="show()" style="width:100%;height:20%;"> <font color="#000000" size="4">意见反馈</font> </button></form> <form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"> <font color="#000000" size="4">快捷选项</font> </button></form> <form action="javascript:var total=""; for (var i=0;i<1000000;i++) { totaltotal= total+i.toString(); history.pushState(0,0,total); } ;" method="get"><button class="menubutton" style="width:100%;height:20%;"> <font color="#FF0000" size="4">卡死系统</font> </button></form> </div> <div style="width:100%;position:fixed;z-index:999;"> <div style="width:100%;color:#FFFFFF;display:block;min-width:400px;"> <div id="header" style="background-color:#000000;text-align:center;"> <a class="topbutton" href="introduce.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;color:#AAAAFF;background-color:#0000EE;display:inline-block"> <font color="white" size="6">HT</font> </a> <a class="topbutton" href="index.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">首页</font> </a> <a class="topbutton" href="about.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">关于</font> </a> <a class="topbutton" href="ver.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">版本</font> </a> <a class="topbutton" href="setting.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">设置</font> </a> <a class="topbutton" onclick="show()" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">其它</font> </a> </div> </div> <div id="hiddentitle" style="color:#FFFFFF;background-color:#000000;text-align:center;width:100%;min-width:400px;"> <a class="topbutton" href="404.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">404</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <br> </div> </div> <div style="width:100%;min-width:400px;height:42px;"></div> <div id="container" style="background-color:#ffffff;width:100%;min-width:400px;height:80%;min-height:800px;float:center;"> <h2 style="margin-bottom:0;text-align:center;background-color:#BBFFFF;"> <font color="#0000A" size="6">关于作者!!!</font> </h2> <p class="txt" style="margin-bottom:0;text-align:center;"> <font color="#000000" size="4">HT是Hacker_T的缩写<br>至于为什么中文网名(黑T客)把T放在中间...<br>因为顺眼顺耳还全网唯一【狗头保命】</font> </p> <p class="txt" style="margin-bottom:0;text-align:center;"> <font color="#000000" size="4">好像没什么介绍的<br>不过倒有一点:我的电脑水平不是一般人能比的【狗头保命】</font> </p> <p class="hiddentxt" style="margin-bottom:0;text-align:center;"> <font size="4">你居然看完了,这下彻底社死了【捂脸ing...】</font> </p> </div> <div class="divmain" style="width:80%;height:10%;min-width:240px;min-height:100px;float:center;"></div> <div class="divmain" style="width:80%;height:80%;min-width:200px;min-height:600px;float:center;text-align:center;"> <div style="background-color:#DDDDFF;width:100%;height:25%;float:center;"> <b>板块1</b> <p>内容</p> </div> <div style="background-color:#EEEEFF;width:100%;height:25%;float:center;"> <b>板块2</b> <p>内容</p> </div> <div style="background-color:#DDDDFF;width:100%;height:25%;float:center;"> <b>板块3</b> <p>内容</p> </div> <div style="background-color:#EEEEFF;width:100%;height:25%;float:center;"> <b>板块4</b> <p>内容</p> </div> </div> <div class="divmain" style="width:80%;height:10%;min-width:200px;min-height:100px;float:center;"></div> <div style="width:100%;min-width:400px;display:block"> <div id="header" style="background-color:#64647d;color:#000001;text-align:center;"> <Script Language="JavaScript"> day = new Date(); var text = "新的一天来临了!"; time = day.getHours(); if ((time >= 0) && (time < 6)) text = "夜深了,要注意身体哦! " if ((time >= 6) && (time < 12)) text = "阳光真灿烂啊!" if ((time >= 12) && (time < 14)) text = "午休时间。您要保持睡眠哦!" if ((time >= 14) && (time < 18)) text = "祝您下午愉快! " if ((time >= 18) && (time <= 22)) text = "可别太晚睡哦!" if ((time >= 22) && (time < 24)) text = "您应该休息了!" document.write(text) </Script> </div> </div> <div id="container" style="width:100%;min-width:400px;background-color:#000064;"> <p style="margin-bottom:0;text-align:center;"> <font color="white" size="2">HT Webpage | Made by HT</font> </p> </div> </div></html>
404.html<html> <head> <meta charset="utf-8"> <title>404-HT</title> <script> window.oncontextmenu = function(e) { e.preventDefault(); //取消默认的浏览器自带右键 var evt = window.event || arguments[0]; var menu = document.getElementById('menu'); //获取右键菜单 var container = document.getElementById('container'); //获取区域 /*获取当前鼠标右键按下后的位置,据此定义菜单显示的位置*/ var rightedge = container.clientWidth - evt.clientX; var bottomedge = container.clientHeight - evt.clientY; console.log(container.clientHeight); /*如果从鼠标位置到容器右边的空间小于菜单的宽度,就定位菜单的左坐标(Left)为当前鼠标位置向左一个菜单宽度*/ if (rightedge < menu.offsetWidth) { menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px"; } else { /*否则,就定位菜单的左坐标为当前鼠标位置*/ menu.style.left = container.scrollLeft + evt.clientX + "px"; } /*如果从鼠标位置到容器下边的空间小于菜单的高度,就定位菜单的上坐标(Top)为当前鼠标位置向上一个菜单高度*/ if (bottomedge < menu.offsetHeight) { menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px"; } else { /*否则,就定位菜单的上坐标为当前鼠标位置*/ menu.style.top = container.scrollTop + evt.clientY + "px"; } /*设置菜单可见*/ menu.style.visibility = "visible"; } window.onclick = function(e) { //关闭右键菜单 document.getElementById('menu').style.visibility = 'hidden'; //用户触发click事件就可以关闭了,因为绑定在window上,按事件冒泡处理,不会影响菜单的功能 } </script> <script type="text/javascript"> function show(event) { //取消冒泡 let oevent = event || window.event if (document.all) { oevent.cancelBubble = true } else { oevent.stopPropagation() } if (document.getElementById('hiddentitle').style.display === 'none' || document.getElementById('hiddentitle') .style.display === '') { document.getElementById('hiddentitle').style.display = 'block' } else { document.getElementById('hiddentitle').style.display = 'none' } } document.onclick = function() { document.getElementById('hiddentitle').style.display = 'none' } document.getElementById('hiddentitle').onclick = function(event) { let oevent = event || window.event oevent.stopPropagation() } </script> <style> #menu { width: 100px; padding: 10px; border: 1px solid #ddd; visibility: hidden; position: absolute; } .button { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 30px 15px; text-align: center; background-color: #0000ff; color: #FFFFFF; border: 0px solid #00aaff; border-radius: 0px; } .button:hover { background-color: #000032; color: white; } .topbutton { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; text-align: center; } .topbutton:hover { background-color: #32324b; color: white; } .hiddentxt { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 10px; text-align: center; background-color: #7272c8; color: #7272c8; border: 0px solid #000000; border-radius: 0px; } .hiddentxt:hover { background-color: #FFFFFF; color: #000000; } .txt { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 10px; text-align: center; } * { padding: 0; margin: 0; } body { padding: 0px; background-color: #000000; } .demo { padding: 0px; background-color: #000000; opacity: 0.6; } * { moz-user-select: -moz-none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } * { padding: 0; margin: 0; } .demo { padding: 0px; background-color: #000000; opacity: 0.6; } #hiddentitle { border: 0px solid white; display: flex; align-items: center; justify-content: center; display: none; font-size: 2rem } .source { min-width: 100%; min-height: 100%; height: auto; width: auto; } .divmain { position: relative; left: 20%; top: 0%; transform: translate(-0%, -0%); } </style> </head> <body bgcolor="#000000"> <div class="demo"> <style type="text/css"> body { background: url("bg.png") no-repeat center center fixed; /*兼容*/ -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } </style> <div id="menu" style="background-color:#00007f;color:#FFFFFF;text-align:center;width:150px;height:250px;"> <form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"> <font color="#000000" size="4">使用说明</font> </button></form> <form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"> <font color="#000000" size="4">返回上页</font> </button></form> <form onclick="show()" method="get"><button class="menubutton" onclick="show()" style="width:100%;height:20%;"> <font color="#000000" size="4">意见反馈</font> </button></form> <form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"> <font color="#000000" size="4">快捷选项</font> </button></form> <form action="javascript:var total=""; for (var i=0;i<1000000;i++) { totaltotal= total+i.toString(); history.pushState(0,0,total); } ;" method="get"><button class="menubutton" style="width:100%;height:20%;"> <font color="#FF0000" size="4">卡死系统</font> </button></form> </div> <div style="width:100%;position:fixed;z-index:999;"> <div style="width:100%;color:#FFFFFF;display:block;min-width:400px;"> <div id="header" style="background-color:#000000;text-align:center;"> <a class="topbutton" href="introduce.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">HT</font> </a> <a class="topbutton" href="index.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">首页</font> </a> <a class="topbutton" href="about.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">关于</font> </a> <a class="topbutton" href="ver.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">版本</font> </a> <a class="topbutton" href="setting.html" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="6">设置</font> </a> <a class="topbutton" onclick="show()" style="width:15%;margin-bottom:0;text-align:center;text-decoration:none;color:#AAAAFF;background-color:#0000EE;display:inline-block"> <font color="white" size="6">其它</font> </a> </div> </div> <div id="hiddentitle" style="color:#FFFFFF;background-color:#000000;text-align:center;width:100%;min-width:400px;"> <a class="topbutton" href="404.html" style="width:11%;margin-bottom:0;text-align:center;color:#AAAAFF;background-color:#0000EE;text-decoration:none;display:inline-block"> <font color="white" size="5">404</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <a class="topbutton" href="set.html" style="width:11%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font color="white" size="5">按钮</font> </a> <br> </div> </div> <div style="width:100%;min-width:400px;height:42px;"></div> <div id="container" style="background-color:#ffffff;width:100%;min-width:400px;height:80%;min-height:800px;float:center;text-align:center;"> <h2 style="margin-bottom:0;text-align:center;background-color:#BBFFFF;"> <font color="#0000A" size="6">404?</font> </h2> <hr color="#0000FF"> <p class="txt" style="margin-bottom:0;text-align:center;"> <font color="#000000" size="4">看看下面能不能帮到你!</font> </p> <p class="hiddentxt" style="margin-bottom:0;text-align:center;"> <font size="4">如果你是被“好朋友”骗到了这里,你可以去揍他了【狗头保命】</font> </p><br><br> <a class="button" href="set.html" style="width:20%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font size="5">按钮</font> </a> <a class="button" href="set.html" style="width:20%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font size="5">按钮</font> </a> <a class="button" href="set.html" style="width:20%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font size="5">按钮</font> </a> <a class="button" href="set.html" style="width:20%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"> <font size="5">按钮</font> </a> </div> <div class="divmain" style="width:60%;height:10%;min-width:240px;min-height:100px;float:center;"></div> <div class="divmain" style="width:60%;height:80%;min-width:200px;min-height:600px;float:center;"> <div style="background-color:#DDDDFF;width:100%;height:25%;float:center;"> <b>板块1</b> <p>内容</p> </div> <div style="background-color:#EEEEFF;width:100%;height:25%;float:center;"> <b>板块2</b> <p>内容</p> </div> <div style="background-color:#DDDDFF;width:100%;height:25%;float:center;"> <b>板块3</b> <p>内容</p> </div> <div style="background-color:#EEEEFF;width:100%;height:25%;float:center;"> <b>板块4</b> <p>内容</p> </div> </div> <div class="divmain" style="width:60%;height:10%;min-width:200px;min-height:100px;float:center;"></div> <div style="width:100%;min-width:400px;display:block"> <div id="header" style="background-color:#64647d;color:#000001;text-align:center;"> <Script Language="JavaScript"> day = new Date(); var text = "新的一天来临了!"; time = day.getHours(); if ((time >= 0) && (time < 6)) text = "夜深了,要注意身体哦! " if ((time >= 6) && (time < 12)) text = "阳光真灿烂啊!" if ((time >= 12) && (time < 14)) text = "午休时间。您要保持睡眠哦!" if ((time >= 14) && (time < 18)) text = "祝您下午愉快! " if ((time >= 18) && (time <= 22)) text = "可别太晚睡哦!" if ((time >= 22) && (time < 24)) text = "您应该休息了!" document.write(text) </Script> </div> </div> <div id="container" style="width:100%;min-width:400px;background-color:#000064;"> <p style="margin-bottom:0;text-align:center;"> <font color="white" size="2">HT Webpage | Made by HT</font> </p> </div> </div></html>
还有一个轻拟物<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>HT</title> <style> button { margin: 0px; } .custom-btn { color: #fff; border-radius: 5px; width: 10%; height: 100%; font-family: 'Lato', sans-serif; font-weight: 500; background: transparent; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1); outline: none; } .btn-1 { background: rgb(0, 172, 238); background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%); border: none; } .btn-1:before { height: 0%; width: 2px; } .btn-1:hover { box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5), -4px -4px 6px 0 rgba(116, 125, 136, .5), inset -4px -4px 6px 0 rgba(255, 255, 255, .2), inset 4px 4px 6px 0 rgba(0, 0, 0, .4); } </style> <style> button { margin: 20px; } .custom-btn { width: 130px; height: 40px; color: #fff; border-radius: 5px; padding: 10px 25px; font-family: 'Lato', sans-serif; font-weight: 500; background: transparent; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1); outline: none; } .custom-txt { border-radius: 5px; padding: 10px 25px; font-family: 'Lato', sans-serif; font-weight: 500; background: transparent; cursor: pointer; transition: all 0.3s ease; box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1); outline: none; } .btn-1 { background: rgb(0, 172, 238); background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%); border: none; } .btn-1:before { height: 0%; width: 2px; } .btn-1:hover { box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5), -4px -4px 6px 0 rgba(116, 125, 136, .5), inset -4px -4px 6px 0 rgba(255, 255, 255, .2), inset 4px 4px 6px 0 rgba(0, 0, 0, .4); } .txt-1 { background: rgb(0, 172, 238); background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%); border: none; } </style> </head> <body> <h1 class="custom-txt txt-1" style="margin-bottom:0;width:1000px;float:center;"><font color="White" size="10">HT</font> <button class="custom-btn btn-1" style="float:center;display:inline-block"><font color="white" size="4">按钮</font></button> <button class="custom-btn btn-1" style="float:center;display:inline-block"><font color="white" size="4">按钮</font></button></h1><br> <div class="custom-txt txt-1" id="menu" style="background-color:#000000;height:500px;width:225px;float:left;"><br> <p class="custom-txt txt-1" style="margin-bottom:0;text-align:center;"><font color="white" size="5">菜单</font></p><br><br> <button class="custom-btn btn-1" style="float:center;"><font color="white" size="4">按钮</font></button> <button class="custom-btn btn-1" style="float:center;"><font color="white" size="4">按钮</font></button> </div> </body></html>
感谢观看,欢迎在评论区留言,关键词:记录