利用jquery和原生JS實現簡易的商城網頁


  一、在實現商城的功能中,主要使用的有html5的彈性盒布局,booterstrap,jquery,js,css,sass。

  1.利用booterstrap來實現快速布局,實現購物車的靜態頁面。

      

 

  需要注意的是booterstrap的布局一般都是響應式布局,所以在使用的時候盡量使整個頁面都通過booterstrap來布局,否則會出現縮小頁面的時候,

布局會發生錯亂。在這里由於時間有限,使用了col-xs-3類的CSS效果,在頁面縮小時盡量避免錯亂的樣式。

     2.選購商品存儲使用localstorage

  數據存儲使用mysql會方便很多,但這里我用的是localstorage來存儲主要的賬號密碼,選取的商品詳情,自己寫了個JSON文件來模擬實現數據庫,利用ajax來請求獲取JSON

里面的數據,在渲染到頁面上,點擊購物車的時候,利用COOKIE來存儲商品ID,並通過商品id來獲取商品的固定詳情,在選擇手機型號和顏色的時候一並存儲到localstorage

商品狀態下的value里,由於使用的是localstorage,value里的數據都是字符串形式的,所以在處理數據的同時會比較麻煩。因而在添加數據的時候我預先加了個\符號來分隔每一個商品,再通過數組分割來獲取商品數組,二次分割成二維數組,這樣就能便於將數據選然到頁面上了。這里會遇到一個問題,就是刪除數據的時候,如何處理\,這里是利用正則替換來處理數據,實現刪除功能。

 3.注冊

  注冊界面比較簡單主要就是正則驗證,實時判斷密碼強弱,使用keyup事件。

 

   4.登錄

  登錄主要判斷賬戶存在與否或者密碼正確並給予提示。成功之后會跳轉到首頁。並且將用戶狀態設置為true,也就是已登錄狀態,並將用戶的信息,顯示在頁面左上角,

這里可以做一個用戶個人界面,用來管理個人信息,銀行卡,修改密碼,收貨地址之類的。

 

 

  5.jquery動畫特效和其他特效

  jquery動畫在使用animate寫下拉菜單的時候會產生bug,使用stop方法能解決動畫重復運行等一些動畫問題,然而當鼠標快速觸發事件的時候即使在避免事件冒泡的情況下,

也會產生動畫的輕微閃爍問題。

  購物車放大鏡,在寫放大鏡的時候主要注意的是要獲取滾動條高度來實現放大鏡的上下距離,否則在頁面下拉的時候會出現bug。

  導航欄動畫和輪播圖沒什么bug。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM