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の基本的なネットワーク構成の詳細な説明

推薦する

水平ヒストグラムを作成するための MySQL ソリューション

序文ヒストグラムは、RDBMS によって提供される基本的な統計情報です。最も一般的に使用されるのは、...

MySQL 5.7.18 リリース インストール ガイド (bin ファイル バージョンを含む)

インストール プロセスは、コンパイル手順を除いて、基本的にソース バージョンと同じです。この記事では...

Docker を使用した Laravel アプリケーションのデプロイ例

この記事で使用されているPHPベースイメージはphp:7.3-apacheです。この記事の Lara...

HTMLで細い線のテーブルを作成する簡単な例

この細線の表を作成する方法については、Baidu で検索すると、表に対して border="...

Deepin で virtualenv をインストールして使用するチュートリアル

virtualenv は、分離された Python 仮想環境を作成するためのツールです。独立したディ...

HTML_PowerNode Java アカデミーでテーブルを動的に追加する

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <html> <...

MySql インポート CSV ファイルまたはタブ区切りファイル

別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...

フレームセットの共通プロパティ(フレームとウィンドウの分割)

フレームとは、Web ページ画面を複数のフレームに分割したもの(複数の Web ページという形で表示...

MySQL PXC は IST 送信のみで新しいノードを構築します (推奨)

需要シナリオ: 既存の PXC 環境には大量のデータがあります。新しく購入したサーバーをこのクラスタ...

Doubanウェブサイトのウェブサイトコンテンツに小さな変更を加える方法

<br />読みやすさはウェブサイトにとって非常に重要な部分であり、ウェブサイトの核心と...

MySQL データベース設計 3 つのパラダイム例分析

3つのパラダイム1NF: フィールドは分離不可能です。 2NF: 主キーがあり、非主キー フィールド...

CSSでnグリッドレイアウトを実装する方法

一般的なアプリケーションシナリオ現在のアプリのインターフェースは基本的に同じであり、グリッドレイアウ...

Vueスロットの詳細な説明

1. 機能: 親コンポーネントが子コンポーネントの指定された位置に HTML 構造を挿入できるように...

CSSセレクタを使用してラベルスタイルを設定するサンプルコード

CSS セレクターHTML タグにスタイルを設定すると、タグの属性を設定できます。 <div ...