php - 如何在提交多个数据时显示百分比进度条
问题描述
使用 PHP Ajax 使用 HTML 表单提交多个数据时,如何添加带有百分比的进度条。
解决方案
这是一个例子:
$(document).ready(function() {
$("input").on("change", function() {
var size = $("input:checked").length;
var progress = size * 10 + "%";
$(".progress").css("width", progress);
});
});
.container {
width: 200px;
height: 30px;
border: 1px solid black;
}
.progress {
height: 100%;
width: 0;
background-color: red;
transition: 0.4s ease;
}
.block {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="progress"></div>
</div>
<form>
<div class="block">
<input id="one" name="one" type="checkbox"><label for="one">One</label></div>
<div class="block">
<input id="two" name="two" type="checkbox"><label for="two">Two</label>
</div>
<div class="block">
<input id="three" name="three" type="checkbox"><label for="three">Three</label>
</div>
<div class="block">
<input id="four" name="four" type="checkbox"><label for="four">Four</label>
</div>
<div class="block">
<input id="five" name="five" type="checkbox"><label for="five">Five</label>
</div>
<div class="block">
<input id="six" name="six" type="checkbox"><label for="six">Six</label>
</div>
<div class="block">
<input id="seven" name="seven" type="checkbox"><label for="seven">Seven</label>
</div>
<div class="block">
<input id="eight" name="eight" type="checkbox"><label for="eight">Eight</label>
</div>
<div class="block">
<input id="nine" name="nine" type="checkbox"><label for="nine">Nine</label>
</div>
<div class="block">
<input id="ten" name="ten" type="checkbox"><label for="ten">Ten</label>
</div>
</form>
对于您的情况:
- 用您的一种形式替换每个复选框
- 将 jQuery 触发器替换为“on submit”,然后使用 Ajax 发送数据
- 在您的 php 中(您发送 Ajax 数据的位置)计算用户发送的问题百分比
- 在您的 Ajax 成功部分:根据数据百分比更改进度条宽度
够清楚吗?希望对您有所帮助,但由于您没有提供代码,因此无法为您提供更多帮助!
推荐阅读
- python - 如何简单地计算从一个点到另一个点的旅行时间?(没有情节)
- php - 显示选定表项的引导模式
- javascript - 我希望为每个按钮单击更改 h1 文本颜色以按列表索引
- javascript - 函数返回花括号
- solidity - 运行松露的问题:找不到命令
- python - 尝试使用 python 中的 discord.py 命令解决错误
- sql - 数据库设计 - “1 个表或 2 个表”,“如果 2 个表:创建副本或连接”
- php - 从对应于选中行的动态表中提取值 - 仅限 PHP
- c# - 如何向 LibPhoneNumber 提供国家代码
- python - 关于 Django 过滤,我在哪里出错了