肝了半天的代码
- index
<html>
<head>
<title>BMPro!</title>
<script>
window.oncontextmenu = function(e) {
e.preventDefault(); //取消默认的浏览器自带右键
}
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>
* {
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;
}
body {
justify-content: center;
align-items: center;
text-align: center;
background: #AAAAFF;
color: #FFFFDD;
margin-bottom: 0px;
/*padding: 100% 100;*/
position: relative;
/* overflow: hidden; */
min-height: 100%;
}
.vbg {
position: fixed;
top: 0;
left: 0;
z-index: -1000;
min-width: 100%;
min-height: 100%;
padding-bottom: 100%;
width: 100%;
height: 100%;
opacity: 0.8;
object-fit: cover;
}
.a {
display: inline-block;
font-size: 1em;
background: #FFFFFF;
padding: 15px 50px;
text-decoration: none;
color: #000000;
margin-top: 10px;
transition: 0.2s;
}
.a:hover {
letter-spacing: 10px;
}
#hiddentitle {
border: 0px solid white;
align-items: center;
justify-content: center;
display: none;
font-size: 2rem;
}
</style>
<script>
</script>
</head>
<body style="min-width:500px;min-height:500px;overflow:hidden;">
<video autoplay muted loop class="vbg">
<source src="pro.mp4" type="video/mp4">
</video>
<div style="width:100%;min-width:500px;height:10%;min-height:50px;position:fixed;z-index:1000;">
<a href="index.html" style="display:inline-block;width:12%;color:#AAAAFF;text-decoration:none;">BMPro</a>
<a href="about.html" style="display:inline-block;width:12%;color:#FFFFDD;text-decoration:none;">关于</a>
<a href=".html" style="display:inline-block;width:12%;color:#FFFFDD;text-decoration:none;">设置</a>
<a href=".html" style="display:inline-block;width:12%;color:#FFFFDD;text-decoration:none;">功能</a>
<a href="2.0.html" style="display:inline-block;width:12%;color:#FFFFDD;text-decoration:none;">旧版</a>
<a href=".html" style="display:inline-block;width:12%;color:#FFFFDD;text-decoration:none;">其它</a>
</div>
<br>
<div style="top:10%;width:100%;height:70%;min-height:360px;position:absolute;text-align:center;">
<h1 color="White">乱敲代码Pro</h1>
<p color="White">乱敲的网页,但是并不乱</p>
<a href=".html" class="a" style="display:inline-block;">按钮</a>
<a href=".html" class="a" style="display:inline-block;">按钮</a>
<a href=".html" class="a" style="display:inline-block;">按钮</a>
<a href=".html" class="a" style="display:inline-block;">按钮</a>
<a href=".html" class="a" style="display:inline-block;">按钮</a>
</div>
<div style="top:20%;height:90%;min-height:540px;"></div>
</body>
</html>
<!--
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<iframe src="start.html" style="width:100%;min-width:500px;height:100%;min-height:500px;opacity:0.8;"></iframe>
<a onclick="show()" style="display:inline-block;width:12%;color:#FFFFDD;text-decoration:none;">旧版</a>
<div id="hiddentitle" style="background-color:#000000;color:#FFFFDD;float:right;position:absolute;top:50%;left:40%;width:20%;z-index:1010;">
<a href="2.0.html"
style="margin-bottom:0;width:150px;height:50px;text-align:center;text-decoration:none;">
<font color="white" size="5">第二版(有bug)</font></a><br>
<a href="1.0.html"
style="margin-bottom:0;width:150px;height:50px;text-align:center;text-decoration:none;">
<font color="white" size="5">最最最早的版本</font></a>
</div>
-->
2.0.html
2.0(旧版,有bug的一个页面)
<html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>首页-BMPro</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('hid').style.display === 'none' || document.getElementById('hid').style.display === 'hid') {
document.getElementById('hid').style.display = 'block'
} else {
document.getElementById('hid').style.display = 'none'
}
}
document.onclick = function () {
document.getElementById('hid').style.display = 'none'
}
document.getElementById('hid').onclick = function (event) {
let oevent = event || window.event
oevent.stopPropagation()
}
</script>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.showcase video{
position: absolute;
z-index: -999;
padding-bottom:100%;
}
.vid-wrapper{
width:100%;
position:relative;
padding-bottom:100%;
height: 0;
}
.vid-wrapper video{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.overlay{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
/*background:rgb(50,100,200,0.9);*/
background-image: linear-gradient(0deg
rgba(0,0,0)
rgba(0,0,100));
mix-blend-mode: overlay;
}
#menu{
width : 100px;
padding: 10px;
z-index: 999;
border : 1px solid #ddd;
visibility : hidden;
position : fixed;
}
.button {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-align: center;
background-color: #0000ff;
color: black;
border-radius:0px;
display: inline-block;
font-size: 1em;
padding: 10px 30px;
text-decoration: none;
margin-top: 10px;
transition: 0.2s;
}
.button:hover {
background-color: #000032;
color: white;
letter-spacing: 6px;
}
.menubutton {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-align: center;
background-color: #0000ff;
color: black;
border: 0px solid #00aaff;
border-radius:0px;
}
.menubutton:hover {
background-color: #000032;
color: white;
}
.commontxt {
text-align:center;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 10px;
text-align: center;
}
*{
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;
}
html,body {
height: 100%;
}
#container {
z-index: 100;
min-height:100%;
height: auto !important;
height: 100%; /*IE6不识别min-height*/
position: relative;
}
#footer {
position: absolute;
bottom: 0;
height: 20px;/*脚部的高度*/
}
#header {
position: fixed;
}
body{
background: url("bg.jpg") no-repeat center center fixed;
/*兼容*/
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body bg="#003264" style="min-height:300px;min-width:300px;">
<script type="text/javascript">
if(document.body.scrollWidth < 700){
document.getElementById('container').style.display = 'none';
}
if(document.body.scrollHeight < 700){
document.getElementById('container').style.display = 'none';
}
</script>
<div class="vid-wrappper"><video src="pro.mp4" muted loop autoplay style="width:100%;height:100%;min-height:500px;min-width:500px;"></video></div>
<!--正文开始-->
<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="#FFFFFF" size="4">使用说明</font></button></form>
<form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"><font color="#FFFFFF" size="4">返回上页</font></button></form>
<form onclick="show()" method="get"><button class="menubutton" onclick="show()" style="width:100%;height:20%;"><font color="#FFFFFF" size="4">意见反馈</font></button></form>
<form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"><font color="#FFFFFF" 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 class="overlay" >
<div id="container" style="background-color:#000000;text-align:center;width:100%;height:100%;">
<div id="header" style="color:#00DDFF;text-align:center;width:100%;position:fixed;float:center;">
<h2 style="text-align:center;background-color:#003264;"><font color="#00DDFF" size="6">乱敲代码Pro</font><font color="#00DDFF" size="4">-Bug Maker</font></h2>
<p class="commontxt"><font color="#ffffff" size="4">这就是传说中的Bug旧版</font></p>
<p class="commontxt"><font color="#ffffff" size="4">此版本只有起始页</font></p>
<form action="1.0.html" method="get"><button class="button"><font color="#aaffff" size="5">更旧的版本</font></button></form>
<form action="index.html" method="get"><button class="button"><font color="#aaffff" size="5">回到新版</font></button></form>
</div>
</div>
</div>
</html>
<!--
<form action="test.html" method="get"><button class="button" style="width:100%;height:20%;"><font color="#aaffff" size="5">按钮</font></button></form>
<div id="footer" style="width:100%;text-align:center;background-color:#003264;float:center;">
<p><font color="#00DDFF" size="2">BMPro Webpage</font></p></div>
</div>
<div style="background-color:#000000;color:#00DDFF;text-align:center;width:100%;position:fixed;">
<a class="topbutton" href="introduce.html" style="width:16%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font size="6">BMP</font><font size="4">ro</font></a>
<a class="topbutton" href="about.html" style="width:16%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font size="6">关于</font></a>
<a class="topbutton" href="ver.html" style="width:16%;margin-bottom:0;text-align:center;ctext-decoration:none;display:inline-block"><font size="6">版本</font></a>
<a class="topbutton" href="setting.html" style="width:16%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font size="6">设置</font></a>
<a class="topbutton" onclick="show()" style="width:16%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font size="6">更多</font></a>
</div>
<div id="hiddentitle" style="color:#FFFFFF;background-color:#000000;text-align:center;width:100%;">
<hr color="#c8c8fa">
<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>
<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>
<style>
.topbutton {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-align: center;
color: #00DDFF;
text-decoration:none;
display:inline-block;
text-align:center;
}
.topbutton:hover {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
background-color: #ffffff;
color: #0000FF;
}
#hiddentitle {
border: 0px solid white;
display: flex;
align-items: center;
justify-content: center;
display: none;
font-size: 2rem;
}
</style>
<span id="info_jb51_net">????</span>
<script>
window.onresize = function(){
document.getElementById("info_jb51_net").innerHTML="宽度:"+document.documentElement.clientWidth+",高度:"+document.documentElement.clientHeight +",太小了!";
}</script>
1.0.html(最早的,仿黑T客的做的)
1.0.html(模仿式的早期代码) <html>
<head>
<meta charset="utf-8">
<title>首页-BMPro</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;
text-align: center;
background-color: #0000ff;
color: black;
border: 0px solid #00aaff;
border-radius:0px;
}
.button:hover {
background-color: #000032;
color: white;
}
.menubutton {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
text-align: center;
background-color: #0000ff;
color: black;
border: 0px solid #00aaff;
border-radius:0px;
}
.menubutton: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: #e1e1ff;
color: #000000;
}
.txt {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 10px;
text-align: center;
}
*{
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;
}
</style>
</head>
<body>
<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="container">
<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="#FFFFFF" size="4">Bug1</font></button></form>
<form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"><font color="#FFFFFF" size="4">Bug2</font></button></form>
<form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"><font color="#FFFFFF" size="4">Bug3</font></button></form>
<form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"><font color="#FFFFFF" size="4">Bug4</font></button></form>
<form action="javascript:history.back();" method="get"><button class="menubutton" style="width:100%;height:20%;"><font color="#FFFFFF" size="4">Bug5</font></button></form>
</div>
<div style="background-color:#000000;color:#FFFFFF;text-align:center;width:100%;min-width:600px">
<a class="topbutton" action="javascript:history.back();" style="width:24%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="6">返回</font></a>
<a class="topbutton" href="1.0.html" style="width:50%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="6">BMP</font><font color="white" size="4">ro</font></a>
<a class="topbutton" href="1.0.html" style="width:24%;margin-bottom:0;text-align:center;text-decoration:none;display:inline-block"><font color="white" size="6">重加载</font></a>
</div>
<div style="background-color:#646496;height:98%;min-height:360px;float:left;width:10%;min-width:100px;">
<form action="index.html" method="get"><button class="button" style="width:100%;height:50%;"><font color="#aaffff" size="5">新版</font></button></form>
<form action="2.0.html" method="get"><button class="button" style="width:100%;height:50%;"><font color="#aaffff" size="5">Bug版</font></button></form>
</div>
<div style="background-color:#ffffff;width:100%;height:98%;min-height:360px;min-width:600px;float:center;">
<h2 style="margin-bottom:0;text-align:center;background-color:#00ffff;"><font color="#00007f" size="6">乱敲代码Pro-Bug Maker</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"><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>
</div>
<center>
<div style="width:100%;min-width:600px;background-color:#000064;">
<p style="margin-bottom:0;text-align:center;"><font color="white" size="2">BMPro Webpage</font></p></div>
</center>
</html>
本来有一个背景视频,传不上来
完整文件网盘:
https://wwbo.lanzouo.com/iCQYA0irqhhg
标签:none,网页,color,menu,style,getElementById,炫酷,纯手,document From: https://www.cnblogs.com/bmpro/p/16986115.html