javascript
小米官网项目制作——javascript知识分享下
目錄
前言
一、觀察頁面內容
二、切換界面
三、登錄表單界面
1.選中的效果
2.錯誤提示
3.不選中的效果
4.密碼框
四、注冊界面
五、鏈接跳轉
總結
前言
? ? ? ?之前我分享了關于小米官網主頁的javascript內容的制作，不知道大家通過上一篇博客有沒有獲得需要的知識。這一次我們接著上一次沒講完的登錄，注冊界面的內容繼續講解。這一塊的內容更多是自己去想的，不一定要參照我的想法，但是可以使用我的思路去制作網頁，相信也會給你很多的幫助，有什么不對的地方也還請指出我的錯誤的地方。
一、觀察頁面內容
首先我們需要跳轉到小米官網的登錄注冊頁面來看看它的內容：登錄界面。我們可以看到這樣的內容：
當我們點擊注冊的時候，會發生切換界面的效果。
我們需要從這里注意這么幾個地方的代碼：
1.登錄下面的條，會根據點擊對象改變位置
2.登錄界面的面板
3.注冊界面的面板
4.條件達成之后會亮起來的按鈕
他們需要怎么去制作效果，讓我們來看看把。
二、切換界面
我們來看看這個切換頁面的具體效果是怎么實現的：
? ? ? ?我們可以看到這個效果實際上，和我們之前學過的輪播圖是一致的。所以我們可以根據輪播圖的效果來推測他需要什么樣的方式和函數實現效果。 當我們點擊注冊的時候，會切換成注冊的盒子，并且內部也切換成對應的形式。這樣做需要準備兩個基本一致的盒子平移的插入進去。不過因為我當時制作效果的時候，沒有用浮動把兩個盒子放在一起，所以只做成了簡單的顯示效果。?
讓我們來看看javascript的代碼實現：
// 移動滑塊item[1].addEventListener('click', function() {reg1.classList.add('offreg');reg2.classList.remove('offreg');a1.classList.add('change');a2.classList.remove('change');animate(select, itemW);});item[0].addEventListener('click', function() {reg1.classList.remove('offreg');reg2.classList.add('offreg');a1.classList.remove('change');a2.classList.add('change');animate(select, 0);});? ? ? ?我這里寫入了一個animate的緩慢動畫的內容，我們可以用他實現移動滑塊的效果。我通過更改高度的屬性方式寫入了這個類名變化，實現了出現和消失的效果。這里需要的是a1和a2兩個屬性。因為實際上這兩個按鈕對應的表單是不一樣的，那么他們傳達的其實是一個鏈接地址。所以包裹文字的是a鏈接標簽，我們需要選中a標簽給他單獨做顏色變化。
實際的效果如下：
三、登錄表單界面
登錄的表單界面我們可以很清晰的看出來這么幾個效果：選中，錯誤提示，不選中。
?讓我們分開看看這幾個效果該怎么去處理：
1.選中的效果
? ? ? ?當我們選中的時候，出現這么幾種效果：背景改變，提示文字移動而且變小，邊框變成了橙色而且有陰影效果。這是我們需要做的屬性，這個過程仍然還是通過我們學習的classlist的方法，通過CSS的樣式添加完成這個過程，只是這個文字出現的時候，有一個時間上的變化，所以我們需要給他加transition的動畫時間，實現這個中間變化的過程。
.Bchange {/* 邊框變化 */box-shadow: 0 0 0 2px rgba(255, 92, 0, 0.2) !important;border-color: #ff5c00 !important; }.trueC {/* 正確信息背景色 */background-color: #fff !important; } .above {/* 文字移動 */top: 6px!important;font-size: 12px!important; }? ? ? ?我們可以看到，這些屬性都是被寫上important的強制屬性的，這樣寫的原因是為了防止CSS代碼中存在的層疊性的性質，因為代碼是從上到下執行的，下面代碼的執行會覆蓋上面的代碼。
2.錯誤提示
? ? ? ?我們可以看到，當內容被輸入的時候，是正常的判定，但是當輸入框內什么內容都沒有的話，就會更改文字顏色為紅色，背景顏色更改，而且還有錯誤的提示信息，文字也會回到原來的位置。為了做出效果，說明我們每次都需要去判斷按鍵的信息。當我們的信息為空的時候，就去生成報錯的信息；當我們信息不為空的時候，我們就顯示我們需要的樣式組合。
我們先來看看，如何生成錯誤信息：
function Error(parent, content) {var div = document.createElement('div');div.classList.add('error')div.innerHTML = content;parent.appendChild(div, parent.children);};? ? ? ?我通過函數的信息，把生成錯誤提示的代碼包裝起來，在我需要用的時候帶入進去。之后帶入我自己需要的數值和對象，我就可以插入這些信息。
接下來我們來看看我們的實際在選中狀態下的代碼吧：
ichange.addEventListener('focus', function() {tchange.classList.add('above');bchange0.classList.add('Bchange');bchange0.classList.add('trueC');ichange.addEventListener('keyup', function() {if (this.value == '') {tchange.classList.add('C_change');bchange0.classList.remove('trueC');bchange0.classList.add('flaseC');flag0 = 0;// 錯誤提示if (num == 0) {Error(user, '請輸入賬號');num = 1;}} else {ichange.innerHTML = this.value;tchange.classList.remove('C_change');bchange0.classList.add('trueC');bchange0.classList.remove('flaseC');flag0 = 1;// 錯誤提示if (num == 1) {var div = user.querySelector('.error');user.removeChild(div);num = 0;}}});});? ? ? ?在這里我們看到，我在錯誤提示的地方還寫了一個num的數值來判斷是否執行，為什么不把代碼放在一起執行呢？因為當我們按下按鈕的時候，這個判斷會不停的進行反應。但是每次我刪除信息之后，錯誤的提示就已經被我用removechild的方式刪除了，那么瀏覽器將會無法找到他需要刪除的對象，那么這個代碼就會報錯，這顯然不是我需要的結果。而且每次按鍵都會不挺的觸發事件，導致插入出一大堆新的錯誤提示，從而無法刪除我需要的錯誤提示。因此我用到了一個我們上次學習的動：節流閥。讓內部信息沒有的時候，num = 0 ，所以我知道這個value值是不存在的，為空，那么我就可以插入信息，這個時候改變num =?1，這個操作因為num變成了1，只會被執行一次；而當num == 1的時候，內部是已經被插入信息的，也就是value不等于空，所以刪除信息的操作就被被執行，而這個時候num重新變成0。這樣的操作，避免了判斷錯誤提示的信息重復使用的問題。
3.不選中的效果
? ? ? ?我們在仔細看看不選中的效果，我們可以看到，不選中的時候，如果不為空了，那么文字信息就固定在上面，而且錯誤顏色將會消失。如果為空了，就會保持錯誤的樣式，文字放下來。這里的效果，根據我們寫錯誤判斷的代碼來更換一下內容，調整一下就能做出來。我們來看看代碼：
Ichange.addEventListener('blur', function() {Tchange.classList.remove('above');phone.classList.remove('Bchange');phone.classList.remove('trueC');if (this.value == '') {Tchange.classList.add('C_change');label.classList.add('C_change');phone.classList.remove('trueC');phone.classList.add('flaseC');// 錯誤提示if (num == 0) {Error(phone0, '請輸入賬號');num = 1;}} else {Tchange.classList.remove('C_change');label.classList.remove('C_change');Tchange.classList.add('above');phone.classList.remove('trueC');phone.classList.remove('flaseC');// 錯誤提示if (num == 1) {var div = phone0.querySelector('.error');phone0.removeChild(div);num = 0;}}});? ? ? ?我們可以看到，實際上沒有太大區別，需要的只是更換一下那些東西是失去焦點的時候的效果。接下來的密碼框也是用一樣的方式去制作就可以了。
4.密碼框
密碼框還有一個效果：
? ? ? ?當我們點擊眼睛的時候有一個顯示密碼，而且眼睛更換樣式的效果。這個效果其實很簡單，在不需要判斷密碼樣式的錯誤情況下，這個樣式只需要我們點擊眼睛的時候，跟換它的圖片，同時改變密碼框的type為文本就能顯示密碼了。我們看看代碼演示吧：
// 顯示和隱藏密碼var eyes = pwd.querySelector('.mi-input-adornment');var eye = eyes.querySelectorAll('svg');var flag = 0;eyes.addEventListener('click', function() {if (flag == 0) {ichange1.type = 'text';eye[0].classList.add('off');eye[1].classList.remove('off');flag++;} else {ichange1.type = 'password';eye[0].classList.remove('off');eye[1].classList.add('off');flag--;}});這里通過flag實現一個開關的作用，實際上也是節流閥的一種。
四、注冊界面
其實注冊界面和我們的登錄界面基本效果一致，這里再說一下里面的細節，大家多多注意就好。我們先來看看效果：
? ? ? ?我們可以看到這里，手機號碼的輸入框，它的國家碼也會跟著變色，這里是需要注意一下的地方。注意改變顏色的時候，這個對象要一起被選中。
? ? ? ?除此之外，我們可以看到當兩個框的內容被填入了內容之后，下面的注冊按鈕才凸現出來。這個效果可以做成達成條件的時候才能被選中，可以使用disabled的這個屬性，讓button這個屬性無法被選中就可以了。不過我沒有寫，這里提一句，大家可以自己去嘗試做。我們來看看他的代碼：
var btn = document.querySelector('.now');document.addEventListener('keyup', function() {if (flag0 + flag1 == 2) {btn.classList.add('nowC');} else {btn.classList.remove('nowC');}});? ? ? ?大家可以看到我們的代碼下面都有一個flag的數值變化，只有內容不為空的時候，flag0和flag1才會變成數值1，才能實現1 + 1 = 2的效果，大家也可以用其他自己的方法來做，比如兩個數值為true的時候，與的結果為true才能執行的方式等等等等。
最后我把這個表單的代碼展示給大家，大家可以自己做改動，寫出自己的風格的代碼：
//手機號var phone = document.querySelector('.phone');var phone0 = document.querySelector('.phone0');var label = phone.querySelector('.mi-floating-label');var phone1 = document.querySelector('.phone1');var tel = phone.querySelector('.tel');var Ichange = tel.querySelector('.I_change');var Tchange = tel.querySelector('.T_change');Ichange.addEventListener('focus', function() {Tchange.classList.add('above');phone.classList.add('Bchange');phone.classList.add('trueC');Ichange.addEventListener('keyup', function() {if (this.value == '') {Tchange.classList.add('C_change');label.classList.add('C_change');phone.classList.remove('trueC');phone.classList.add('flaseC');flag0 = 0;// 錯誤提示if (num == 0) {Error(phone0, '請輸入手機號碼');num = 1;}} else {Ichange.innerHTML = this.value;Tchange.classList.remove('C_change');label.classList.remove('C_change');phone.classList.add('trueC');phone.classList.remove('flaseC');flag0 = 1;// 錯誤提示if (num == 1) {var div = phone0.querySelector('.error');phone0.removeChild(div);num = 0;}}});});Ichange.addEventListener('blur', function() {Tchange.classList.remove('above');phone.classList.remove('Bchange');phone.classList.remove('trueC');if (this.value == '') {Tchange.classList.add('C_change');label.classList.add('C_change');phone.classList.remove('trueC');phone.classList.add('flaseC');// 錯誤提示if (num == 0) {Error(phone0, '請輸入賬號');num = 1;}} else {Tchange.classList.remove('C_change');label.classList.remove('C_change');Tchange.classList.add('above');phone.classList.remove('trueC');phone.classList.remove('flaseC');// 錯誤提示if (num == 1) {var div = phone0.querySelector('.error');phone0.removeChild(div);num = 0;}}});? ? ? ?我們可以看到代碼基本是一致的，只需要注意其他數值上的變化就可以了，比如之前提到的另外一個標簽也要被選擇的情況。
五、鏈接跳轉
? ? ? ?當我們點擊登錄的鏈接頁面的時候，打開的是登錄界面，點擊注冊的鏈接頁面的時候，打開的是注冊界面。這個要怎么做呢？我們需要用到location的方法來制作。這里我附上代碼來解釋一下：
// 鏈接跳轉var login = document.querySelector(".login");var register = document.querySelector(".login0");console.log(login, register);login.addEventListener("click", function() {window.location.href = 'login.html' + '?' + 1;});register.addEventListener("click", function() {window.location.href = 'login.html' + '?' + 2;})? ? ? ?首先我們要獲取到我們的a標簽，給他的href添加javascript:;來實現阻止a便簽跳轉的能力，之后我們來手動啟動這兩個鏈接跳轉，我們讓他均會跳轉到login.html頁面上，但是加上兩個我們自己添加的參數。
var temp = window.location.search.substr(1); function Temp() {if (temp === '1') {item[0].click();}if (temp === '2') {reg1.classList.add('offreg');reg2.classList.remove('offreg');a1.classList.add('change');a2.classList.remove('change');select.style.left = "68px";}}? ? ? ?之后我們來判斷：當我們點擊的是登錄的時候，就不做反應或者點擊登錄的按鈕。如果是注冊按鈕，則改變為注冊的界面。 這樣就完成了這個操作。
? ? ? ?這里需要注意的是，需要用location.search獲取的是等號后面的所有內容，可以先log看看search都獲取到了什么，然后找到我們要獲取的位置去判斷。
總結
? ? ? ?最后廢話幾句，js代碼在從其他文件傳入網頁的時候，要注意代碼需要使用window.onload或者其他的形式去導入html中。這是因為html執行是從上到下的，理論上js代碼寫到下面才對，但是這樣會非常麻煩，因為通常我們的html代碼都非常長，所以可以使用onload或著DOMContentLoaded的方法來去書寫。剩下的就是觀察代碼中的規律，經可能的簡潔化內容，以外這樣有利于網頁的加載，感謝大家的收看。
總結
以上是生活随笔為你收集整理的小米官网项目制作——javascript知识分享下的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PowerEdge R430 机架式服务
- 下一篇： vue播放amr格式音频