用python代码在网页中显示进度条
时间: 2024-05-13 21:19:31 浏览: 20
你可以使用 Flask 框架来实现将进度条嵌入网页中。下面是一个简单的示例代码:
```python
from flask import Flask, render_template, jsonify
import time
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/progress')
def progress():
def generate():
for i in range(101):
time.sleep(0.1)
yield "data:" + str(i) + "\n\n"
return Response(generate(), mimetype='text/event-stream')
if __name__ == '__main__':
app.run(debug=True)
```
在这个示例中,我们创建了一个 Flask 应用,并定义了两个路由。`/` 路由返回一个模板,其中包含了一个进度条的 HTML 和 JavaScript 代码,`/progress` 路由使用 SSE(Server-Sent Events)技术实现了一个简单的进度条,每隔 0.1 秒向客户端发送一个进度值。
下面是 `index.html` 模板的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Progress Bar Example</title>
</head>
<body>
<div id="progressBar"></div>
<script>
var source = new EventSource("/progress");
source.onmessage = function(event) {
document.getElementById("progressBar").innerHTML = "<div style='width: " + event.data + "%; background-color: green;'>Loading...</div>";
};
</script>
</body>
</html>
```
这个模板中使用了 JavaScript 来监听 `/progress` 路由发送的进度事件,每次收到事件后更新进度条的宽度。注意事件的数据格式必须是 `data:` 开头,后面跟着一个进度值和两个换行符 `\n\n`。
最后,在命令行中运行这个代码,并访问 http://localhost:5000/ 即可看到一个进度条正在不断地加载。