この記事では、検証コードの効果を実現するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 本日のケースでは、効果は以下のとおりです。 このケースを実装する上で、実はそれほど難しいことはありません。一緒に見ていきましょう。 html と css の実装についてはここでは説明しません。以下のコードと比較しながら細部に注意しながら自分で実装してください。 次に、js の実装を見てみましょう。 私たちが行う必要があることは 2 つあります。 1.ページを更新したり、変更をクリックしたときに検証コードを生成できるように、検証コードをランダムに生成します。 まず、 for ループと 次に、 その他の詳細はコードに記載されています。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <スタイル> 。容器{ 幅: 400ピクセル; 高さ: 100px; マージン:100px 自動; 背景色: hsla(180, 73%, 78%, 0.199); 境界線の半径: 20px; テキスト配置: 中央; パディング: 20px; } #チェック{ 表示: インラインブロック; 幅: 100ピクセル; 高さ: 30px; テキスト配置: 中央; 背景色: rgba(128, 128, 128, 0.158); 色:青; フォントサイズ:26px; フォントスタイル: 斜体; 文字間隔: 2px; フォントファミリー:Arial、Helvetica、sans-serif; 下マージン: 10px; } .ma{ 下部マージン: 12px; } </スタイル> </head> <本文> <div class="コンテナ"> <div> <span id="check">adf34y</span> <a href="#" id="checka">不明瞭な場合は変更してください</a> </div> <div class="ma"> <label for="zheng">確認コード</label> <input type="text" id="zheng"> </div> <button id="btn">OK</button> </div> <スクリプト> 合計を[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']とします。 var チェック = document.getElementById("チェック"); var コード; 関数fun(){ str="";とします。 (i=0;i<6;i++) の場合{ let pos=Math.round(Math.random()*15); //この書き方に注意して、乱数を取得します str+=sum[pos]; } チェック.innerHTML=str; str を返します。 } window.onload = 関数(){ コード=楽しい(); } checka = document.getElementById("checka"); とします。 checka.onclick=関数(){ コード=楽しい(); } btn = document.getElementById("btn"); とします。 btn.onclick=関数(){ t=document.getElementById("zheng").value; とします。 コンソールログ if(t==コード){ アラート("正しい"); コード=楽しい(); document.getElementById("zheng").value=""; } それ以外{ 警告("エラー"); document.getElementById("zheng").value=""; } } </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: あまり使われていない、または誤解されている HTML タグ 10 個
>>: Dockerコンテナ間のホスト間通信 - オーバーレイベースの実装方法
データベースが同じデータ バッチを同時に追加、削除、および変更すると、ダーティ書き込み、ダーティ読み...
HTML画像にハイパーリンクを追加すると醜い青い枠線が表示される次のように:解決: CSS スタイル...
Web プロジェクトの開発プロセスでは、CSS ファイルや JS ファイルを参照することがよくあり...
事故の背景: 数日前、プロジェクトの必要性により、サーバーに python-mysql モジュールを...
この記事では、Jingdong製品詳細ページの虫眼鏡効果コンポーネントに似たvue3カプセル化の具体...
この記事では、フォーム検証を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...
HTML コードを書くとき、最初の行は DOCTYPE にする必要がありますが、DOCTYPE は通...
ディレクトリを作成する cd /usr/local/docker/ jenkins-docker を...
この記事の例では、Appleの電卓を実装するためのJSの具体的なコードを参考までに共有しています。具...
この記事では、MySQL データベースのバックアップを実装するさまざまな方法について説明します。ご参...
目次1. 基本的な例2. 計算プロパティキャッシュとメソッド3. 計算プロパティセッター序文:通常、...
この記事の例では、ショッピングカートのロジックと機能を実装するためのjsの具体的なコードを共有してい...
まずコードを書いて (int i=0;i<1000;i++){ (int j=0;j<5...
1 分で最初の Web ページを作成します。簡単な Web ページを作ってみましょう。ぜひフォローし...
注1: MySQLデータベースへの接続が遅い問題を解決するvim /etc/my.cnfコンテン...