使用jquery在表单提交后重置进度条

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。进度条通常用于表示任务的完成进度，常见于表单提交、文件上传等场景。

类型

进度条可以分为以下几种类型：

确定性进度条：显示任务的完成百分比，如文件上传进度。
不确定性进度条：显示任务正在进行中，但无法确定具体进度，如表单提交后的处理。

应用场景

进度条常用于以下场景：

文件上传
表单提交
数据处理
长时间运行的任务

示例代码

假设我们有一个简单的表单和一个进度条，表单提交后需要重置进度条。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Submission with Progress Bar</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #progress-bar {
            width: 100%;
            background-color: #ddd;
        }
        #progress {
            width: 0%;
            height: 30px;
            background-color: #4CAF50;
            text-align: center;
            line-height: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <form id="myForm">
        <input type="text" name="name" placeholder="Enter your name">
        <button type="submit">Submit</button>
    </form>
    <div id="progress-bar">
        <div id="progress"></div>
    </div>

    <script>
        $(document).ready(function() {
            $('#myForm').on('submit', function(e) {
                e.preventDefault();
                // Simulate form submission with setTimeout
                setTimeout(function() {
                    // Reset progress bar
                    $('#progress').width('0%');
                    $('#progress').text('0%');
                }, 3000); // Simulate a 3-second delay
            });
        });
    </script>
</body>
</html>

解释

HTML 结构：包含一个表单和一个进度条。
CSS 样式：定义了进度条的样式。
JavaScript/jQuery：
- 使用 $(document).ready() 确保 DOM 加载完毕后执行脚本。
- 使用 $('#myForm').on('submit', function(e) { ... }) 监听表单提交事件。
- 使用 e.preventDefault() 阻止表单默认提交行为。
- 使用 setTimeout 模拟表单提交后的处理延迟。
- 在延迟结束后，重置进度条的宽度和文本。