用html 写一个 图片查找器网页
时间: 2023-09-23 16:11:09 浏览: 43
好的,以下是一个基本的图片查找器网页的 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>图片查找器</title>
</head>
<body>
<h1>图片查找器</h1>
<form>
<label for="searchTerm">输入关键词:</label>
<input type="text" id="searchTerm" name="searchTerm">
<input type="submit" value="搜索">
</form>
<div id="searchResults"></div>
<script>
// 当搜索表单提交时,发送一个 AJAX 请求以获取与关键词匹配的图片
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
var searchTerm = document.querySelector('#searchTerm').value;
var xhr = new XMLHttpRequest();
xhr.addEventListener('load', function() {
var response = JSON.parse(xhr.responseText);
// 清空之前的搜索结果
document.querySelector('#searchResults').innerHTML = '';
// 显示搜索结果
response.forEach(function(image) {
var img = document.createElement('img');
img.src = image.url;
img.alt = image.alt;
document.querySelector('#searchResults').appendChild(img);
});
});
xhr.open('GET', 'https://example.com/images?q=' + encodeURIComponent(searchTerm));
xhr.send();
});
</script>
</body>
</html>
```
这个代码创建了一个简单的搜索表单,当用户提交表单时,会向一个 API 发送 AJAX 请求以获取与关键词匹配的图片。然后,它会将每个图片显示在一个 `div` 元素中。你可以根据自己的需求进行改进和定制。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)