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 を応援していただければ幸いです。

以下もご興味があるかもしれません: