クリックして認証コードと認証を切り替えるJavaScript
|
この記事では、クリックして切り替える認証コードと認証を実装するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 効果：
コード：
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<タイトル></タイトル>
<スタイル>
div {
幅: 100ピクセル;
高さ: 40px;
背景色: 赤;
色: #fff;
テキスト配置: 中央;
行の高さ: 40px;
フォントサイズ: 30px;
フォントの太さ: 900;
ユーザー選択: なし;
}
。見せる {
位置: 絶対;
左: 0;
上: 0;
右: 0;
下部: 0;
マージン: 自動;
幅: 200ピクセル;
高さ: 100px;
背景色: ピンク;
テキスト配置: 中央;
行の高さ: 100px;
フォントサイズ: 40px;
フォントの太さ: 900;
表示: なし;
}
</スタイル>
</head>
<本文>
<div></div>
<input type="text" value="上記の確認コードを入力してください" />
<button>登録</button>
<div class="show">待っています。 。 。 。 </div>
<script type="text/javascript">
//1000-9999
タグ名によって要素を取得します。
var inp = document.getElementsByTagName("input")[0];
var btn = document.getElementsByTagName("ボタン")[0];
div[0].innerHTML = ranFun(1000, 9999);
inp.onclick = 関数（）{
this.value = ""
}
div[0].onclick = 関数（）{
this.innerHTML = ranFun(1000, 9999)
}
btn.onclick = 関数（）{
inp.value == div[0].innerHTMLの場合{
div[1].style.display = "ブロック";
setTimeout(関数() {
location.href = "register.html"
}, 3000)
} それ以外 {
アラート('認証コードエラー')
div[0].innerHTML = ranFun(1000, 9999);
inp.value = ""
}
}
関数 ranFun(a, b) {
Math.floor(Math.random() * (b - a + 1) + a) を返します。
}
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 雨滴効果を実現する JavaScript キャンバス
推薦する
MySQL データ型 DECIMAL の詳細な分析
序文：金額の保存など、小数点数を保存し、精度要件がある場合、通常は DECIMAL フィールド タイ...
MYSQL データベースの基礎 - 結合操作の原理
結合では、ネスト ループ結合アルゴリズムが使用されます。ネスト ループ結合には 3 つの種類がありま...
Windows Server のインストール後にワイヤレスとオーディオが機能しない問題を解決する
1. ワイヤレスPowerShell を実行し、次のコマンドを入力します。 install-wind...
Dockerイントラネット侵入FRP展開の実装プロセスの分析
1. 設定ファイルディレクトリを作成するcd /ホームディレクトリmkdir frp最終的なディレク...
jQueryはシンプルなコメントエリアを実装します
この記事では、参考までに、簡単なコメントエリアを実装するためのjQueryの具体的なコードを紹介しま...
JavaScript のガベージコレクションの仕組みの詳細な説明
目次ガベージコレクション (GC) はなぜ必要なのでしょうか?ガベージコレクションとは廃棄物の発生ガ...
Vue+video.jsはビデオプレイリストを実装します
この記事では、ビデオプレイリストを実装するためのvue + video.jsの具体的なコードを参考ま...
Linux 上の MySQL 5.7 でパスワードを忘れる問題を解決する
1. 問題Linux 上の mysql5.7 のパスワードを忘れました2. 解決策• ステップ 1:...
JavaScript で Priority Queue を実装する
目次1. 優先キューの紹介2. 優先キューのカプセル化1. 優先キューの紹介通常のキューに要素が挿入...
TypeScript 列挙の基本と例
目次序文TypeScript の列挙型とは何ですか? TypeScriptで列挙型を使用する際に注意...
VMware Workstation Pro 16 グラフィックチュートリアル (CentOS8 仮想マシン クラスタの構築)
目次準備VMware Workstation Pro 16 をインストールするLinux仮想マシンの...
jQueryフレームワークは、要素の表示と非表示の3つのアニメーションメソッドを実装しています。
目次1. デフォルトで表示と非表示を切り替える2. スライドして表示と非表示を切り替える3. フェー...
mysql を解決: エラー 1045 (28000): ユーザー 'root'@'localhost' のアクセスが拒否されました (パスワードの使用: NO/YES)
1. 問題時々Mysqlにログインしてパスワードを入力すると、この状況が発生しますmysql -u...
CSS スティッキー配置位置の詳細な説明: スティッキー問題の落とし穴
前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...
Linux Cron によるパラメータ付き PHP コードのスケジュール実行
1. 引き続き PHP スクリプトを使用して実行します。コマンドラインに入力: php /home/...