クリックして認証コードと認証を切り替える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 キャンバス
推薦する
Vue3とElectronを使ったデスクトップアプリケーションの詳しい説明
目次Vue CLIはVueプロジェクトを構築しますVue プロジェクトをマークダウン エディターに変...
文字列の最初の文字を取得してテキストアイコン機能を実現する純粋なCSS
CSS でテキストアイコンを実装する方法 /*アイコンスタイル*/ .nav-icon-norma...
Linux/Docker で System.Drawing.Common を使用する
序文プロジェクトを .net core に移行した後、 System.Drawing.Commonコ...
MySQL のマスター スレーブ レプリケーション オプションをオンラインで変更する方法
序文： MySQL で最も一般的に使用されるアーキテクチャは、マスター スレーブ レプリケーションで...
vue-amap のインストールと使用手順
以前、Amap API を非同期にロードする方法を紹介しました。今回は、vue-amap の使用方法...
フォームアクションとonSubmitの例
まず、action はフォームの属性です。HTML5 では必須の属性値として定義されています。onS...
HTML テーブルタグチュートリアル (25): 垂直配置属性 VALIGN
垂直方向では、行の配置を上、中央、下に設定できます。基本的な構文<TR VALIGN=&quo...
Linux 上のカラフルな猫
Linux システムを使用したことがある友人なら、 catコマンドを使用したことがあるはずです。もち...
Dockerでmysqlのルートパスワードを変更する方法
最初のステップはmysqlコンテナを作成することです docker exec -it コンテナID ...
React コードを共有するためのベストプラクティス
プロジェクトがある程度複雑になると、必然的にロジックの再利用の問題に直面することになります。 Rea...
JS の配列トラバーサルについて、一般的なループをいくつ知っていますか?
序文基本的なデータ構造として、配列とオブジェクトはさまざまなプログラミング言語で重要な役割を果たしま...
MySQL サービスに iptables ファイアウォール ポリシーを追加するためのソリューション
MySQL データベースが Centos7 システムにインストールされており、オペレーティング シス...
Ubuntu 16.04 で PostgreSQL の起動を設定する方法
PostgreSQL はコンパイルされインストールされるため、起動時に起動するように設定する必要があ...
Linux CentOS6.5 yum インストール mysql5.6
この記事では、Linux yumを使用してmysql5.6をインストールする簡単な手順を参考までに紹...
要素 el-button ボタンコンポーネントの使用の詳細な説明
1. 背景ボタンは非常によく使われており、Element のボタン機能は非常に包括的です。この記事で...