この記事の例では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
よく遭遇する問題: 下部の要素を「下部に貼り付ける」効果を CSS でどのように実現するか。この記事...
<frameset></frameset>は皆さんもよくご存知のものです。こ...
使用例コードをコピーコードは次のとおりです。 <!DOCTYPE html> <!...
日常業務では、ログを表示する必要がよくあります。たとえば、 tail コマンドを使用してログをリアル...
NetEase Blog でコードを使用する方法: まずブログにログインし、ブログのホームページの左...
cmdにnet start mysqlと入力すると、プロンプトが表示されます: サービス名が無効です...
序文モバイル デバイスでは、帯域幅とプロセッサ速度の制限により、Web ページのパフォーマンスに対す...
前回、Taobaoの詳細ページを分析した後(クリックして表示)、ショッピングモールの基本テンプレート...
実験環境は以下のとおりですここでは、4 台のサーバー (1 台の nginx、負荷用の 2 台の t...
最近、Oracle、MySQL、SQL Server 2005 のデータ ページング クエリについて...
ワイルドカードのカテゴリ: %パーセント ワイルドカード: 任意の文字が任意の回数出現できることを示...
1. システム環境yum updateアップグレード後のシステムバージョンは[root@yl-web...
Linux では、通常、ファイルの名前を変更するために mv コマンドを使用します。これは、単一のフ...
シームレス カルーセルは非常に一般的なエフェクトであり、ロジックを理解すれば非常に簡単です。効果は以...
LinuxにGeoIPをインストールする yum で nginx-module-geoip をインス...