我們來看如何用html寫一個注冊頁面并使用js加載用戶輸入響應。先上圖，沒圖都是耍流氓，附上本次案例鏈接Fdog注冊案例。

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

我們先來一個水平布局，并設置左邊的寬為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類似，切記一定要使用百分比的方式來布局。

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

在左邊的盒子，添加一個img標簽，給他添加一個id。

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

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

window.onload = init;var n = 1; //圖片標記數var dingshi; //讓圖片動的定時器function init() {dingshi = window.setInterval('tupian()', 5000);}//更換圖片function tupian() {var obj = document.getElementById('backimg');n++;if (n >= 5) {n = 1;}obj.src = 'http://www.hdgsjgj.cn/bcjs/img/background0' + n + '.png';}

在html應用js

<script src='http://www.hdgsjgj.cn/bcjs/js/backv.js'></script>

當值為1000時效果入下

第一個盒子里面添加一個ul，

<div class='fdogtext_1'><ul id = 'mul'><li style='float: right; list-style: none; margin-right: 30px;'><a href='http://www.hdgsjgj.cn/bcjs/14120.html#' 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 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;'>首頁</a></li> </ul></div>

第二個盒子添加表單

<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><form action='FdogMaven' name='form' method='post'><div style='height: 30px; '></div><input tyle='text' name='username' placeholder='昵稱' 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>中國+86</option><option>中國香港特別行政區(qū)+852</option><option>中國澳門特別行政區(qū)+853</option><option>中國臺灣地區(qū)+886</option></select><input type='text' name='phone' placeholder='手機號' 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>可通過該手機號找回密碼&nbsp;</span><span style='color: white;'></span></div><div style=' height: 100px; width:100%;'><input tyle='text' name='verificationcode' placeholder='驗證碼' /><input type='button' value='獲取短信驗證碼' 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='立即注冊' onclick='this.form.submit();'/><div style='height: 30px;width: 490px; margin: 0 auto; text-align: left; color: gray;'><p><input type='checkbox' checked='checked' />我已閱讀并同意相關服務條款和隱私政策 <img src='http://www.hdgsjgj.cn/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.hdgsjgj.cn/bcjs/14120.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >《Fdog號碼規(guī)則》</a><br><a href='http://www.hdgsjgj.cn/bcjs/14120.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >《隱私協(xié)議》</a><br><a href='http://www.hdgsjgj.cn/bcjs/14120.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' style='text-decoration: none; color: cornflowerblue;'>《Fdog注冊使用協(xié)議》</a></div></form></div>

第三個盒子添加版權信息

<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號</a></div>

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

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

就是這個東西，當寬度小于1100px時，將隱藏左邊的板塊，圖片也因此隱藏。

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

如果頁面一直縮小，直到手機大小呢?,我們可以使用縮放功能，將頁面進行縮放。

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

效果如圖

如何根據用戶輸入的內容給出響應的提示，這里也是使用js進行判斷的。

例如我們的昵稱響應，當鼠標向輸入框輸入內容時，觸發(fā)js中的checkUserName函數。

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

又或者是倒計時

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

之前，經常逛博客，發(fā)現(xiàn)有人博客頁面有一個動漫人物，并且視角還會跟著鼠標來動，我?guī)湍銈冋业搅?！看圖

這個是圖中的那個動漫人物，還可以替換代碼中的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>

這個是背景后面懸浮的線條。

<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>

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