<style>
        .box {
            width: 180px;
            height: 180px;
            background: #f0f0f0;
            position: absolute;
        }
 
        .X {
            width: 30px;
            height: 30px;
            background: #eaeaea;
            color: firebrick;
            text-align: center;
            line-height: 30px;
        }
</style>

<div class="box">
        <div class="X">X</div>
</div>

<script>
        //獲取節(jié)點
        let boxObj = document.querySelector('.box');
        let xObj = document.querySelector('.X');
 
        //獲取box的位置
        let boxLeft = boxObj.offsetLeft;
        let boxTop = boxObj.offsetTop;
        //綁定X
 
        xObj.onclick = clickFn;
        xObj.onmouseover = overFn;
 
        // 鼠標移入，變?yōu)槭中?
        function overFn() {
            xObj.style.cursor = 'pointer';
        }
        let num=0;
        //鼠標點擊X，窗口不會取消，會跳到另外的隨機位置
        function clickFn() {
            boxObj.style.left = boxLeft + rand(1, 1000) + 'px';
            boxObj.style.top = boxTop + rand(1, 500) + 'px';
            num++;
            if(num==20){
                boxObj.style.display='none';
            }
        }
        //隨機數(shù)
        function rand(min, max) {
            return Math.round(Math.random() * (max - min) + min);
        }
</script>