這個時間怎麽和後端python交互<!DOCTYPE html> <html> <head> <title>设备运行实況</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; background-color: #f7f7f7; } h1 { text-align: center; margin-top: 50px; } table { margin: auto; border-collapse: collapse; border: 1px solid #ddd; width: 80%; } th, td { padding: 12px; text-align: center; border-bottom: 1px solid #ddd; } th { background-color: #4CAF50; color: white; } .status-ok { color: green; font-weight: bold; } .status-warning { color: orange; font-weight: bold; } .status-error { color: red; font-weight: bold; } </style> </head> <body> <h1>设备运行实況</h1> <table> <tr> <th>设备名称</th> <th>运行状态</th> <th>最近更新时间</th> </tr> <tr> <td>设备 A</td> <td class="status-ok">正常运行</td> <td>2021-10-01 10:30:00</td> </tr> <tr> <td>设备 B</td> <td class="status-warning">运行异常</td> <td>2021-10-01 11:00:00</td> </tr> <tr> <td>设备 C</td> <td class="status-error">停机</td> <td>2021-10-01 12:00:00</td> </tr> </table> </body> </html>
时间: 2023-07-09 22:20:31 浏览: 81
index.html
为了和后端 Python 交互,你可以使用 JavaScript 来实现动态更新时间和设备状态。具体实现步骤如下:
1. 在 HTML 文件中,为需要更新的元素添加 `id` 属性,例如:
```html
<td id="device-a-status" class="status-ok">正常运行</td>
<td id="device-a-last-update">2021-10-01 10:30:00</td>
```
2. 在 JavaScript 中,使用 `setInterval` 函数定时向后端发送 HTTP 请求获取最新的设备状态和最近更新时间,并将数据更新到对应的 HTML 元素中,例如:
```javascript
// 定义更新间隔时间(单位为毫秒)
const UPDATE_INTERVAL = 5000;
// 获取需要更新的 HTML 元素
const deviceAStatus = document.getElementById('device-a-status');
const deviceALastUpdate = document.getElementById('device-a-last-update');
// 定时更新设备状态和最近更新时间
setInterval(() => {
// 向后端发送 HTTP 请求获取最新数据
fetch('/api/device-a-status')
.then(response => response.json())
.then(data => {
// 更新设备状态
deviceAStatus.textContent = data.status;
deviceAStatus.className = `status-${data.status.toLowerCase()}`;
});
fetch('/api/device-a-last-update')
.then(response => response.json())
.then(data => {
// 更新最近更新时间
deviceALastUpdate.textContent = data.lastUpdate;
});
}, UPDATE_INTERVAL);
```
3. 在后端 Python 中实现一个 RESTful API,接收前端的 HTTP 请求,查询数据库或其他数据源,返回最新的设备状态和最近更新时间,例如:
```python
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/api/device-a-status')
def get_device_a_status():
# 从数据库或其他数据源获取最新设备状态
status = 'OK'
return jsonify({'status': status})
@app.route('/api/device-a-last-update')
def get_device_a_last_update():
# 从数据库或其他数据源获取最近更新时间
last_update = '2021-10-01 10:30:00'
return jsonify({'lastUpdate': last_update})
```
通过上述方式,你就可以实现一个动态更新设备状态和最近更新时间的电子看板,并且可以和后端 Python 进行交互。
阅读全文