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

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> 

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSは検証コードのランダム生成を実装します
  • JavaScriptは検証コードと検証のランダム生成を実装します
  • JavaScriptはボタンをクリックして4桁のランダムな検証コードを生成します
  • JavaScript 関数はランダムな色の検証コードをカプセル化します (完全なコード)

<<:  MySQLの基本操作学習ノートテーブル

>>:  Dockerの基本的なネットワーク構成の詳細な説明

推薦する

CSS でフッターの「下部吸収」効果を実現

よく遭遇する問題: 下部の要素を「下部に貼り付ける」効果を CSS でどのように実現するか。この記事...

HTML内のフレームセットタグが正常に表示されない原因の解析と解決方法

<frameset></frameset>は皆さんもよくご存知のものです。こ...

HTML メタの使用例

使用例コードをコピーコードは次のとおりです。 <!DOCTYPE html> <!...

Linux ログ内のキーワードとその前後の情報を検索する方法の例

日常業務では、ログを表示する必要がよくあります。たとえば、 tail コマンドを使用してログをリアル...

NetEase ブログで使用されているシンプルな Web ページ コード

NetEase Blog でコードを使用する方法: まずブログにログインし、ブログのホームページの左...

mysql8.0 パスワードを忘れた場合の修正とネットコマンドのサービス名が無効になる問題

cmdにnet start mysqlと入力すると、プロンプトが表示されます: サービス名が無効です...

レスポンシブWebデザイン学習(3) - モバイルデバイスでのWebページのパフォーマンスを向上させる方法

序文モバイル デバイスでは、帯域幅とプロセッサ速度の制限により、Web ページのパフォーマンスに対す...

タオバオモールのホームページ上の大きな画像のデザイン構造に関する分析と意見(写真)

前回、Taobaoの詳細ページを分析した後(クリックして表示)、ショッピングモールの基本テンプレート...

Nginx+tomcat ロードバランシングクラスタの実装方法

実験環境は以下のとおりですここでは、4 台のサーバー (1 台の nginx、負荷用の 2 台の t...

MySQL、Oracle、SQL Server のページングクエリ例の分析

最近、Oracle、MySQL、SQL Server 2005 のデータ ページング クエリについて...

Mysql | ワイルドカード(%、_ など)を使用したファジークエリの詳細な説明

ワイルドカードのカテゴリ: %パーセント ワイルドカード: 任意の文字が任意の回数出現できることを示...

Centos7 MySQL データベースのインストールと設定のチュートリアル

1. システム環境yum updateアップグレード後のシステムバージョンは[root@yl-web...

Linux で複数のファイルの名前を一括で変更する方法

Linux では、通常、ファイルの名前を変更するために mv コマンドを使用します。これは、単一のフ...

シームレスなカルーセルを実現するjQueryプラグイン

シームレス カルーセルは非常に一般的なエフェクトであり、ロジックを理解すれば非常に簡単です。効果は以...

Nginx と GeoIP モジュールを使用して IP の地域情報を読み取る方法

LinuxにGeoIPをインストールする yum で nginx-module-geoip をインス...