写一段可以查询公交车的html完整网页
时间: 2023-09-28 21:10:58 浏览: 64
以下是一个简单的查询公交车的 HTML 完整网页:
```html
<!DOCTYPE html>
<html>
<head>
<title>公交车查询</title>
</head>
<body>
<h1>公交车查询</h1>
<form>
<label for="bus-stop">起始站点:</label>
<input type="text" id="bus-stop" name="bus-stop"><br><br>
<label for="bus-route">公交线路:</label>
<input type="text" id="bus-route" name="bus-route"><br><br>
<button type="submit">查询</button>
</form>
<br>
<div id="bus-info"></div>
<script>
const form = document.querySelector('form');
const busInfo = document.querySelector('#bus-info');
form.addEventListener('submit', (event) => {
event.preventDefault();
const busStop = document.querySelector('#bus-stop').value;
const busRoute = document.querySelector('#bus-route').value;
// 在此处使用 AJAX 或其他 API 查询公交车信息,并将结果显示在 #bus-info 中。
busInfo.innerHTML = `起始站点: ${busStop}<br>公交线路: ${busRoute}<br>到达时间: 10:30 AM`;
});
</script>
</body>
</html>
```
以上代码中,我们创建了一个包含表单和查询结果的简单网页。用户可以在表单中输入起始站点和公交线路,点击“查询”按钮,网页会使用 JavaScript 发送查询请求,并将查询结果显示在 `<div id="bus-info"></div>` 中。
请注意,以上代码中仅包含了一个静态的查询结果,实际上需要在 JavaScript 中使用 AJAX 或其他 API 发送查询请求,以获取真实的公交车信息。
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.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)