题目：

JavaScript实现密码的显示和隐藏，如图所示。

思路：

密码显示和隐藏可以通过改变文本框的类型来实现。文本框类型为password时，密码会用黑点表示，类型为text时，以明文显示。

实现步骤：

由于这个题目比较简单，直接用JavaScript原生接口实现即可。
01基础HTML和CSS代码

<div id="box">
  <label for="pwd">
    <img src="images/close.png" alt="" />
  </label>
  <input type="password" name="pwd" id="pwd" />
</div>

CSS代码如下：

#box {
  position: relative;
  width: 400px;
  border-bottom: 1px solid red;
  margin: 100px auto;
}
#box input {
  width: 370px;
  height: 30px;
  border: 0;
  outline: none;
}
#box img {
  position: absolute;
  right: 0px;
  top: 4px;
  width: 24px;
}

02JavaScript代码

// 获取页面元素
var img = document.querySelector("img");
var pwd = document.querySelector("input");

// 绑定单击事件处理函数
img.onclick = function () {
  // 如果类型已经是password，则改成text，同时修改图片地址
  if (pwd.type == "password") {
    pwd.type = "text";
    this.src = "images/open.png";
  } else {
    // 否则改成password，同时修改图片地址
    pwd.type = "password";
    this.src = "images/close.png";
  }
};