クリックして認証コードと認証を切り替える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の共通関数を使用してJSONを処理する方法
公式ドキュメント: JSON 関数名前説明JSON_APPEND() JSONドキュメントにデータを...
タブ効果を実現する js 開発プラグイン
この記事の例では、タブ効果を実現するためのjsプラグインの具体的なコードを参考までに共有しています。...
JavaScript コンストラクタとプロトタイプの関係
目次1. コンストラクタとプロトタイプ1. コンストラクター2. コンストラクタ問題3. コンストラ...
収集する価値のあるCSS命名規則（ルール） よく使われるCSS命名規則
CSS命名規則（ルール） よく使われるCSS命名規則ヘッダー: ヘッダーコンテンツ: コンテンツ/コ...
Win10 の組み込み Linux システムを使用して Spring Boot プロジェクトを開始する方法
1. Windows10の組み込みLinuxサブシステムをインストールする1.1. Linuxサブシ...
Linuxでファイルの作成時間を表示する方法
1. はじめにLinux でファイルの作成時刻が見つかるかどうかは、ファイル システムの種類によって...
MySQL 5.7 共通データ型
——「MySQL in Simple Terms (第 2 版)」からのメモ数値型整数型バイト最小最...
MySQL データベースの詳細な説明 - 複数テーブル クエリ - 内部結合、外部結合、サブクエリ、相関サブクエリ
複数テーブルクエリ複数のテーブルから関連するクエリ結果を取得するには、単一の SELECT ステート...
secure_file_priv nullの問題を解決する
secure_file_priv = ' '；管理者としてcmdを実行します。 my...
LinuxでTomcatのポート番号を変更する方法
ここには複数の Tomcat があります。それらを同時に使用する場合は、ポート番号を別の番号に変更す...
Vue3はJingdong製品詳細ページの虫眼鏡効果コンポーネントをカプセル化します
この記事では、Jingdong製品詳細ページの虫眼鏡効果コンポーネントに似たvue3カプセル化の具体...
vscodeでnpmを使用してbabelをインストールする方法
序文前回の記事ではNode.jsのインストールと設定を紹介しました。今回はVScodeでbableを...
JavaScriptは検証コードと検証のランダム生成を実装します
この記事では、検証コードのランダム生成と検証を実現するためのJavaScriptの具体的なコードを参...
JS を使って 1 分で github+Jekyll ブログに訪問カウント機能を追加する実装
目次1分でgithub+Jekyllブログにトラフィック機能を追加する1. ジェクルとは何か1. J...
CentOS 上での MySQL 5.6 のコンパイルとインストール、および複数の MySQL インスタンスのインストールの詳細な説明
--1. mysql用の新しいグループとユーザーを作成する # ユーザー追加 -M -s /sbin...