<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击放置图片</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#container {
position: relative;
width: 100%;
height: 100%;
background-color: black;
}
img {
position: absolute;
pointer-events: none;
}
.control-panel {
position: fixed;
top: 10px;
right: 10px;
}
.control-panel button {
color: white;
background-color: #333;
border: none;
padding: 10px;
margin: 0 5px;
cursor: pointer;
}
.control-panel button:hover {
background-color: #555;
}
</style>
</head>
<body>
<div id="container" onclick="placeImage(event)">
<div class="control-panel">
<button onclick="clearImages()">清除</button>
<button onclick="undo()">回退</button>
</div>
</div>
<script>
let imageHistory = [];
function placeImage(event) {
const src = "./img.gif";
const img = document.createElement("img");
img.src = src;
img.onload = function() {
const width = img.offsetWidth;
const height = img.offsetHeight;
img.style.left = (event.clientX - width / 2) + "px";
img.style.top = (event.clientY - height / 2) + "px";
document.getElementById("container").appendChild(img);
imageHistory.push(img);
};
}
function clearImages() {
imageHistory.forEach(img => img.remove());
imageHistory = [];
}
function undo() {
const lastImage = imageHistory.pop();
if (lastImage) {
lastImage.remove();
}
}
</script>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
