クリックして認証コードと認証を切り替える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 キャンバス
推薦する
IDEA2020.1.2 Webプロジェクトの作成とTomcatの設定に関する詳細なチュートリアル
この記事は、IDEA で Web プロジェクトを作成し、Tomcat を構成する方法についての統合記...
Linux システムのシャットダウンコマンドの違いと使い方の詳細な説明
Linux システムのシャットダウン コマンドは何ですか? Liangxu Tutorial Net...
CSSプロパティに基づいたボタンホバーボーダーと背景アニメーションのコレクション
ハートの属性不透明度: .999 は要素のスタッキングコンテキストを作成し、ボタン6と8のアニメーシ...
Linuxの一般ユーザー向けスケジュールタスクの詳細な説明
序文通常のユーザーはcrontabスケジュールタスクを定義します。たとえば、Oracleユーザーはス...
favico.ico---ウェブサイトicoアイコン設定手順
1. 正常に生成されたアイコン ファイルをダウンロードし、名前を favico.ico に変更して、...
vue-cli 設定では Vuex の完全なプロセスレコードを使用します
目次序文インストールと使用方法モジュラー管理Vuex の状態永続性要約する序文Vue 開発では、ユー...
埋め込みJavaScriptと外部リンクの基本的な応用方法
目次埋め込みJavaScriptと外部リンクの基本的な応用JavaScript の記述方法には、イン...
CSS スティッキー配置位置の詳細な説明: スティッキー問題の落とし穴
前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...
Vue の新しいおもちゃ VueUse の具体的な使い方
目次序文VueUseとは使いやすいおなじみの手ぶれ補正やスロットル機能もありますグローバル状態を共有...
4 つの主要な SQL ランキング関数 ROW_NUMBER、RANK、DENSE_RANK、NTILE の使用方法の紹介
1. ROW_NUMBER()定義: ROW_NUMBER() 関数は、select によってクエリ...
クリエイティブな会社概要ウェブページデザイン
ユニークな「About」ページ自分を他の人たちと差別化する素晴らしい方法は、本当にユニークな自己紹介...
MySQL インデックス障害の上位 10 の問題の概要
目次背景1. クエリ条件に「or」が含まれているため、インデックスが失敗する可能性があります。 2....
Linux ログ内のキーワードとその前後の情報を検索する方法の例
日常業務では、ログを表示する必要がよくあります。たとえば、 tail コマンドを使用してログをリアル...
Linux コマンドを素早く習得する 4 つの方法
Linux マスターになりたいなら、いくつかの Linux コマンドを習得することが不可欠です。 L...
JSにおけるnewの原理と実装について詳しく話しましょう
目次意味コンストラクタ本体は異なる戻り値なし戻りオブジェクト非オブジェクトを返すプロパティバインディ...