jQuery练习 鼠标点击生成小方块
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标点击生成小方块</title>
<script src="lib/jquery-3.6.0.js"></script>
<style> /*标题、背景、小方块的样式设置*/
#title{
width: 1000px;
}
#title h1{
text-align: center;
}
#box{
position: absolute;
width: 1000px;
height: 800px;
border: 1px solid red;
}
.card{
position: absolute;
width: 10px;
height: 15px;
background: #43b41a;
}
</style>
</head>
<body>
<div id="title">
<h1>鼠标点击生成小方块</h1>
</div>
<div id="box"></div>
<script>
let i = 0;
$(‘#box‘).click(function (e){ //鼠标点击事件
i++;
$(‘#box‘).append(‘<div class="card" id="card‘+i+‘"></div>‘); //添加小方块
$(‘#card‘+i).css({‘left‘:e.offsetX-5,‘top‘:e.offsetY-5}) ; //设置小方块的位置
});
</script>
</body>
</html>
jQuery练习 鼠标点击生成小方块