當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

H5商城，纯前端静态页面

發布時間：2023/12/9 HTML 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 H5商城，纯前端静态页面小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

發布時間：2018-09-28 技術：jquery1.10.1+swipeSlide+jquery.mmenu+jquery.touchSwipe+cityinit

概述

純手寫H5商城，2年前給一個朋友做的，高仿必要商城。頁面包含個人，商家，商品分類，詳情，訂單，登錄注冊，添加收貨地址，提現等34個頁面

詳細

代碼下載：http://www.demodashi.com/demo/14152.html

一、前言

這是一個H5商城，以必要APP為原型，高仿的一套純靜態HTML頁面。2年前給一個朋友做的，因為純手寫和部分引用jquery插件，js和css代碼清晰簡潔，僅這一套前端頁面的價格是7000元，頁面包含個人，商家，商品分類，詳情，訂單，登錄注冊，添加收貨地址，提現等34個頁面，后來已經改版，目前只是把第一版拿出來分享

做后端的小伙伴總是在抱怨前端較弱，接口寫的再好，沒有一個漂亮的前端，怎么能更好的展示自己的作品呢，想要去研究前端，從網上下載的前端模板代碼復雜，想要修改個動態效果更是捉襟見肘，我也有經歷過這種痛苦，苦于沒有前端經驗，又沒有可以合伙一起做項目的前端，很多時候，都是自己在說服自己放棄一些提升自己的機會，現在好了，我分享的這套模板，基本上可以滿足大家H5商城前端的需求，而且代碼簡介清晰，為自己動態綁定數據提供了很大的便利性

首先幾張來張效果圖：

本案例主要用到了的js如下圖

二、代碼分析

下面拋出部分頁面代碼，全部樣式使用外鏈的形式，頁面簡介，容易理解

購物車頁面：使用原生js觸發添加，刪除等操作，icon使用字體形式，減少頁面的占用體積

<!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <link href="css/sweetalert.css" rel="stylesheet"> <link href="css/application.css" rel="stylesheet"> <title>購物車</title> </head> <body> <header> <div> <h1>購物車</h1> <a href="index.html"> <span></span> </a> </div> </header><div> <div class="medialist-header clearfix"> <div class="icheck pull-left"><input type="checkbox" name="checkall" class="iradio checkall" id="checkall"></div>  <label for="checkall">全選</label> <a οnclick="emptycart()">清空</a> </div> <div><div><input type="checkbox" name="iCheck"></div><a class="productimg thumbnail"><img src="http://www.placehold.it/128x128/EFEFEF/AAAAAA" width="128" ></a><div> <h4><span>產品名稱名稱產品</span></h4> <div> <input type="number" value="0"/> </div> <p><span data-value="200">￥200</span></p></div> <div> <a><i></i></a> </div></div> <div><div><input type="checkbox" name="iCheck"></div><a class="productimg thumbnail"><img src="http://www.placehold.it/128x128/EFEFEF/AAAAAA" width="128" ></a><div> <h4><span>產品名稱名稱產品</span></h4> <div> <input type="number" value="0"/> </div> <p><span data-value="200">￥200</span></p></div> <div> <a><i></i></a> </div></div></div><footer> <div></div> <div class="row footbar"> <div class="col-12 billing"> <div class="icheck pull-left"><input type="checkbox" name="checkall" class="iradio checkall" id="checkall2"></div>  <label for="checkall2">全選</label>   <label>合計：<span class="prices total"> </span></label> <a class="pull-right btn" href="order.html">結算</a> </div> <a class="col-4 text-center" href="index.html" ><span></span>首頁</a> <a class="col-4 text-center active" href="cart.html" ><span></span>購物車</a> <a class="col-4 text-center" href="profile.html" ><span></span>我的必要</a> </div> </footer><script src="js/jquery.js" type="text/javascript"></script> <script src="js/swipeSlide.min.js" type="text/javascript"></script> <script src="js/sweetalert.min.js" type="text/javascript"></script> <script src="js/jquery.mmenu.min.js" type="text/javascript"></script> <script src="js/icheck.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script> <script src="js/application.js" type="text/javascript"></script> <script> var price = function(){ var sp = 0; $(".media").each(function(){ var obj = $(this); var state = obj.find(":checkbox")[0].checked; if(state) { sp = sp + parseInt(obj.find(".spinners").val())*parseInt(obj.find(".prices").attr("data-value")) } }) $(".total").html("￥"+sp) }//空的購物車 var emptycart = function(){ $(".billing").remove(); $(".medialist").html("<section><div class='text-center purple' style='font-size:5rem'><span></span></div><p >購物車為空</p></section>") }$(function(){ $('input:checkbox').iCheck({ checkboxClass: 'iradio_square-purple',increaseArea: '50%' // optional});$('.spinners').spinner({max:5});//全選 $("#checkall2,#checkall").on('ifChanged',function(event){ $(":checkbox").iCheck(event.target.checked?"check":"uncheck"); });//計價觸發 $(":checkbox").on('ifToggled',function(event){ price(); }); $("button.increase,button.decrease").on("click",function(){ price(); })$(".btn-del").on('click',function(){ if($(".media").length==1) { emptycart(); }else{ $(this).closest(".media").remove(); price(); }//購物車移除操作 // // // // })})</script> </body> </html> <!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <link href="css/sweetalert.css" rel="stylesheet"> <link href="css/application.css" rel="stylesheet"> <title>個人中心</title> </head> <body> <header> <div> <h1>個人中心</h1> <a href="profile-business.html"> 商家模式 </a> </div> </header> <section> <div> <img src="http://fakeimg.pl/120x120/ccc/fff/?text=LOGO"> </div> <p>我的用戶名</p> <div class="row rmenu-3"> <div ><a href="my-order-pay.html"><span></span>待付款</a></div> <div ><a href="my-order-delivery.html"><span></span>待收貨</a></div> <div ><a href="my-order-empty.html"><span></span>退款/售后</a></div> </div> </section><section class="wrapper cart"> <div> <p>  </p> <div> <a href="my-order.html"><i ></i>我的訂單</a> </div> <div> <a href="address.html"><i ></i>我的地址 </a> </div> <p>  </p> <div> <a href="customerservice.html"><i ></i>客服中心 </a> </div> <div> <a href="password.html"><i ></i>修改密碼 </a> </div> </div> </section><footer> <div></div> <div class="row footbar"> <a class="col-4 text-center" href="index.html" ><span></span>首頁</a> <a class="col-4 text-center" href="cart.html" ><span></span>購物車</a> <a class="col-4 text-center active" href="profile.html" ><span></span>我的必要</a> </div> </footer><script src="js/jquery.js" type="text/javascript"></script> <script src="js/swipeSlide.min.js" type="text/javascript"></script> <script src="js/sweetalert.min.js" type="text/javascript"></script> <script src="js/jquery.mmenu.min.js" type="text/javascript"></script> <script src="js/icheck.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script> <script src="js/application.js" type="text/javascript"></script> </body> </html>

小結

HTML看似簡單，但是想要寫出一套代碼漂亮的前端，還是需要有一定功底的

三、文件截圖以及運行操作

1、文件截圖

2、運行操作：

雙擊index.html即可看到效果。

四、瀏覽器兼容性

目前兼容微信瀏覽器，Chrome，firefox，360瀏覽器等主流瀏覽器

五、其他補充

此程序是靜態頁面，頁面上的數據都是寫死的，僅用作前端展示使用，動態數據需要自己單獨對接

代碼下載：http://www.demodashi.com/demo/14152.html

注：本文著作權歸作者，由demo大師發表，拒絕轉載，轉載需要作者授權

轉載于:https://www.cnblogs.com/demodashi/p/10486870.html

總結

以上是生活随笔為你收集整理的H5商城，纯前端静态页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： js 技巧杂引(转)
下一篇： [正则表达式] 可以解析HTML/XHT