<!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>
对称操作DOM,随机色彩涂鸦
最新推荐文章于 2021-04-01 20:58:37 发布