密码修改界面HTML+css+js实现代码

下面是一个简单的密码修改界面的HTML+CSS+JS实现代码，你可以根据自己的需要进行修改和补充：

HTML代码：

<div class="form">
  <h2>修改密码</h2>
  <form>
    <div class="form-group">
      <label for="old-password">旧密码</label>
      <input type="password" id="old-password" name="old-password" required>
    </div>
    <div class="form-group">
      <label for="new-password">新密码</label>
      <input type="password" id="new-password" name="new-password" required>
    </div>
    <div class="form-group">
      <label for="confirm-password">确认密码</label>
      <input type="password" id="confirm-password" name="confirm-password" required>
    </div>
    <button type="submit" id="submit-btn">确认修改</button>
  </form>
</div>

CSS代码：

.form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f5f5f5;
}

.form h2 {
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input[type="password"] {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

#submit-btn {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background-color: #4CAF50;
  color: #fff;
  cursor: pointer;
}

#submit-btn:hover {
  background-color: #3e8e41;
}

JS代码：

const form = document.querySelector('form');
const oldPassword = document.querySelector('#old-password');
const newPassword = document.querySelector('#new-password');
const confirmPassword = document.querySelector('#confirm-password');

form.addEventListener('submit', function(event) {
  event.preventDefault();
  if (newPassword.value !== confirmPassword.value) {
    alert('两次输入的密码不一致，请重新输入！');
    return;
  }
  // TODO: 发送修改密码请求
});

这里的JS代码只是简单地验证了新密码和确认密码是否一致，如果需要向服务器发送修改密码请求，还需要补充相应的代码。