JS 綜合示範 : 簡易密碼產生器 & 動態表單通訊錄


Posted by tzutzu858 on 2020-08-09

簡易密碼產生器

先刻英文數字的選擇器
選擇的時候按文字也會被選到
方法一 : 用 label 把英文包起來
<input type="checkbox" id="en"/><label for="en">英文</label>
方法二 : 用 label 把 input 包起來
<label><input type="checkbox" id="en"/>英文</label>

<body>
  <div class="app">
    <div><label><input type="checkbox" name="en" />英文</label></div>
    <div><label><input type="checkbox" name="num" />數字</label></div>
    <div><label><input type="checkbox" name="sp" />特殊符號</label></div>
    <div>
      <button class="btn-generate">產生</button>
    </div>
    <div class="result">
      dfsdsdgsg
    </div>
  </div>

  <script>
    document.querySelector(".btn-generate").addEventListener("click",
      function () {
        let availableChar = ''
        if (document.querySelector('input[name=en]').checked) {
          availableChar += 'abcdefghijklmnopqrstuvwxyz'
        }

        if (document.querySelector('input[name=num]').checked) {
          availableChar += '0123456789'
        }

        if (document.querySelector('input[name=sp]').checked) {
          availableChar += '!@#$%^&*()'
        }

        let result = ''
        for (let i = 0; i < 10; i++) {
          // 0 ~ availableChar.length - 1
          const number = Math.floor(Math.random() * availableChar.length)
          result += availableChar[number]
        }
        document.querySelector(".result").innerText = result
      }
    )
  </script>
</body>

簡化 : 加個 function

  <script>
    function getChar(name, char) {
      if (document.querySelector('input[name= ' + name + ']').checked) {
        return char
      } return ''
    }
    document.querySelector(".btn-generate").addEventListener("click",
      function () {
        let availableChar = ''
        availableChar += getChar('en', 'abcdefghijklmnopqrstuvwxyz')
        availableChar += getChar('num', '0123456789')
        availableChar += getChar('sp', '!@#$%^&*()')

        let result = ''
        for (let i = 0; i < 10; i++) {
          // 0 ~ availableChar.length - 1
          const number = Math.floor(Math.random() * availableChar.length)
          result += availableChar[number]
        }
        document.querySelector(".result").innerText = result
      }
    )
  </script>

把資料放在 html 上

<body>
  <div class="app">
    <div><label><input type="checkbox" name="en" data-char="abcdefghijklmnopqrstuvwxyz" />英文</label></div>
    <div><label><input type="checkbox" name="num" data-char="0123456789" />數字</label></div>
    <div><label><input type="checkbox" name="sp" data-char=!@#$%^&*() />特殊符號</label></div>
  </div>
  <div>
    <button class="btn-generate">產生</button>
  </div>
  <div class="result">
    aaaa
  </div>


  <script>
    document.querySelector(".btn-generate").addEventListener("click",
      function () {
        let availableChar = ''
        const elements = document.querySelectorAll("input[type=checkbox]")
        for (let i = 0; i < elements.length; i++) {
          if (elements[i].checked) {
            availableChar += elements[i].getAttribute('data-char')
          }
        }

        let result = ''
        for (let i = 0; i < 5; i++) {
          // 0 ~ availableChar.length - 1
          const number = Math.floor(Math.random() * availableChar.length)
          result += availableChar[number]
        }
        document.querySelector(".result").innerText = result
      }
    )
  </script>
</body>

動態表單通訊錄

<body>
  <div class="app">
    <div>
      <button class='add-btn'>新增聯絡人</button>
    </div>
    <div class="contacts">
      <div class="row">
        姓名 : <input name='name' />
        電話 : <input name='phone' />
        <button class="delete">刪除</button>
      </div>
    </div>

    <script>
      document.querySelector(".add-btn").addEventListener("click",
        function () {
          const div = document.createElement('div')
          div.classList.add('row')
          div.innerHTML = `
          姓名 : <input name='name' />
          電話 : <input name='phone' />
          <button class="delete">刪除</button>
          `
          document.querySelector(".contacts").appendChild(div)
        }
      )

      document.querySelector(".contacts").addEventListener("click",
        function (e) {
          if (e.target.classList.contains('delete')) {
            document.querySelector('.contacts').removeChild(e.target.closest('.row'))
          }
        }
      )
    </script>
</body>

Element.closest()方法用來獲取:匹配特定選擇器且離當前元素最近的祖先元素(也可以是當前元素本身)。如果匹配不到,則返回null。










Related Posts

MTR04_0810

MTR04_0810

[Day 4] JS in Pipeline (4): Configs and Secrets

[Day 4] JS in Pipeline (4): Configs and Secrets

r3:0 異世界網站挑戰 - 破關紀錄

r3:0 異世界網站挑戰 - 破關紀錄


Comments