版权声明:进击的葱 https://blog.csdn.net/qlwangcong518/article/details/86521262
描述:
鼠标点击页面,在哪里点击就在那个位置创建一个div,宽高50,
颜色随机,div在鼠标点击的正中间
使用jquery后更方便了
效果:
实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
<script>
const RECT=50;
$(document).on("click",function (e) {
$("<div></div>").appendTo(document.body)
.width(RECT)
.height(RECT)
.css("position","absolute")
.css("left", e.clientX-RECT/2 + "px")
.css("top", e.clientY-RECT/2 + "px")
.css("backgroundColor",color())
});
function color() {
var c="#";//这个字符串第一位为# 颜色的格式
for(var i=0;i<6;i++){
c+=parseInt(Math.random()*16).toString(16);
//rondom*16后的随机值即为0-1*16==0-16; toString(16)为转化为16进制
}
return c;//最后返回一个七位的值 格式即为#nnnnnn 颜色的格式
}
</script>
</body>
</html>