棋盘以及弹窗口

下面这个案例是做一个棋盘，鼠标移到不同的格子上时，在相应位置出现弹窗，展示信息(这里就不展示相应信息了，都是hello world),代码如下，还有许多不足之处，欢迎批评指教。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js网格以及弹窗</title>
    <style>
        #chessboard{
            position: absolute;
            width: 90vmin;height: 90vmin;
            background-color: green;
            /*left: 50%;*/
            /*top: 50%;*/
            /*transform: translate(-50%,-50%);*/
            left: 0;right: 0;top: 0;bottom: 0;
            margin: auto;
            display: flex;
            flex-direction: column;
            border: 2px solid #000;
        }
        .row{
            flex: 1;
            display: flex;
        }
        .item{
            flex: 1;
            border: 2px solid #000;
            border-radius: 3px;
        }
        #msgShow{
            position: absolute;
            background-color: rgba(0,0,0,0.5);
            color: #fff;
            padding: 10px;
            display: none;
        }
    </style>
</head>
<body>
<div id="chessboard"></div>
<div id="msgShow">hello world</div>
<script>
    //onclick,oncontextmenu,ondbclick,onmousedown,onmouseenter,onmouseleave,onmousemove,onmouseover,onmouseout,onmouseup
    //onmouseenter和onmouseover差别在不支持事件冒泡。
    function Chessboard() {
        // 生成棋盘
        let chessboard = document.getElementById("chessboard");
        for(let i =0;i<10;i++){
            let row = document.createElement("div");
            row.classList.add("row");
            for (let j=0;j<10;j++){
                let item = document.createElement("div");
                item.classList.add("item");
                row.appendChild(item);
            }
            chessboard.appendChild(row);
        }

        //弹窗
        let items = document.querySelectorAll(".item");
        let msgShow = document.getElementById("msgShow");
        let wWidth = window.innerWidth;
        let wHeight = window.innerHeight;
        let x = chessboard.offsetLeft; //棋盘距离窗口左侧距离
        let y = chessboard.offsetTop;
        let moveX = items[0].offsetWidth;
        for(let i=0;i<items.length;i++){
            items[i].addEventListener("mouseenter",function (e) {
                msgShow.style.display = "block";
                let itemLeft = items[i].offsetLeft;
                let itemTop = items[i].offsetTop;
                msgShow.style.left = itemLeft + moveX + x +"px";
                msgShow.style.top = itemTop + moveX +y +"px";
                //判断是否超出底部和左侧
                if((msgShow.offsetTop+msgShow.offsetHeight)>wHeight){
                    msgShow.style.left = itemLeft + moveX + x +"px";
                    msgShow.style.top = itemTop +y +"px";
                }
                if((msgShow.offsetLeft+msgShow.offsetWidth)>wWidth){
                    msgShow.style.left = itemLeft + x +"px";
                    msgShow.style.top = itemTop + moveX +y +"px";
                }
            });
            items[i].addEventListener("mouseleave",function (e) {
                msgShow.style.display = "none";
            })
        }
    }
    Chessboard();


</script>
</body>
</html>
猜你喜欢
