怎么修改这段代码使点击submit按钮后跳转到下一页之前弹出等待框<form action="/login",method="get"> <div class="item"> <input type="text" name="nm"> <label for="">用户ID</label> </div> <button type="submit" class="btn">submit <span></span> <span></span> <span></span> <span></span> </button> </form>

你可以使用 JavaScript 实现这个功能，具体做法如下：

1. 在 HTML 文件中引入一个 CSS 文件和一个 JavaScript 文件。

<link rel="stylesheet" href="path/to/loading.css">
<script src="path/to/loading.js"></script>

2. 在表单中加入一个 ID，方便在 JavaScript 中调用。

<form action="/login" method="get" id="login-form">
  <div class="item">
    <input type="text" name="nm">
    <label for="">用户ID</label>
  </div>
  <button type="submit" class="btn">submit <span></span> <span></span> <span></span> <span></span> </button>
</form>

3. 在 JavaScript 文件中，绑定表单的提交事件。

const form = document.getElementById('login-form');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  const loading = createLoading(); // 创建等待框
  document.body.appendChild(loading); // 将等待框添加到页面中

  setTimeout(function() {
    form.submit(); // 提交表单
  }, 2000); // 在两秒后提交表单，模拟等待效果
});

4. 定义一个函数，用于创建等待框。

function createLoading() {
  const loading = document.createElement('div');
  loading.classList.add('loading');
  return loading;
}

5. 在 CSS 文件中定义等待框的样式。

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading:after {
  content: "";
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: loading 1.2s linear infinite;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

这样，当用户点击提交按钮时，就会弹出一个等待框，等待两秒后再提交表单，期间用户可以看到等待框。