1.アイデア：ページがロードされるとすぐに、4桁のCAPTCHAを生成し、CODEBOXボックスに配置し、CODEBOXボックスをクリックすると、4桁のCAPTCHAを再生成し、ボックスに配置する必要があります！* 4桁のCAPTCHAを再生成してボックスに入れてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>認証コードを取得する</title>
<!-- IMPORT CSS -->
<style>
* {
margin: 0;
padding: 0;
user-select: none;
}
.codeBox {
box-sizing: border-box;
margin: 20px;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid lightcoral;
cursor: pointer;
font-size: 20px;
letter-spacing: 5px;
}
</style>
</head>
<body>
<div class="codeBox" id="codeBox"></div>
<!-- IMPORT JS -->
<script>
let codeBox = document.getElementById('codeBox');
/* CAPTCHAを作成し、CODEBOXボックスに配置する。*/
function createCode() {
let area = '0123456789QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm',
codeText = '';
for (let i = 1; i <= 4; i++) {
let ran = Math.round(Math.random() * (61 - 0) + 0),
char = area.charAt(ran);
codeText += char;
}
codeBox.innerHTML = codeText;
}
// の実行でページをロードする。
createCode();
// CODEBOXボックスをクリックして再生成する（ここでは、括弧の後に関数を追加することはできない），
//(即座に関数を実行させるのではなく、実行する時にクリックさせたいからだ）
codeBox.onclick = createCode;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>認証コードを取得する</title>
<!-- IMPORT CSS -->
<style>
* {
margin: 0;
padding: 0;
user-select: none;
}
.codeBox {
box-sizing: border-box;
margin: 20px;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid lightcoral;
cursor: pointer;
font-size: 20px;
letter-spacing: 5px;
}
</style>
</head>
<body>
<div class="codeBox" id="codeBox"></div>
<!-- IMPORT JS -->
<script>
let codeBox = document.getElementById('codeBox');
// 検証コードの値の範囲（インデックスの範囲：0）~61）
let area = '0123456789QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm';
// ランダムに4つ（数学.random()）ランダムに4つのゼロを得る~61の間のインデックス値，
//AREA範囲に4文字を取るために、この値に基づいて、必要な4桁の検証コードに綴ることができる
let codeText = '';
for (let i = 1; i <= 4; i++) {
// 各サイクルでランダムなインデックスを得る
let ran = Math.round(Math.random() * (61 - 0) + 0);
// インデックスに基づいて対応する文字を取得する
let char = area.charAt(ran);
// その結果
codeText += char;
}
console.log(codeText);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>認証コードを取得する</title>
<!-- IMPORT CSS -->
<style>
* {
margin: 0;
padding: 0;
user-select: none;
}
.codeBox {
box-sizing: border-box;
margin: 20px;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid lightcoral;
cursor: pointer;
font-size: 20px;
letter-spacing: 5px;
}
</style>
</head>
<body>
<div class="codeBox" id="codeBox"></div>
<!-- IMPORT JS -->
<script>
(function () {
let area = '0123456789QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm';
let codeText = ''; */
// 現在の需要では、正確なサイクルはもはや正確ではない。
for (let i = 1; i <= 4;) {
let ran = Math.round(Math.random() * (61 - 0) + 0);
let char = area.charAt(ran);
// スプライシングでは、まず元の文字列にCHARという文字がすでに存在するかどうかを判断する。，
//スプライシングの存在が（大文字と小文字が同じである限り、見にスプライシングに存在しないも繰り返しとみなされる）行くことはない
//=>(今大文字か小文字かにかかわらず、//とにかく、それは大文字に変換され、その後、存在を決定する)
if (!codeText.toUpperCase().includes(char.toUpperCase())) {
codeText += char;
i++;
}
}
// 特定のループ回数がわからないループには、一般的にwhileループを使う
// while(条件){ } 条件が成立している限り、ループし続ける
while (codeText.length < 4) {
let ran = Math.round(Math.random() * (61 - 0) + 0),
char = area.charAt(ran);
if (!codeText.toUpperCase().includes(char.toUpperCase())) {
codeText += char;
}
}
console.log(codeText);
})();
</script>
</body>
</html>
