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>この電話番号からパスワードを取得できます </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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Jenkins の Publish Over SSH プラグインを使用してプロジェクトをリモート マシンにデプロイする手順
>>: Linuxはバイナリモードを使用してmysqlをインストールします
序文皆さんはリモート サーバーで開発を行っており、MySQL の使用率はかなり高いはずです。コマンド...
目次1. 鏡を見つける2. RabbitMQイメージをダウンロードする3. RabbitMQコンテナ...
序文クエリ情報が複数のテーブルから取得される場合、クエリのためにこれらのテーブルを結合する必要があり...
方法1: SET PASSWORDコマンドを使用するまずMySQLにログインします。フォーマット: ...
プロジェクトシナリオ: Vueプロジェクトを実行したらインデントエラーが出ました。ideaコンパイラ...
1. ユーザーを作成します。注文: 'password' によって識別される ...
目次分離効果コマンドラインの説明関与する機能分離効果-- 別居前1,2,3,4 -- 別居後1 2 ...
順序なしリストでは、順序なしリストのシンボルは各リストの前に表示されるドットです。順序付きリスト o...
1. 環境整備CentOS Linux リリース 7.5.1804 (コア)インストールフォルダを作...
ウェブサイトの解析を高速化するために、動的ページと静的ページを異なるサーバーで解析して、解析速度を向...
この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...
序文この記事では主に、MySQL のインデックスとビューの使用方法と違いを紹介し、参考と学習のために...
目次1. 連結() 2. 結合() 3. プッシュ() 5. シフト() 6. シフト解除() 7....
まず、私の日常生活についてお話しします。MySQLの急速なアップデートにより、MySQLはバージョン...
序文Element Plus を例に、コンポーネントとスタイルのオンデマンド読み込みを構成します。環...