一.前言

我們來(lái)看如何用html寫(xiě)一個(gè)注冊(cè)頁(yè)面并使用js加載用戶(hù)輸入響應(yīng)。先上圖，沒(méi)圖都是耍流氓，附上本次案例鏈接Fdog注冊(cè)案例。

1. 基礎(chǔ)布局

首先分析布局，圖中的布局分為左右兩大板塊，右邊的板塊又包括三大板塊：

我們先來(lái)一個(gè)水平布局，并設(shè)置左邊的寬為25%，右邊的寬為75%

<div class='fdogback'></div><div class='fdogtext'></div>

.fdogback { background-color: aqua;float: left;width: 25%;}.fdogtext {background-color: red;float: left;width: 75%;}

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

和上面布局的css類(lèi)似，切記一定要使用百分比的方式來(lái)布局。

2. 自動(dòng)切換圖片

現(xiàn)在基本布局已經(jīng)搞好，我們寫(xiě)來(lái)自動(dòng)切換左邊的圖片，首先得有圖片，這是我準(zhǔn)備好的四張尺寸一樣的圖片。

在左邊的盒子，添加一個(gè)img標(biāo)簽，給他添加一個(gè)id。

<div class='fdogback'><img src='http://www.piao2010.com/bcjs/img/background02.png' /></div>

創(chuàng)建一個(gè)js文件，設(shè)置每5秒改變一次id為backimg中src的值

window.onload = init;var n = 1; //圖片標(biāo)記數(shù)var dingshi; //讓圖片動(dòng)的定時(shí)器function init() {dingshi = window.setInterval('tupian()', 5000);}//更換圖片function tupian() {var obj = document.getElementById('backimg');n++;if (n >= 5) {n = 1;}obj.src = 'http://www.piao2010.com/bcjs/img/background0' + n + '.png';}

在html應(yīng)用js

<script src='http://www.piao2010.com/bcjs/js/backv.js'></script>

當(dāng)值為1000時(shí)效果入下

3. 添加內(nèi)容

第一個(gè)盒子里面添加一個(gè)ul，

<div class='fdogtext_1'><ul id = 'mul'><li style='float: right; list-style: none; margin-right: 30px;'><a href='http://www.piao2010.com/bcjs/14120.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' style='text-decoration: none; color: gray;'>意見(jiàn)反饋</a></li><li style='float: right; list-style: none; margin-right: 30px;'><a rel='external nofollow' style='text-decoration: none; color: gray;'>下載Fdog</a></li><li style='float: right; list-style: none; margin-right: 30px;'><a rel='external nofollow' style='text-decoration: none; color: gray;'>首頁(yè)</a></li> </ul></div>

第二個(gè)盒子添加表單

<div class='fdogtext_2'><div id ='mh1'><span style='font-size: 48px;'>歡迎注冊(cè)Fdog</span></div><div id ='mh2'><span style='font-size: 30px;'>每一天，樂(lè)在溝通。</span></div><form action='FdogMaven' name='form' method='post'><div style='height: 30px; '></div><input tyle='text' name='username' placeholder='昵稱(chēng)' onBlur='checkUserName()' oninput='checkUserName()' value=’<%=request.getParameter('username')==null?'':request.getParameter('username')%>’/><div id='um'><span style='color: white;'></span></div><input type='password' name='password' placeholder='密碼' onBlur='checkPassword()' oninput='checkPassword()' value=’<%=request.getParameter('password')==null?'':request.getParameter('password')%>’/><div id='pw'><span style='color: white;'></span></div><span><select name='comboxphone' id='comboxphone'><option>中國(guó)+86</option><option>中國(guó)香港特別行政區(qū)+852</option><option>中國(guó)澳門(mén)特別行政區(qū)+853</option><option>中國(guó)臺(tái)灣地區(qū)+886</option></select><input type='text' name='phone' placeholder='手機(jī)號(hào)' onBlur='checkPhone()' oninput='checkPhone()' value=’<%=request.getParameter('phone')==null?'':request.getParameter('phone')%>’/></span><div style='height: 50px; width: 490px; margin: 0 auto; text-align: left; color: gray;'><span>可通過(guò)該手機(jī)號(hào)找回密碼&nbsp;</span><span style='color: white;'></span></div><div style=' height: 100px; width:100%;'><input tyle='text' name='verificationcode' placeholder='驗(yàn)證碼' /><input type='button' value='獲取短信驗(yàn)證碼' onclick='codeclick(this)'/><div style='height: 50px; width: 490px; margin: 0 auto; text-align: left; color: gray;'><span style='color: white;'></span></div></div><input type='submit' value='立即注冊(cè)' onclick='this.form.submit();'/><div style='height: 30px;width: 490px; margin: 0 auto; text-align: left; color: gray;'><p><input type='checkbox' checked='checked' />我已閱讀并同意相關(guān)服務(wù)條款和隱私政策 <img src='http://www.piao2010.com/bcjs/img/up.png' onclick='lableclick()'/> </p></div><div style=' height: 100px; width: 480px; text-align: left; margin: 0 auto; display: none;'><a href='http://www.piao2010.com/bcjs/14120.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >《Fdog號(hào)碼規(guī)則》</a><br><a href='http://www.piao2010.com/bcjs/14120.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >《隱私協(xié)議》</a><br><a href='http://www.piao2010.com/bcjs/14120.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' style='text-decoration: none; color: cornflowerblue;'>《Fdog注冊(cè)使用協(xié)議》</a></div></form></div>

第三個(gè)盒子添加版權(quán)信息

<div class='fdogtext_3'>Copyright © 2021.花狗Fdog All rights reserved.<br class='brcopy'><a rel='external nofollow' style='text-decoration: none; color: black; color: gray;'>蒙ICP備2021000567號(hào)</a></div>

最終效果，顏色是為了區(qū)分不同的盒子

4. 自動(dòng)縮放，控件的顯示和隱藏

細(xì)心的你可能看到了開(kāi)頭動(dòng)態(tài)圖，當(dāng)頁(yè)面縮放到一定程度，左側(cè)的圖片將不再顯示，如何做到呢？

就是這個(gè)東西，當(dāng)寬度小于1100px時(shí)，將隱藏左邊的板塊，圖片也因此隱藏。

@media (max-width:1100px) {.fdogback {display: none;}}

如果頁(yè)面一直縮小，直到手機(jī)大小呢?,我們可以使用縮放功能，將頁(yè)面進(jìn)行縮放。

@media (max-width:600px) {body{transform: scale(0.53333);}

效果如圖

5.響應(yīng)用戶(hù)輸入操作

如何根據(jù)用戶(hù)輸入的內(nèi)容給出響應(yīng)的提示，這里也是使用js進(jìn)行判斷的。

例如我們的昵稱(chēng)響應(yīng)，當(dāng)鼠標(biāo)向輸入框輸入內(nèi)容時(shí)，觸發(fā)js中的checkUserName函數(shù)。

//驗(yàn)證用戶(hù)名 function checkUserName() {var username = document.getElementById(’userName’);var errname = document.getElementById(’nameErr’);//var pattern = /^w{3,}$/; //用戶(hù)名格式正則表達(dá)式：用戶(hù)名要至少三位 if (username.value.length == 0) {errname.innerHTML = '用戶(hù)名不能為空'username.style.borderColor = ’red’errname.style.color = ’red’return false;}if (username.value.length <= 1) {errname.innerHTML = '用戶(hù)名不合規(guī)范，至少三位'username.style.borderColor = ’red’errname.style.color = ’red’return false;} else {errname.innerHTML = '該昵稱(chēng)可用'username.style.borderColor = ’lime’errname.style.color = ’green’return true;}}

又或者是倒計(jì)時(shí)

//驗(yàn)證發(fā)送短信驗(yàn)證碼var clock = ’’;var nums = 60;var btn;function codeclick(thisBtn) {var codeErr = document.getElementById(’codeErr’);codeErr.innerHTML = '短信已發(fā)送，請(qǐng)注意查收';codeErr.style.color = ’green’var name = checkUserName();var password = checkPassword();var phone = checkPhone();if (name && password && phone) {btn.disabled = true; //按鈕不可點(diǎn)擊btn.value = nums+’秒后可重新獲取’;clock = setInterval(doLoop,1000); //一秒執(zhí)行一次}}function doLoop(){nums--;if(nums>0){btn.value = nums+’秒后可重新獲取’;}else{clearInterval(clock);//清除js定時(shí)器btn.disabled = false;btn.value = ’獲取短信驗(yàn)證碼’;nums =10;}}

之前，經(jīng)常逛博客，發(fā)現(xiàn)有人博客頁(yè)面有一個(gè)動(dòng)漫人物，并且視角還會(huì)跟著鼠標(biāo)來(lái)動(dòng)，我?guī)湍銈冋业搅耍】磮D

這個(gè)是圖中的那個(gè)動(dòng)漫人物，還可以替換代碼中的jsonPath。

<script>L2Dwidget.init({ 'model': { 'jsonPath':'https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json', 'scale': 1, 'hHeadPos':0.5, 'vHeadPos':0.618 },'display': { 'position': 'right', 'width': 100, 'height': 200, 'hOffset': 420, 'vOffset': 120 }, 'mobile': { 'show': true, 'scale': 0.5 },'react': { 'opacityDefault': 0.7, 'opacityOnHover': 0.2 } });</script>

這個(gè)是背景后面懸浮的線(xiàn)條。

<script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script><script>$(function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e('script'),o=t.length,i=t[o-1];return{l:o,z:n(i,'zIndex',-1),o:n(i,'opacity',.8),c:n(i,'color','0,0,0'),n:n(i,'count',150)}}function o(){a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth, c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function i(){r.clearRect(0,0,a,c);var n,e,t,o,m,l;s.forEach(function(i,x){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e], null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y, l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle='rgba('+d.c+','+(t+.2)+')',r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke())) }), x(i)}var a,c,u,m=document.createElement('canvas'),d=t(),l='c_n'+d.l,r=m.getContext('2d'),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||　 function(n){window.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:'+d.o,e('body')[0].appendChild(m),o(),window.onresize=o,window.onmousemove=function(n){n=n||window.event,y.x=n.clientX,y.y=n.clientY},window.onmouseout=function(){y.x=null,y.y=null};　 for(var s=[],f=0;d.n>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]),setTimeout(function(){i()},100)});</script>

到此這篇關(guān)于用javascript制作qq注冊(cè)動(dòng)態(tài)頁(yè)面的文章就介紹到這了,更多相關(guān)js制作qq動(dòng)態(tài)頁(yè)面內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！