对称操作DOM，随机色彩涂鸦

最新推荐文章于 2021-06-17 11:10:20 发布

文正哟

最新推荐文章于 2021-06-17 11:10:20 发布

阅读量91

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/m0_47955692/article/details/107872765

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 600px;
        border: 1px solid #000;
        position: absolute;
    }
</style>
<body>
   <p>太多操作DOM会很消耗性能！！！！！！！</p>
</body>
<script>
    let body = document.querySelector('body');
    body.addEventListener('mousemove',(e)=>{
        let x = e.pageX;
        let y = e.pageY;
        let a = Math.ceil( Math.random()*225);
        let b = Math.ceil( Math.random()*225);
        let c = Math.ceil( Math.random()*225);
        // let d = Math.round(Math.random()*10)/10;
        console.log(x,y);
        let div = document.createElement('div');
        div.innerHTML = `
        <span style="width: 5px;height: 5px;background: rgb(${a},${b},${c});left: ${x+'px'};top:${y+'px'} ;position: absolute;display:block；"></span>
    <span style="width: 5px;height: 5px;background: rgb(${a},${b},${c});right: ${x+'px'};top:${y+'px'} ;position: absolute;display:block；"></span>
        `;
        body.appendChild(div);
    })
</script>
</html>

文正哟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对称操作DOM，随机色彩涂鸦

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> body{
复制链接

扫一扫