簡易密碼產生器
先刻英文數字的選擇器
選擇的時候按文字也會被選到
方法一 : 用 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。
