<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变色龙</title>
<style type="text/css">
.box {
position: absolute;
/*display: none;*/
width: 5px;
height: 6px;
}
body {
overflow: hidden;
}
#test {
font-family: "Adobe 繁黑體 Std B";
font-size: 20px;
color: #a3a3a3;
text-align: center;
}
.txt {
color: #a3a3a3;
text-align: center;
}
.font {
color: cadetblue;
text-align: center;
}
#shortcuts {
width: 150px;
height: 200px;
background-color: #a3a3a3;
display: none;
position: absolute;
border: 0 solid #ccc;
}
.oimg {
position: relative;
width: 80px;
height: 80px;
border-radius: 20px;
left: 20%;
display: block;
}
.Right {
font-size: 20px;
width: 10px;
font-family: "Adobe 明體 Std L";
/*text-align: center;*/
animation-name: gradient;
/*配合下面@keyframes使用*/
animation-duration: 5s;
/*实现的需要的时间*/
}
@keyframes gradient {
from {
opacity: 0
}
/*from里可以是任何样式 to里是上面设置的几秒后实现的样式*/
/*透明度，上面class要有animation-name: gradient;
animation-duration: 3s;配合使用*/
to {
opacity: 1
}
}
.span {
position: fixed;
right: 15px;
color: #a3a3a3;
}
.span:nth-of-type(2){
/*color: red;*/
right: 5px;
}
</style>
</head>
<body id="body">
<span id="shortcuts"><img class="oimg" src="../img/键盘%20(2).jpg">上方向键增加宽度，下方向键减少宽度。左方向键减少长度，右方向键增加长度。</span>
<span class="span" id="count"></span><span class="span">当前龙的数量：</span>
<p id="test">点击一下页面，开启变色龙模式，呀呼！</p>
<p class="txt">每点击一次页面，龙就会加长一次，注意：龙过长浏览器可能会略发卡顿</p>
<p class="font">按空格键，龙将停下 再按下回车键,龙将恢复</p>
<p class="Right" id="Right">右键查看功能键</p>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
function getPos(e) {
var Top = e.clientY + document.documentElement.scrollTop || e.clientY + document.body.scrollTop;
var Left = e.clientX + document.documentElement.scrollLeft || e.clientX + document.body.scrollLeft;
return {y: Top + 'px', x: Left + 'px'};
}
document.addEventListener('mousemove', fn);
function fn(e) {
var allDiv = document.getElementsByTagName("div");
var get = getPos(e);
for (var i = allDiv.length - 1; i > 0; i--) {
allDiv[i].style.left = allDiv[i - 1].offsetLeft + 'px';
allDiv[i].style.top = allDiv[i - 1].offsetTop + 'px';
// if (e.clientX>300&&e.clientX<600) {
// allDiv[i].style.backgroundColor = "chartreuse";
// allDiv[0].style.backgroundColor = "chartreuse";
// }else if (e.clientX<300){
// allDiv[i].style.backgroundColor = "black";
// allDiv[0].style.backgroundColor = "black";
// }else if (e.clientX>600){
// allDiv[i].style.backgroundColor = "brown";
// allDiv[0].style.backgroundColor = "brown";
// }
}
allDiv[0].style.left = get.x;
allDiv[0].style.top = get.y;
}
//键盘事件停止龙的运作+控制龙的宽度和长度
document.onkeydown = function removeEventListener(e) {
// console.log(e.keyCode);
if (e.keyCode == 32) {
document.removeEventListener("mousemove", fn);
} else if (e.keyCode == 13) {
document.addEventListener('mousemove', fn);
} else if (e.keyCode == 38) {
var div = document.getElementsByTagName('div');
for (var i = 0; i < div.length; i++) {
div[i].style.width = div[i].offsetWidth + 1 + "px";
}
} else if (e.keyCode == 40) {
var div = document.getElementsByTagName('div');
for (var i = 0; i < div.length; i++) {
div[i].style.width = div[i].offsetWidth - 1 + "px";
}
} else if (e.keyCode == 37) {
var div = document.getElementsByTagName('div');
for (var i = 0; i < div.length; i++) {
div[i].style.height = div[i].offsetHeight - 1 + "px";
}
} else if (e.keyCode == 39) {
var div = document.getElementsByTagName('div');
for (var i = 0; i < div.length; i++) {
div[i].style.height = div[i].offsetHeight + 1 + "px";
}
}
};
//添加双击事件dblclick
// document.addEventListener('dblclick',fn);
document.addEventListener('mousedown', creat);
function creat() {
var newDIV = document.createElement('div');
newDIV.setAttribute("class", "box");
var body = document.getElementById('body');
body.appendChild(newDIV);
}
//点一下页面，开启变色龙模式 呀呼！
document.onclick = function changeColor(e) {
setInterval(() => {
let color = "#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray|#234|#534";//定义一条变换颜色的字符串
color = color.split("|"); //然后通过split方法进行分割
// var xuan = document.getElementsByTagName("h5");//获得元素
let xuan = document.getElementsByTagName("div");
for (var i = 0; i < xuan.length; i++) {
xuan[i].style.backgroundColor = color[parseInt(Math.random() * color.length)];//设置样式
}
}, 200);
// console.log(e.target.id);
if (e.target.id == "") {
// console.log("ok");
// console.log(e.target.id);
var shortcuts = document.getElementById("shortcuts");
shortcuts.style.display = "none";
}
//龙的数量-div的length
document.onmousemove = function () {
let divCount = document.querySelectorAll('div');
let Count = divCount.length;
let span = document.querySelector("#count");
span.innerHTML = Count;
};
};
//鼠标右键功能
document.oncontextmenu = function (e) {
var shortcuts = document.getElementById("shortcuts");
shortcuts.style.display = "block";
shortcuts.style.left = e.clientX + 'px';
shortcuts.style.top = e.clientY + 'px';
return false;
};
// 点击空白右键事件消失 添加再document.onclick中
//右键提示文字渐渐透明
var Right = document.getElementById('Right');
Right.onmouseover = function () {
// Right.style.opacity = 0.2;
setInterval(() => {
Right.style.opacity = 0.3;
}, 1000)
};
</script>
</body>
</html>
