结果
-
[修车店名称]
[地址]
[电话号码]
[营业时间]
访问网站
-
[修车店名称]
[地址]
[电话号码]
[营业时间]
访问网站
-
[修车店名称]
[地址]
[电话号码]
[营业时间]
访问网站
CSS 代码:
css
body {font-family: Arial, sans-serif;
}.container {max-width: 800px;margin: 0 auto;
}.search-box {display: flex;justify-content: center;align-items: center;margin-bottom: 20px;
}.search-box input[type="text"] {width: 300px;height: 30px;padding: 5px;border: 1px solid ccc;
}.search-box input[type="submit"] {width: 100px;height: 30px;padding: 5px;border: 1px solid ccc;background-color: ccc;color: fff;cursor: pointer;
}.results {list-style-type: none;padding: 0;margin: 0;
}.results li {margin-bottom: 10px;border: 1px solid ccc;padding: 10px;
}.results li h3 {font-weight: bold;font-size: 1.2rem;
}JavaScript 代码:
javascript
const form = document.querySelector('form');form.addEventListener('submit', (e) => {e.preventDefault();const address = e.target.querySelector('input[type="text"]').value;// 使用 API 获取附近修车店结果fetch(`${address}`).then(response => response.json()).then(data => {const resultsElement = document.querySelector('.results');data.forEach(shop => {const li = document.createElement('li');const h3 = document.createElement('h3');const p1 = document.createElement('p');const p2 = document.createElement('p');const p3 = document.createElement('p');const a= document.createElement('a');h3.textContent = shop.name;p1.textContent = shop.address;p2.textContent = shop.phone;p3.textContent = shop.hours;a.href = shop.website;a.textContent = '访问网站';li.appendChild(h3);li.appendChild(p1);li.appendChild(p2);li.appendChild(p3);li.appendChild(a);resultsElement.appendChild(li);});});
});