H5商城，純前端靜態頁面

概述

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

詳細

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

1、前言

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

作後端的小夥伴老是在抱怨前端較弱，接口寫的再好，沒有一個漂亮的前端，怎麼能更好的展現本身的做品呢，想要去研究前端，從網上下載的前端模板代碼複雜，想要修改個動態效果更是捉襟見肘，我也有經歷過這種痛苦，苦於沒有前端經驗，又沒有能夠合夥一塊兒作項目的前端，不少時候，都是本身在說服本身放棄一些提高本身的機會，如今好了，我分享的這套模板，基本上能夠知足你們H5商城前端的需求，並且代碼簡介清晰，爲本身動態綁定數據提供了很大的便利性css

首先幾張來張效果圖：html

本案例主要用到了的js以下圖前端

2、代碼分析

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

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

<!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>&nbsp;&nbsp;<label for="checkall">全選</label>
<a onclick="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>&nbsp;&nbsp;<label for="checkall2">全選</label>&nbsp;&nbsp;
<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">
<!--<span class="icon-more_m pull-left"></span> &nbsp;-->商家模式
</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> &nbsp;</p>
<div>
<a href="my-order.html"><i ></i>個人訂單</a>
</div>
<div>
<a href="address.html"><i ></i>個人地址
</a>
</div>
<p> &nbsp;</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>

小結web

HTML看似簡單，可是想要寫出一套代碼漂亮的前端，仍是須要有必定功底的後端

3、文件截圖以及運行操做

一、文件截圖瀏覽器

二、運行操做：微信

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

4、瀏覽器兼容性

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

5、其餘補充

此程序是靜態頁面，頁面上的數據都是寫死的，僅用做前端展現使用，動態數據須要本身單獨對接

H5商城，純前端靜態頁面

概述

詳細

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

1、前言

2、代碼分析

3、文件截圖以及運行操做

4、瀏覽器兼容性

5、其餘補充

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

注：本文著做權歸做者，由demo大師發表，拒絕轉載，轉載須要做者受權