JavaScript を使用して動的な QQ 登録ページを作成する

JavaScript を使用して動的な QQ 登録ページを作成する

1. はじめに

HTML で登録ページを作成し、JS を使用してユーザー入力応答を読み込む方法を見てみましょう。まずは写真を載せておきます。写真を載せないのはもったいないですからね。こちらがFdog登録事例へのリンクです。

ここに画像の説明を挿入


1. 基本レイアウト

まず、レイアウトを分析してみましょう。図のレイアウトは、左側のセクションと右側のセクションの 2 つの主要なセクションに分かれており、右側のセクションには 3 つの主要なセクションが含まれています。

ここに画像の説明を挿入

まず水平レイアウトから始め、左の幅を 25%、右の幅を 75% に設定してみましょう。

ここに画像の説明を挿入

<div class="fdogback"></div>
<div class="fdogtext"></div>
.fdogback {
	 背景色: 水色;
	フロート: 左;
	幅: 25%;
}

.fdogtext {
	背景色: 赤;
	フロート: 左;
	幅: 75%;
} 


ここに画像の説明を挿入

<div class="fdogtext">
<div class="fdogtext_1"></div>
<div class="fdogtext_2"></div>
<div class="fdogtext_3"></div>
</div>

上記の CSS レイアウトと同様に、レイアウトには必ずパーセンテージを使用してください。


2. 写真を自動的に切り替える

基本的なレイアウトができたので、左側の写真を自動的に切り替えるプログラムを作成しましょう。まず、写真が必要です。ここに、同じサイズの写真を 4 つ用意しました。
ここに画像の説明を挿入

左のボックスに、img タグを追加し、ID を指定します。

<div class="fdogback">
	<img src="img/background02.png" id="backimg" style="height: 100%;" />
</div>

jsファイルを作成し、5秒ごとにidでbackimgのsrcの値を変更するように設定します。

ウィンドウを初期化します。
var n = 1; //画像マーカーの数 var dingshi; //画像を移動させるタイマー function init() {
	dingshi = window.setInterval("tupian()", 5000);
}
//画像を変更する関数tupian() {
	var obj = document.getElementById("backimg");
	n++;
	(n >= 5)の場合{
		1;
	}
	obj.src = "img/background0" + n + ".png";
}

HTMLにjsを適用する

<script src="js/backv.js"></script>

値が1000の場合、効果は次のようになります

ここに画像の説明を挿入


3. コンテンツを追加する

最初のボックス内に ul を追加します。

<div class="fdogtext_1">
	<ul id = "mul">
		<li style="float: right; list-style: none; margin-right: 30px;"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="text-decoration: none; color: gray;">フィードバック</a></li>
		<li style="float: right; list-style: none; margin-right: 30px;"><a href="http://127.0.0.1:8848/newfdog/download.html" rel="external nofollow" style="text-decoration: none; color: gray;">Fdog をダウンロード</a></li>
		<li style="float: right; list-style: none; margin-right: 30px;"><a href="http://127.0.0.1:8848/newfdog/index.html" rel="external nofollow" style="text-decoration: none; color: gray;">ホーム</a></li>
    </ul>
</div>

2番目のボックスはフォームを追加します

<div class="fdogtext_2">
	<div id="mh1">
	<span style="font-size: 48px;">Fdog への登録を歓迎します</span>
	</div>
	<div id="mh2">
	<span style="font-size: 30px;">毎日コミュニケーションを楽しみましょう。 </span>
	</div>
	<フォームアクション="FdogMaven" 名前="フォーム" メソッド="投稿">
	<div style="height: 30px; "></div>
	<input tyle="text" id="userName" name="username" placeholder="nickname" onBlur="checkUserName()" oninput="checkUserName()" 
	値='<%=request.getParameter("username")==null?"":request.getParameter("username")%>'/>
	<div id="um">
	<span class="default" id="nameErr" style="color: white;"></span>
	</div>
	<input type="password" id="userPasword" name="password" placeholder="password" onBlur="checkPassword()" oninput="checkPassword()" 
	値='<%=request.getParameter("password")==null?"":request.getParameter("password")%>'/>
	<div id="pw">
	<span class="default" id="passwordErr" style="color: white;"></span>
	</div>
	<span>
	<select name="comboxphone" id="comboxphone">
		<option>中国+86</option>
		<option>中国香港特別行政区 +852</option>
		<option>中国マカオ特別行政区 +853</option>
		<option>台湾、中国 +886</option>
	</選択>
	<input type="text" id="userPhone" name="phone" placeholder="電話番号" onBlur="checkPhone()" oninput="checkPhone()" 
	値='<%=request.getParameter("phone")==null?"":request.getParameter("phone")%>'/>
	</span>
	<div style="height: 50px; width: 490px; margin: 0 auto; text-align: left; color: gray;">
	<span>この電話番号からパスワードを取得できます&nbsp;</span>
	<span class="default" id="phoneErr" style="color: white;"></span>
	</div>
	<div id="codediv" スタイル="高さ: 100px; 幅: 100%;">
	<input tyle="text" id="code" name="verificationcode" placeholder="検証コード" />
	<input type="button" id="codebutton" value="SMS認証コードを取得" onclick="codeclick(this)"/>
	<div style="height: 50px; width: 490px; margin: 0 auto; text-align: left; color: gray;">
	<span class="default" id="codeErr" style="color: white;"></span>
	</div>
	</div>
	<input type="submit" id="up" class="register" value="今すぐ登録" onclick="this.form.submit();"/>
	<div style="height: 30px;width: 490px; margin: 0 auto; text-align: left; color: gray;">
	<p><input type="checkbox" チェック済み="チェック済み" />
	関連する利用規約とプライバシーポリシーを読み、同意します <img id="imgupdown" style="height: 16px;" src="img/up.png" onclick="lableclick()"/> 
	</p>
	</div>
	<div id="clause" style="height: 100px; width: 480px; text-align: left; margin: 0 auto; display: none;">
	<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="text-decoration: none; color: cornflowerblue;" >《Fdog Number Rules》</a><br>
	<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="text-decoration: none; color: cornflowerblue;" > プライバシー契約</a><br>
	<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="text-decoration: none; color: cornflowerblue;">Fdog 登録および使用契約</a>
</div>
	</フォーム>
</div>

3番目のボックスには著作権情報が追加されます

<div class="fdogtext_3">
	Copyright © 2021.Fdog 無断転載を禁じます。
	<br class="brcopy">
	<a href="https://beian.miit.gov.cn/" rel="external nofollow" style="text-decoration: none; color: black; color: gray;">MengICP No. 2021000567</a>
</div>

最終的な効果は、色が異なるボックスを区別することです

ここに画像の説明を挿入

4. コントロールの自動スケーリング、表示、非表示

注意深い人は、冒頭のダイナミックな画像に気づいたかもしれません。ページをある程度拡大すると、左側の画像が表示されなくなります。これはどうすればいいのでしょうか?

これです。幅が1100px未満の場合は、左のパネルが非表示になり、画像も非表示になります。

@media (最大幅:1100px) {
	.fdogback {
		表示: なし;
	}
}

ページを携帯電話のサイズに縮小するとどうなるでしょうか? ズーム機能を使用してページを拡大縮小できます。

@media (最大幅:600px) {
体{
	変換: スケール(0.53333);
}

効果はご覧の通りです


ここに画像の説明を挿入

5. ユーザー入力に応答する

ここに画像の説明を挿入

ユーザーの入力に基づいて応答プロンプトを表示する方法も、js によって決定されます。

たとえば、ニックネームの応答では、マウスが入力ボックスにコンテンツを入力すると、js の checkUserName 関数がトリガーされます。

//ユーザー名を確認する function checkUserName() {
	var ユーザー名 = document.getElementById('userName');
	var errname = document.getElementById('nameErr');
	//var pattern = /^\w{3,}$/; //ユーザー名形式の正規表現: ユーザー名は少なくとも3文字である必要があります if (username.value.length == 0) {
		errname.innerHTML = "ユーザー名は空にできません"
		username.style.borderColor = '赤'
		errname.style.color = '赤'
		false を返します。
	}
	ユーザー名.値.長さ <= 1 の場合 {
		errname.innerHTML = "ユーザー名が標準を満たしていません。少なくとも 3 桁です"
		username.style.borderColor = '赤'
		errname.style.color = '赤'
		false を返します。
	} それ以外 {
		errname.innerHTML = "このニックネームは利用可能です"
		username.style.borderColor = 'ライム'
		errname.style.color = '緑'
		true を返します。
	}
}

それともカウントダウンでしょうか?

//SMS認証コードを検証します var clock = '';
var 数値 = 60;
var ボタン;
関数コードクリック(thisBtn) {
	var codeErr = document.getElementById('codeErr');
	codeErr.innerHTML = "メッセージは送信されました。確認してください";
	codeErr.style.color = '緑'
	var name = checkUserName();
	var パスワード = checkPassword();
	var 電話番号 = checkPhone();
	if (名前 && パスワード && 電話) {
		btn.disabled = true; //ボタンはクリックできません btn.value = nums+'秒後に取得できます';
		clock = setInterval(doLoop,1000); // 1秒に1回実行 }
}
関数doLoop()
{
	数字--;
	if(数値>0){
		btn.value = nums+'秒後に取得できます';
	}それ以外{
		clearInterval(clock); //js タイマーをクリア btn.disabled = false;
		btn.value = 'SMS認証コードを取得する';
		数値 = 10;
	}
}

以前、よくブログを閲覧していたら、誰かのブログのページにアニメのキャラクターがいて、マウスの動きに合わせて視点が動くものがありました。あなたのために見つけました!画像を表示

ここに画像の説明を挿入

これは画像のアニメキャラクターです。コード内のjsonPathを置き換えることもできます。

<スクリプト>
	L2Dwidget.init({ 
		"モデル": { "jsonPath":"https://unpkg.com/[email protected]/assets/shizuku.model.json", "スケール": 1, "hHeadPos":0.5, "vHeadPos":0.618 },
		"表示": { "位置": "右", "幅": 100, "高さ": 200, "hOffset": 420, "vOffset": 120 }, 
		"モバイル": { "表示": true, "スケール": 0.5 },
		"反応": { "不透明度デフォルト": 0.7、 "不透明度オンホバー": 0.2 } 
	});
</スクリプト>

背景の後ろに浮かぶ線です。

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<スクリプト>
	$(関数(){
		関数n(n,e,t){
			n.getAttribute(e)||t を返す
		}
		関数e(n){
			document.getElementsByTagName(n) を返します。
		}
		関数t(){
			var t=e("script"),o=t.length,i=t[o-1];
			戻り値:{l:o,z:n(i,"zIndex",-1),o:n(i,"不透明度",.8),c:n(i,"色","0,0,0"),n:n(i,"カウント",150)}
		}
		関数o(){
			a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth、
		    c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
		}
		関数i(){
			r.clearRect(0,0,a,c);
			var n、e、t、o、m、l;
			s.forEach(関数(i,x){
			(i.x+=i.xa,i.y+=i.ya,i.xa*=ix>a||ix<0?-1:1,i.ya*=iy>c||iy<0?-1:1,r.fillRect(ix-.5,iy-.5,1,1),e=x+1;e<u.length;e++)n=u[e]、
					   null!==nx&&null!==ny&&(o=ix-nx,m=iy-ny,
					   l=o*o+m*m、l<n.max&&(n===y&&l>=n.max/2&&(ix-=.03*o、iy-=.03*m)、
						t=(n.max-l)/n.max、r.beginPath()、r.lineWidth=t/2、r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(ix,iy),r.lineTo(nx,ny),r.stroke()))
				  })、
				  x(i)
		    }
		  var a,c,u,m=document.createElement("canvas"),d=t(),l="c_n"+dl,r=m.getContext("2d"),
		  x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
		 関数(n){
		      ウィンドウ.setTimeout(n,1e3/45)
		    },
		    w=Math.random、y={x:null、y:null、max:2e4};m.id=l、m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+do、e("body")[0].appendChild(m)、o()、window.onresize=o、
		    window.onmousemove=関数(n){
		      n=n||window.event、yx=n.clientX、yy=n.clientY
		    },
		    window.onmouseout=関数(){
		      yx=null、yy=null
		    };
			 for(var s=[],f=0;dn>f;f++){
				  var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
			   }
			  u=s.concat([y])、
			  タイムアウトを設定します(関数(){i()},100)
			});
</スクリプト>

これで、JavaScript を使用して動的な QQ 登録ページを作成する方法に関するこの記事は終了です。動的な QQ ページの作成に関するより関連性の高い js コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • シンプルなユーザーログインおよび登録ページを実装するための jsp+dao+bean+servlet (MVC モード)
  • JSP を使用してシンプルなユーザー ログインおよび登録ページを実装するサンプル コード分析
  • JSは認証コードのカウントダウン付きの登録ページを実装します
  • JS 簡単な登録ページの例
  • 登録ページのフォーム検証を完了する JavaScript の例
  • Node.jsはログインと登録ページを実装します
  • ネイティブ js 検証の簡単な登録ログイン ページ
  • js 正規表現登録ページフォーム検証
  • js 現在のページのログイン登録ボックス、固定 div、下部シャドウのサンプル コード
  • JS 現在のページのログイン登録ボックス、固定 DIV、下部シャドウのサンプル コード
  • 登録ページなどの情報を表示したり非表示にしたりするためのJavaScript
  • PHP ユーザー登録ページでは、フォーム検証を実行するために js を使用します。具体的な例
  • 登録ページを実装するためのJS、CSS、HTML

<<:  Jenkins の Publish Over SSH プラグインを使用してプロジェクトをリモート マシンにデプロイする手順

>>:  Linuxはバイナリモードを使用してmysqlをインストールします

推薦する

Navicat の MySQL へのリモート接続の実装手順の分析

序文皆さんはリモート サーバーで開発を行っており、MySQL の使用率はかなり高いはずです。コマンド...

DockerにRabbitMQをインストールする詳細な手順

目次1. 鏡を見つける2. RabbitMQイメージをダウンロードする3. RabbitMQコンテナ...

どのような種類の MYSQL 接続クエリを知っていますか?

序文クエリ情報が複数のテーブルから取得される場合、クエリのためにこれらのテーブルを結合する必要があり...

Navicat で MySQL データベースのパスワードを変更する複数の方法

方法1: SET PASSWORDコマンドを使用するまずMySQLにログインします。フォーマット: ...

アイデアコンパイラvueインデントエラー問題シナリオの分析

プロジェクトシナリオ: Vueプロジェクトを実行したらインデントエラーが出ました。ideaコンパイラ...

mysql5.7 ユーザー権限の作成、ユーザーの削除、権限の取り消し

1. ユーザーを作成します。注文: 'password' によって識別される ...

mysqlはコンマに基づいてデータ行を複数の行に分割します

目次分離効果コマンドラインの説明関与する機能分離効果-- 別居前1,2,3,4 -- 別居後1 2 ...

CSS で順序付きリスト項目と順序なしリスト項目のスタイルを設定する方法

順序なしリストでは、順序なしリストのシンボルは各リストの前に表示されるドットです。順序付きリスト o...

Tencent Cloud 上で Hadoop 3.x 疑似クラスターを構築する方法を説明します

1. 環境整備CentOS Linux リリース 7.5.1804 (コア)インストールフォルダを作...

Nginx は動的と静的の分離を実装します 例の説明

ウェブサイトの解析を高速化するために、動的ページと静的ページを異なるサーバーで解析して、解析速度を向...

Vueの自己ネストツリーコンポーネントの使い方の詳細な説明

この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...

MySQL のインデックスとビューの使用方法と違いの詳細な説明

序文この記事では主に、MySQL のインデックスとビューの使用方法と違いを紹介し、参考と学習のために...

JavaScript における一般的な配列操作

目次1. 連結() 2. 結合() 3. プッシュ() 5. シフト() 6. シフト解除() 7....

mysql8.0.11 winx64 手動インストールと設定チュートリアル

まず、私の日常生活についてお話しします。MySQLの急速なアップデートにより、MySQLはバージョン...

Vue3 でサードパーティのコンポーネントライブラリをオンデマンドでロードする方法

序文Element Plus を例に、コンポーネントとスタイルのオンデマンド読み込みを構成します。環...