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

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

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

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8" />
  <タイトル></タイトル>
  <スタイル>   
  </スタイル>
 </head>
 <本文>
  <div>
  <h1>111111</h1><a href="#" rel="external nofollow" >よく見えないので、1つ変更してください</a>
  </div>
  確認コード: <input type="text" value="" />
  <button>OK</button>
 </本文>
 <スクリプト>
  var arr = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z",
       「a」、「b」、「c」、「d」、「e」、「f」、「g」、「h」、「i」、「j」、「k」、「l」、「m」、「n」、「o」、「p」、「q」、「r」、「s」、「t」、「u」、「v」、「w」、「x」、「y」、「z」、
       0,1,2,3,4,5,6,7,8,9];
        var h1 = document.querySelector("h1");
        var btn = document.querySelector("ボタン");
        var change = document.querySelector("a");     
        var input = document.querySelector("入力");         
         関数fn(){
        var arr1 = Math.floor(Math.random()*62);
        var arr2 = Math.floor(Math.random()*62);
        var arr3 = Math.floor(Math.random()*62);
        var arr4=Math.floor(Math.random()*62);
        var arr5=Math.floor(Math.random()*62);
        var arr6=Math.floor(Math.random()*62);
        var yz=""+arr[arr1]+arr[arr2]+arr[arr3]+arr[arr4]+arr[arr5]+arr[arr6];
            h1.innerHTML は yz です。    
            btn.onclick=関数(){
              アラート(入力値);
             if(入力値==yz){
            アラート("正しい");
            }それ以外{
             警告("エラー");
            }
           
            }
         }
        関数fn();
    change.addEventListener("click",fn);
 </スクリプト>
</html>

1. Math.floor() メソッド

数学.floor(x)

floor() メソッドは、x 以下の最大の整数を返します。

渡された引数が整数の場合、値は変更されません。

2. Math.random() メソッド

random() メソッドは、0 (含む) から 1 (含まない) までの乱数を返します。

上記の2つの方法を使用して、乱数を取得する機能を実現できます。

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

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

<<:  MySql ビュー トリガー ストアド プロシージャの詳細な説明

>>:  Linux ソースコードからのソケット (TCP) クライアント側での接続の例の詳細な説明

推薦する

ウェブデザインのためのオンライン開発ツール10選の紹介

1. オンラインテキストジェネレーターBlindTextGenerator: デザイナーにとって、こ...

CSS3で背景画像にカラーマスクを追加する方法

以前、開発中に背景レイヤーにカラーマスクを追加する必要のあるプロジェクトに遭遇しました。ここでは、背...

Vue: メモリリークの詳細な説明

メモリリークとは何ですか?メモリ リークとは、新しいメモリが作成されたが、解放またはガベージ コレ...

HTMLページ間で値を渡す問題の解決策

初めてこのエッセイを使ったとき、私はかなりぎこちなく感じましたhtmlファイルコードをコピーコードは...

SQLはROW_NUMBER() OVER関数を使用してシーケンス番号を生成します。

構文: ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY...

ウェブデザインの初心者に役立つ学習教材をいくつかお勧めします

勉強中に読んだ本についてもよく聞かれます。以下は初心者におすすめの本です(私が勉強中に読んだ本です。...

JavaScript 配列メソッド - 体系的な概要と詳細な説明

目次一般的な配列メソッド配列要素の追加と削除配列ヘッダーの操作配列の末尾を操作する任意の場所に追加ま...

JavaScript 正規表現の説明

目次1. 正規表現の作成2. 使用モード2.1 シンプルモードの使用2.2 特殊文字の使用3. 応用...

Vue ドラッグ アンド ドロップのシンプルな実装

この記事では、主に次のような Vue ドラッグ アンド ドロップの簡単な実装を紹介します。レンダリン...

HTML のインラインブロックの空白を素早く削除する 5 つの方法

inline-block プロパティ値は、「インライン」要素のマージンとパディングを制御する必要があ...

Dockerでイメージをプルするための手順を完了する

1. Docker pullはイメージをプルします$ docker pull {IMAGE_NAME...

実用的なクイックスタートReactルーティング開発

インストールインストールするには、次のコマンドを入力します。 // ネプ npm で react-r...

Centos7 インストール mysql5.6.29 シェル スクリプト

この記事では、参考までにmysql5.6.29のシェルスクリプトを共有します。具体的な内容は次のとお...

ページに間隔を空けてグリッドレイアウトを完璧に実装する方法

典型的なレイアウト例上の写真のように、正方形の真ん中に一定の隙間があり、その隙間は固定されています。...

Linuxのファイル操作の知識ポイントを詳しく解説

ファイル操作に関連するシステムコール作成するint creat(const char *ファイル名,...