案例--密码小眼睛(星号 和 显示的切换)

      分析:

        + input 为什么会显示 ......

          => 因为 type 是 password

          => 只要 type 是 text, 就能显示文本内容

        + 如何进行显示文本内容的操作

          => 就是把该元素的 type 属性的值修改为 text

          => 操作元素的原生属性 type

      代码实现:

        1. 获取元素

          => button 按钮, 因为是当点击的时候, 进行的操作

          => input 文本框, 需要修改他的 type 属性

        2. 给 按钮 绑定一个点击事件

        3. 在点击事件内, 操作

          => 需要把文本框的 type 属性修改为 text

          3-1. 先获取到 文本框目前的 type 属性的值

          3-2. 判断, 如果是 text, 那么修改为 password

               判断, 如果是 password, 那么修改为 text

---

密码 : <input type="password"> <button>切换显示</button>
/* ------------------------------------ */
// 1. 获取元素
let btn = document.querySelector('button')
let inp = document.querySelector('input')

// 2. 给按钮绑定点击事件
btn.onclick = () => {
  // 3-1. 拿到当前文本框的 type 属性
  let t = inp.type

  // 3-2. 判断
  if (t === 'password') {
    // 修改为 text
    inp.type = 'text'
  } else {
    // 修改为 password
    inp.type = 'password'
  }
}