JavaScriptは4桁のランダム検証コードの生成を実装します

この記事の例では、JavaScriptで4桁のランダムな検証コードを生成する具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

コード：

<!doctypehtml>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>4桁のランダムな検証コードを生成する</title>
<スタイル>
 ラベル{
 色:アクア;
 フロート:左;
 フォントサイズ: 20px;
 行の高さ:2em;
 }
 #tex{
 表示:インラインブロック;
 幅:50px;
 高さ: 25px;
 フロート:左;
 テキスト配置: 中央;
 フォントサイズ:15px;
 上マージン:10px;
 }
 #showyz{
 border:3px 緑一色;
 色:青;
 幅:90ピクセル;
 高さ:40px;
 テキスト配置:中央;
 フロート:左;
 左マージン:15px;
 行の高さ: 2.5em;
 
 }
 #ハイズ{
 背景色:バーリーウッド;
 border:1px solid burlywood;
 幅:50px;
 高さ:20px;
 フロート: 左;
 左マージン:20px;
 上マージン: 10px;
 右マージン:15px;
 }
 #ボタン{
 
 }
</スタイル>
</head>
<本文>
<label for="tex">確認コードを入力してください:</label><input type="text" id="tex" maxlength="4" autofocus>
<div id="showyz"></div>
<div id="hyz">1 つ変更</div><br>
<input type="button" id="btn" value="確認">
</本文>
<スクリプト>
// 62 個のコードを保存するための空の配列を定義します。var codes=[];
// 数字に対応するコードをコード配列に保存します。デジタルコードの範囲は [48-57] です。
(var i=48;i<=57;i++){
 コード.push(i);
}
//大文字に対応するコードをコード範囲[65-90]に対応するコード配列に保存します。
(var i=65;i<=90;i++){
 コード.push(i);
}
//コード範囲[97-122]に対応する小文字に対応するコードをコード配列に保存します。
(var i=97;i<=122;i++){
 コード.push(i);
}
// 62 ビットの乱数を配列の添え字として生成し、ランダムなコードを返し、そのコードを対応する数字または文字に変換するメソッドを定義します。function suiji(){
var arr=[]; //4ビットの乱数を格納する配列を定義する for(var i=0;i<4;i++){
 var index = Math.floor(Math.random()*(61-0+1)+0); // 乱数を生成 var char = String.fromCharCode(codes[index]); // デコード arr.push(char); // 配列 arr に格納 }
 return arr.join(""); //配列をスペースで区切られた文字列に変換して返す }
var yzm=suiji();//メソッドを呼び出して検証コードをyzmに返す//上記の要素を取得する var tex=document.getElementById("tex");
var showyz=document.getElementById("showyz");
var hyz = document.getElementById("hyz");
var btn = document.getElementById("btn");
// id の div に検証コードを書き込みます showyzshowyz.innerHTML=yzm;
//認証コードを変更する機能を実現する hyz.onclick=function(){
 yzm=suiji();
 表示yz.innerHTML=yzm;
}
//入力した確認コードを取得したランダムな確認コードで検証します btn.onclick=function(){
 var textvalue=tex.value;//入力値を取得します if(textvalue.toLowerCase()==yzm.toLowerCase()){//比較のためにすべての値を小文字に変換します alert("検証コードの入力は正しいです!");
 yzm=suiji();
  表示yz.innerHTML=yzm;
 tex.value="";
 }
 それ以外{
 alert("認証コードの入力が間違っています。再入力してください!");
 yzm=suiji();
  表示yz.innerHTML=yzm;
 tex.value="";
 }
}
</スクリプト>
</html>