用javascript制作qq注冊動態(tài)頁面
更新時間：2021年04月12日 17:42:58 作者：花狗Fdog
這篇文章主要介紹了用javascript制作qq注冊動態(tài)頁面,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友可以參考下
一.前言
我們來看如何用html寫一個注冊頁面并使用js加載用戶輸入響應。先上圖，沒圖都是耍流氓，附上本次案例鏈接Fdog注冊案例。
1. 基礎布局
首先分析布局，圖中的布局分為左右兩大板塊，右邊的板塊又包括三大板塊：
我們先來一個水平布局，并設置左邊的寬為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類似，切記一定要使用百分比的方式來布局。
2. 自動切換圖片
現(xiàn)在基本布局已經(jīng)搞好，我們寫來自動切換左邊的圖片，首先得有圖片，這是我準備好的四張尺寸一樣的圖片。
在左邊的盒子，添加一個img標簽，給他添加一個id。
<div class="fdogback"> <img src="img/background02.png" id="backimg" style="height: 100%;" /> </div>
創(chuàng)建一個js文件，設置每5秒改變一次id為backimg中src的值
window.onload = init;
var n = 1; //圖片標記數(shù)
var dingshi; //讓圖片動的定時器
function init() {
dingshi = window.setInterval("tupian()", 5000);
}
//更換圖片
function tupian() {
var obj = document.getElementById("backimg");
n++;
if (n >= 5) {
n = 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 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" id="userName" name="username" placeholder="昵稱" onBlur="checkUserName()" oninput="checkUserName()"
value='<%=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="密碼" onBlur="checkPassword()" oninput="checkPassword()"
value='<%=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>中國香港特別行政區(qū)+852</option>
<option>中國澳門特別行政區(qū)+853</option>
<option>中國臺灣地區(qū)+886</option>
</select>
<input type="text" id="userPhone" 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>可通過該手機號找回密碼 </span>
<span class="default" id="phoneErr" style="color: white;"></span>
</div>
<div id="codediv" style=" height: 100px; width:100%;">
<input tyle="text" id="code" name="verificationcode" placeholder="驗證碼" />
<input type="button" id="codebutton" value="獲取短信驗證碼" 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" checked="checked" />
我已閱讀并同意相關服務條款和隱私政策
<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號碼規(guī)則》</a><br>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="text-decoration: none; color: cornflowerblue;" >《隱私協(xié)議》</a><br>
<a href="#" 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ū)分不同的盒子
4. 自動縮放，控件的顯示和隱藏
細心的你可能看到了開頭動態(tài)圖，當頁面縮放到一定程度，左側的圖片將不再顯示，如何做到呢？
就是這個東西，當寬度小于1100px時，將隱藏左邊的板塊，圖片也因此隱藏。
@media (max-width:1100px) {
.fdogback {
display: none;
}
}
如果頁面一直縮小，直到手機大小呢?,我們可以使用縮放功能，將頁面進行縮放。
@media (max-width:600px) {
body{
transform: scale(0.53333);
}
效果如圖
5.響應用戶輸入操作
如何根據(jù)用戶輸入的內容給出響應的提示，這里也是使用js進行判斷的。
例如我們的昵稱響應，當鼠標向輸入框輸入內容時，觸發(fā)js中的checkUserName函數(shù)。
//驗證用戶名
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;
}
}
之前，經(jīng)常逛博客，發(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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- jsp+dao+bean+servlet(MVC模式)實現(xiàn)簡單用戶登錄和注冊頁面
- 使用JSP實現(xiàn)簡單的用戶登錄注冊頁面示例代碼解析
- JS實現(xiàn)驗證碼倒計時的注冊頁面
- JS一個簡單的注冊頁面實例
- JavaScript 完成注冊頁面表單校驗的實例
- node.js實現(xiàn)登錄注冊頁面
- 原生js驗證簡潔注冊登錄頁面
- js正則表達式注冊頁面表單驗證
- js當前頁面登錄注冊框,固定div,底層陰影的實例代碼
- JS當前頁面登錄注冊框,固定DIV,底層陰影的實例代碼
- javascript實現(xiàn)信息的顯示和隱藏如注冊頁面
- php用戶注冊頁面利用js進行表單驗證具體實例
- JS、CSS和HTML實現(xiàn)注冊頁面
相關文章
這篇文章主要給大家分享JS創(chuàng)建對象的四種方式，分別是字面量的方式去創(chuàng)建對象、使用new字符創(chuàng)建對象、自定義構造函數(shù)、工廠模式創(chuàng)建對象，更多詳細內容，請參考下面文章的具體內容2021-11-11
這篇文章主要向大家介紹的是在面試JS過程中，面試官常常問的幾種類型，算法題、涉及js原理的題以及ajax請求等等，剛興趣的小伙伴請參考下面文章的具體內容2021-09-09
這篇文章主要介紹了9個JavaScript日常開發(fā)小技巧，,需要的朋友可以參考下2020-10-10
這篇文章主要介紹了學習筆記vue的第一個程序，其中非常詳細的為大家講解了vue程序的創(chuàng)建步驟，有需要的朋友可以學習下，希望可以有所幫助2021-08-08
這篇文章主要為大家介紹了js前端設計模式優(yōu)化50%表單校驗代碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了微信小程序 登錄實例詳解的相關資料,需要的朋友可以參考下2017-01-01
小程序開發(fā)踩坑：頁面窗口定位（相對于瀏覽器定位）（推薦）
這篇文章主要介紹了小程序開發(fā)頁面窗口定位，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了微信小程序 PHP后端form表單提交實例詳解的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了避免地獄async?await的使用場景及原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Javascript 小技巧全集...2006-06-06