html找不同代码
时间: 2023-08-09 16:11:20 浏览: 162
以下是HTML找不同代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Find the difference</title>
<style>
img {
margin: 10px;
}
.different {
border: 2px solid red;
}
</style>
</head>
<body>
<h1>Find the difference</h1>
<div>
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
</div>
<button onclick="findDifference()">Find Difference</button>
<script>
function findDifference() {
var imgs = document.getElementsByTagName("img");
var img1 = imgs[0];
var img2 = imgs[1];
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = canvas.width = img1.width;
var height = canvas.height = img1.height;
ctx.drawImage(img1, 0, 0);
var imgData1 = ctx.getImageData(0, 0, width, height);
ctx.drawImage(img2, 0, 0);
var imgData2 = ctx.getImageData(0, 0, width, height);
var differentPixels = [];
for (var i = 0; i < imgData1.data.length; i += 4) {
if (imgData1.data[i] !== imgData2.data[i] || imgData1.data[i + 1] !== imgData2.data[i + 1] || imgData1.data[i + 2] !== imgData2.data[i + 2]) {
differentPixels.push(i / 4);
}
}
if (differentPixels.length > 0) {
img1.classList.add("different");
img2.classList.add("different");
alert("There are " + differentPixels.length + " different pixels.");
} else {
alert("The two images are identical.");
}
}
</script>
</body>
</html>
```
这个代码会展示两张图片并且当用户点击“Find Difference”按钮时,它会比较两张图片并且找出不同之处。不同的地方会被用红色边框标记。
阅读全文