js弹出等待框提示正在加载
时间: 2023-09-02 18:13:19 浏览: 59
如果你想要实现一个更加友好的等待框提示正在加载的效果,可以使用以下代码:
HTML代码:
```html
<div id="loading">正在加载,请稍等...</div>
```
CSS代码:
```css
#loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
border-radius: 5px;
}
```
JavaScript代码:
```javascript
// 显示等待框
function showLoading() {
document.getElementById("loading").style.display = "block";
}
// 隐藏等待框
function hideLoading() {
document.getElementById("loading").style.display = "none";
}
```
当需要显示等待框时,你可以调用 `showLoading()` 函数,当加载完成后,你可以调用 `hideLoading()` 函数来隐藏等待框。这个等待框会以半透明的黑色背景覆盖在页面上,并显示一个白色的提示框。
相关问题
代码如何flask框架get方法加载web页面时弹出等待框
要在Flask框架中使用get方法加载web页面时弹出等待框,可以使用JavaScript来实现。具体步骤如下:
1. 在HTML页面中添加一个等待框的HTML代码,例如:
```html
<div id="loading">
<img src="/static/images/loading.gif" alt="Loading...">
<p>Loading...</p>
</div>
```
2. 在JavaScript中设置一个等待框显示函数,例如:
```javascript
function showLoading() {
document.getElementById('loading').style.display = 'block';
}
```
3. 在Flask路由函数中,使用`render_template`函数渲染HTML页面,并在页面加载时调用JavaScript函数显示等待框,例如:
```python
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html', show_loading=True)
```
4. 在HTML页面的`<head>`标签中添加JavaScript代码,调用等待框显示函数,例如:
```html
<head>
<script>
{% if show_loading %}
showLoading();
{% endif %}
</script>
</head>
```
这样,当页面加载时,就会自动弹出等待框,直到页面加载完成后自动隐藏。
代码如何flask框架index.html页面提交get后等待下一个页面first.html弹出等待框
你可以使用Flask框架提供的`render_template`函数在后端渲染HTML页面。当用户在`index.html`页面提交GET请求时,Flask框架会将请求传递给后端Python代码处理。在处理代码中,你可以使用`render_template`函数渲染`first.html`页面并添加等待框的代码。
下面是一个示例代码:
```python
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/first')
def first():
# 在这里添加弹出等待框的代码
return render_template('first.html')
if __name__ == '__main__':
app.run()
```
在`index.html`页面中,你需要使用HTML的`form`元素创建一个GET请求的表单,将表单的`action`属性设置为`/first`,将表单的`method`属性设置为`GET`,并添加一个提交按钮。
在`first.html`页面中,你可以使用JavaScript代码添加等待框。你可以使用Bootstrap框架提供的`Modal`组件来创建等待框。在页面加载完成时,你可以使用JavaScript代码显示等待框,并在后端处理完成后隐藏等待框。
下面是一个示例代码:
```html
<!-- index.html -->
<form action="/first" method="GET">
<button type="submit">提交</button>
</form>
<!-- first.html -->
<!-- 添加等待框的代码 -->
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="loadingModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="loadingModalLabel">等待</h5>
</div>
<div class="modal-body">
<p>请稍等...</p>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#loadingModal').modal('show'); // 显示等待框
});
$(window).on('load', function() {
$('#loadingModal').modal('hide'); // 隐藏等待框
});
</script>
```
在上面的代码中,`loadingModal`是等待框的ID,使用`jQuery`库的`modal`函数显示和隐藏等待框。`$(document).ready()`函数在页面加载完成后执行,`$(window).on('load')`函数在页面和所有资源加载完成后执行。