原生js键盘事件鼠标事件默认事件实现变色龙

<!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">按空格键，龙将停下 &nbsp;&nbsp;&nbsp;再按下回车键,龙将恢复</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>
Hello Hongbin
发布了117 篇原创文章 · 获赞 146 · 访问量 2万+
私信关注
原生js键盘事件鼠标事件默认事件实现变色龙

猜你喜欢
