案例需求：使用两张不同状态的“眼睛”图片充当按钮功能。 图片中“眼睛”睁开时密码显示，闭合时密码隐藏。 默认情况下，输入的密码是隐藏的，对应闭合状态的“眼睛”。 案例实现思路 首先通过img和input等元素搭建密码结构，然后通过JavaScript操作元素的属性，通过更改input元素的type属性完成密码框和文本框的切换，并切换对应的“眼睛”图片。

代码实现：

HTML部分：

<div class="password-box">
  <input type="password" placeholder="输入密码" id="password-input">
  <img src="close-eye.png" alt="闭合状态眼睛" id="eye-icon">
</div>

CSS部分：

.password-box {
  position: relative;
}

#eye-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}

JavaScript部分：

const passwordInput = document.getElementById("password-input");
const eyeIcon = document.getElementById("eye-icon");

// 点击眼睛图标切换密码显示/隐藏
eyeIcon.addEventListener("click", () => {
  if (passwordInput.type === "password") {
    passwordInput.type = "text";
    eyeIcon.src = "open-eye.png";
    eyeIcon.alt = "睁开状态眼睛";
  } else {
    passwordInput.type = "password";
    eyeIcon.src = "close-eye.png";
    eyeIcon.alt = "闭合状态眼睛";
  }
});

以上代码实现了点击眼睛图标切换密码显示/隐藏的功能，同时切换对应的眼睛图标。对应的开眼图标为open-eye.png，闭眼图标为close-eye.png。