js鼠标事件案例

最新推荐文章于 2022-10-17 10:30:00 发布

是个乌龟啊

最新推荐文章于 2022-10-17 10:30:00 发布

阅读量148

点赞数

分类专栏： js 文章标签： javascript css3 css

本文链接：https://blog.csdn.net/weixin_56726579/article/details/123543514

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

样式

 body {
            background-color: #100F0F;
        }
        
        .box {
            text-align: center;
        }
        
        span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #181819;
            margin: 3px;
            transition: all 1s;
            box-shadow: 0;
        }

<body>
    <div class="big-box"></div>
    <script>
        function createBox() {
            let box = document.createElement('div');
            box.classList.add('box');
            document.body.appendChild(box);
        }
        for (let i = 1; i <= 25; i++) {
            createBox()
        }
        let boxList = document.querySelectorAll('.box')
        let html = '';
        for (let i = 0; i < boxList.length; i++) {
            for (let j = 1; j <= 20; j++) {
                html += `<span></span>`;
            }
            boxList[i].innerHTML = html;
            html = '';
        }

        function random(x) {
            return Math.floor(Math.random() * (x + 1));
        }
        document.onmousemove = function(e) {
            if (e.target.tagName === 'SPAN') {
                e.target.style.boxShadow = `rgb(${random(255)},${random(255)},${random(255)})` + ' 0 0 20px ';
                console.log(e.target.style.boxShow);
                e.target.style.backgroundColor = `rgb(${random(255)},${random(255)},${random(255)})`;
                e.target.ontransitionend = function() {
                    e.target.style.backgroundColor = '#181819';
                    e.target.style.boxShadow = 'none';
                }

            }
        }
    </script>
</body>

是个乌龟啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js鼠标事件案例

样式 body { background-color: #100F0F; } .box { text-align: center; } span { display: inline-block; width: 20px; height: 20px; backgr
复制链接

扫一扫