當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

淘宝购物车前端（JS和Angularjs版本)

發(fā)布時間：2024/1/1 HTML 26 豆豆

生活随笔收集整理的這篇文章主要介紹了淘宝购物车前端（JS和Angularjs版本) 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

今天用HTML和JS實(shí)現(xiàn)以下購物車，然后再用Angualrjs再去實(shí)現(xiàn)一下購物車的前端實(shí)現(xiàn)。

功能頁面分析：

既然是做模仿淘寶購物車，肯定要先去分析一下淘寶的購物車頁面,自己去淘寶賣了兩件東西，看了下效果；

首先有一個全選功能，全選的時候會把所有的單選框給選中，并且會把所有的金額進(jìn)行統(tǒng)計。

商品店鋪的單選功能：在選擇店鋪的時候會把下面的商品全部都給選中，并且統(tǒng)計已經(jīng)勾選的金額。

商品單選功能：選擇該商品，并且統(tǒng)計金額，如果所有的商品都被勾選的話，會觸發(fā)上面的全面框也被勾選，并且統(tǒng)計所有已經(jīng)勾選的金額。

商品加減功能，對商品的金額進(jìn)行加減。

刪除功能，把該商品從購物車移出去。

結(jié)算功能：不做后臺交互，但是這里會控制結(jié)算按鈕的顯示，并且把統(tǒng)計的值給打印出來。

JS+HTML+CSS

CSS：

@charset "utf-8"; *{margin:0;padding:0;list-style-type:none;} a{color:#666;text-decoration:none;} table{border-collapse:collapse;border-spacing:0;border:0;} body{color:#666;font:12px/180% Arial, Helvetica, sans-serif, "新宋體";} clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-table} *html .clearfix{height:1%} .clearfix{display:block} *+html .clearfix{min-height:1%} .fl{float:left;} .fr{float:right;}.catbox{width:940px;margin:0 auto;} .catbox table{text-align:center;width:100%;} .catbox table th,.catbox table td{border:1px solid #CADEFF;} .catbox table th{background:#e2f2ff;border-top:3px solid #a7cbff;height:30px;} .catbox table td{padding:10px;color:#444;} .catbox table tbody tr:hover{background:RGB(238,246,255);} .checkbox{width:60px;} .goods{width:300px;} .goods span{width:180px;margin-top:20px;text-align:left;float:left;} .goods img{width:100px;height:80px;margin-right:10px;float:left;} .price{width:130px;} .count{width:90px;} .count .add, .count input, .count .reduce{float:left;margin-right:-1px;position:relative;z-index:0;} .count .add, .count .reduce{height:23px;width:17px;border:1px solid #e5e5e5;background:#f0f0f0;text-align:center;line-height:23px;color:#444;} .count .add:hover, .count .reduce:hover{color:#f50;z-index:3;border-color:#f60;cursor:pointer;} .count input{width:50px;height:15px;line-height:15px;border:1px solid #aaa;color:#343434;text-align:center;padding:4px 0;background-color:#fff;z-index:2;} .subtotal{width:150px;color:red;font-weight:bold;} .operation span:hover,a:hover{cursor:pointer;color:red;text-decoration:underline;}.foot{margin-top:10px;color:#666;height:48px;border:1px solid #c8c8c8;background-color:#eaeaea;background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));position:relative;z-index:8;} .foot div, .foot a{line-height:48px;height:48px;} .foot .select-all{width:100px;height:48px;line-height:48px;padding-left:5px;color:#666;} .foot .closing{border-left:1px solid #c8c8c8;width:100px;text-align:center;color:#000;font-weight:bold;background:RGB(238,238,238);cursor:pointer;} .foot .total{margin:0 20px;cursor:pointer;} .foot #priceTotal, .foot #selectedTotal{color:red;font-family:"Microsoft Yahei";font-weight:bold;} .foot .selected{cursor:pointer;} .foot .selected .arrow{position:relative;top:-3px;margin-left:3px;} .foot .selected .down{position:relative;top:3px;display:none;} .show .selected .down{display:inline;} .show .selected .up{display:none;} .foot .selected:hover .arrow{color:red;} .foot .selected-view{width:935px;border:1px solid #c8c8c8;position:absolute;height:auto;background:#ffffff;z-index:9;bottom:48px;left:-1px;display:none;} .show .selected-view{display:block;} .foot .selected-view div{height:auto;} .foot .selected-view .arrow{font-size:16px;line-height:100%;color:#c8c8c8;position:absolute;right:330px;bottom:-9px;} .foot .selected-view .arrow span{color:#ffffff;position:absolute;left:0px;bottom:1px;}#selectedViewList{padding:10px 20px 10px 20px;} #selectedViewList div{display:inline-block;position:relative;width:100px;height:80px;border:1px solid #ccc;margin:10px;float:left;} #selectedViewList div img{width:100px;height:80px;margin-right:10px;float:left;} #selectedViewList div span{display:none;color:#ffffff;font-size:12px;position:absolute;top:0px;right:0px;width:60px;height:18px;line-height:18px;text-align:center;background:#000;cursor:pointer;} #selectedViewList div:hover span{display:block;}HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>購物車</title><link rel="stylesheet" href="css/style.css"/><script type="text/javascript" src="js/demo.js"></script></head> <body><div class="catbox"><table id="cartTable"><thead><tr><th><label><input class="check-all check" type="checkbox"/>?全選</label></th><th>商品</th><th>單價</th><th>數(shù)量</th><th>小計</th><th>操作</th></tr></thead><tbody><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="images/1.jpg" alt=""/><span>Casio/卡西歐 EX-TR350</span></td><td class="price">5999.88</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">5999.88</td><td class="operation"><span class="delete">刪除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="images/2.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td><td class="price">3888.50</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">3888.50</td><td class="operation"><span class="delete">刪除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="images/3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td><td class="price">1428.50</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">1428.50</td><td class="operation"><span class="delete">刪除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="images/4.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td><td class="price">640.60</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">640.60</td><td class="operation"><span class="delete">刪除</span></td></tr></tbody></table><div class="foot" id="foot"><label class="fl select-all"><input type="checkbox" class="check-all check"/>?全選</label><a class="fl delete" id="deleteAll" href="javascript:;">刪除</a><div class="fr closing">結(jié) 算</div><div class="fr total">合計：￥<span id="priceTotal">0.00</span></div><div class="fr selected" id="selected">已選商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div><div class="selected-view"><div id="selectedViewList" class="clearfix"><div><img src="images/1.jpg"><span>取消選擇</span></div></div><span class="arrow">◆<span>◆</span></span></div></div></div></body> </html> JS:

要看完整教程的可以自己去慕課網(wǎng)學(xué)習(xí)，都比較簡單，這里就不說了；傳送門：點(diǎn)擊打開鏈接

說幾個不足的地方結(jié)算按鈕并沒有變化，而且把所有的單選框選擇完之后，全選框也應(yīng)該觸發(fā)選中才對，下面我加上Angualrjs重新去實(shí)現(xiàn)以下購物車。

AngularJS?Scope(作用域)

Scope(作用域) 是應(yīng)用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。

Scope 是一個對象，有可用的方法和屬性。

Scope 可應(yīng)用在視圖和控制器上。

Scope 概述

AngularJS 應(yīng)用組成如下：

View(視圖), 即 HTML。
Model(模型), 當(dāng)前視圖中可用的數(shù)據(jù)。
Controller(控制器), 即 JavaScript 函數(shù)，可以添加或修改屬性。

scope 是模型。

scope 是一個 JavaScript 對象，帶有屬性和方法，這些屬性和方法可以在視圖和控制器中使用。

首先創(chuàng)建我們的控制器： var app = angular.module('myApp', []);app.controller('myCart', function($scope) {});再和頁面綁定一下： <div class="catbox" ng-app="myApp" ng-controller="myCart">構(gòu)造表格：前面的一個案例里面表格是靜態(tài)的，接下來我講會使用一個偽動態(tài)的表格去構(gòu)造頁面的數(shù)據(jù)；首先在Controller里面構(gòu)造我們的表格數(shù)據(jù); $scope.cartList=[{id:0,image:"images/1.jpg",name:"Casio/卡西歐 EX-TR350",price:5999.88,num:1,total:5999.88},{ id:1,image:"images/2.jpg",name:"Canon/佳能 PowerShot SX50 HS",price:3888.50,num:1,total:3888.50},{ id:2,image:"images/3.jpg",name:"Sony/索尼 DSC-WX300",price:1428.50,num:1,total:1428.50},{ id:3,image:"images/4.jpg",name:"Fujifilm/富士 instax mini 25",price:640.60,num:1,total:640.60}]然后使用ng-repeat 指令可以完美的顯示表格。 <table id="cartTable"><thead><tr><th><label><input class="check-all check" type="checkbox" ng-model="all" />?全選</label></th><th>商品</th><th>單價</th><th>數(shù)量</th><th>小計</th><th>操作</th></tr></thead><tbody><tr ng-repeat="c in cartList"><td class="checkbox"><input class="check-one check" type="checkbox" ng-model="check"/></td><td class="goods"><img src="{{c.image}}" alt=""/><span>{{c.name}}</span></td><td class="price">{{c.price}}</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="{{c.num}}"/><span class="add">+</span></td><td class="subtotal">{{c.total}}</td><td class="operation"><span class="delete">刪除</span></td></tr></tbody></table>關(guān)于小計和總計; 在我們的JS里面可能是很多的DOM操作，根據(jù)DOM來獲取值，然后再計算值，但是在我們的angularjs將會變得很優(yōu)雅，因?yàn)橐磺卸际歉鷶?shù)據(jù)有關(guān)，讓我們不要去操作DOM只需要關(guān)心數(shù)據(jù)就好了。使用$watch監(jiān)控數(shù)據(jù)模型的變化

在scope 內(nèi)置的所有函數(shù)中，用得最多的可能就是$watch 函數(shù)了，當(dāng)你的數(shù)據(jù)模型中某一部分發(fā)生變化時，$watch 函數(shù)可以向你發(fā)出通知。你可以監(jiān)控單個對象的屬性，也可以監(jiān)控需要經(jīng)過計算的結(jié)果（函數(shù)），實(shí)際上只要能夠被當(dāng)作屬性訪問到，或者可以當(dāng)作一個javascript?函數(shù)被計算出來，就可以被$watch 函數(shù)監(jiān)控。它的函數(shù)簽名為

$watch(watchFn, watchAction, deepWatch)

其中每個參數(shù)的詳細(xì)含義如下。

watchFn

該參數(shù)是一個帶有Angular 表達(dá)式或者函數(shù)的字符串，它會返回被監(jiān)控的數(shù)據(jù)模型的當(dāng)前值。這個表達(dá)式將會被執(zhí)行很多次，所以你要保證它不會產(chǎn)生其他副作用。也就是說，要保證它可以被調(diào)用很多次而不會改變狀態(tài)?；谕瑯拥脑?#xff0c;監(jiān)控表達(dá)式應(yīng)該很容易被計算出來。如果你使用字符串傳遞了一個Angular 表達(dá)式，那么它將會針對調(diào)用它的那個作用域中的對象而執(zhí)行。

watchAction

這是一個函數(shù)或者表達(dá)式，當(dāng)watchFn 發(fā)生變化時會被調(diào)用。如果是函數(shù)的形式，它將會接收到watchFn 的新舊兩個值，以及作用域?qū)ο蟮囊谩Ｆ浜瘮?shù)簽名為function(newValue, oldValue, scope)。

deepWatch

如果設(shè)置為true，這個可選的布爾型參數(shù)將會命令A(yù)ngular 去檢查被監(jiān)控對象的每個屬性是否發(fā)生了變化。如果你想要監(jiān)控數(shù)組中的元素，或者對象上的所有屬性，而不只是監(jiān)控一個簡單的值，你就可以使用這個參數(shù)。由于Angular 需要遍歷數(shù)組或者對象，如果集合比較大，那么運(yùn)算負(fù)擔(dān)就會比較重。

$watch 函數(shù)會返回一個函數(shù)，當(dāng)你不再需要接收變更通知時，可以用這個返回的函數(shù)注銷監(jiān)控器。

$scope.sumTotal=0; //總計$scope.$watch('cartList',function(newValue,oldValue,scope){for(var i in newValue){var total=newValue[i].num*newValue[i].price; //計算出新的結(jié)果$scope.cartList[i].total=total.toFixed(3); //保留三位小數(shù)并且把它賦值給元數(shù)據(jù); $scope.sumTotal+=total;}},true);<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>購物車</title><link rel="stylesheet" href="css/style.css"/><script type="text/javascript" src="js/angular.js"></script> <script type="text/javascript" src="js/cart.js"></script> </head> <body><div class="catbox" ng-app="myApp" ng-controller="myCart"><table id="cartTable"><thead><tr><th><label><input class="check-all check" type="checkbox" ng-model="all" />?全選</label></th><th>商品</th><th>單價</th><th>數(shù)量</th><th>小計</th><th>操作</th></tr></thead><tbody><tr ng-repeat="c in cartList"><td class="checkbox"><input class="check-one check" type="checkbox" ng-model="check"/></td><td class="goods"><img src="{{c.image}}" alt=""/><span>{{c.name}}</span></td><td class="price">{{c.price}}</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" ng-model="c.num"/><span class="add">+</span></td><td class="subtotal">{{c.total}}</td><td class="operation"><span class="delete">刪除</span></td></tr></tbody></table><div class="foot" id="foot"><label class="fl select-all"><input type="checkbox" class="check-all check"/>?全選</label><a class="fl delete" id="deleteAll" href="javascript:;">刪除</a><div class="fr closing">結(jié) 算</div><div class="fr total">合計：￥<span>{{sumTotal}}</span></div><div class="fr selected" id="selected">已選商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div><div class="selected-view"><div id="selectedViewList" class="clearfix"><div><img src="images/1.jpg"><span>取消選擇</span></div></div><span class="arrow">aaaa<span>aaaa</span></span></div></div></div>全選，全不選在Angularjs里面全選全不選只需要操作數(shù)據(jù)就好了，有不明白的可以看一下我原來寫的文章http://blog.csdn.net/liaodehong/article/details/50531873 所以我給我們的數(shù)據(jù)加了一個屬性；完整的代碼如下： var app = angular.module('myApp', []);app.controller('myCart', function($scope) {$scope.cartList=[{id:0,image:"images/1.jpg",name:"Casio/卡西歐 EX-TR350",price:5999.88,num:1,total:5999.88,check:false},{ id:1,image:"images/2.jpg",name:"Canon/佳能 PowerShot SX50 HS",price:3888.50,num:1,total:3888.50,check:false},{ id:2,image:"images/3.jpg",name:"Sony/索尼 DSC-WX300",price:1428.50,num:1,total:1428.50,check:false},{ id:3,image:"images/4.jpg",name:"Fujifilm/富士 instax mini 25",price:640.60,num:1,total:640.60,check:false}]$scope.checkAll=function(){for(var i in $scope.cartList){$scope.cartList[i].check=$scope.all;}}$scope.deleteCart=function(id){for(var i in $scope.cartList){if($scope.cartList[i].id==id){$scope.cartList.splice(i,1);}}}$scope.$watch('cartList',function(newValue,oldValue,scope){$scope.sumTotal=0; //總計$scope.count=0; //計數(shù)器for(var i in newValue){var total=newValue[i].num*newValue[i].price; //計算出新的結(jié)果$scope.cartList[i].total=total.toFixed(3); //保留三位小數(shù)并且把它賦值給元數(shù)據(jù); if(newValue[i].check){$scope.sumTotal+=total;$scope.count++;}}$scope.all=($scope.count==newValue.length); //如果所有的都選中的話，那么全選也應(yīng)該選中 },true); });

HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>購物車</title><link rel="stylesheet" href="css/style.css"/><script type="text/javascript" src="js/angular.js"></script> <script type="text/javascript" src="js/cart.js"></script> </head> <body><div class="catbox" ng-app="myApp" ng-controller="myCart"><table id="cartTable"><thead><tr><th><label><input class="check-all check" type="checkbox" ng-click="checkAll()" ng-model="all"/>?全選</label></th><th>商品</th><th>單價</th><th>數(shù)量</th><th>小計</th><th>操作</th></tr></thead><tbody><tr ng-repeat="c in cartList"><td class="checkbox"><input class="check-one check" type="checkbox" ng-model="c.check" /></td><td class="goods"><img src="{{c.image}}" alt=""/><span>{{c.name}}</span></td><td class="price">{{c.price}}</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" ng-model="c.num"/><span class="add">+</span></td><td class="subtotal">{{c.total}}</td><td class="operation"><span class="delete">刪除</span></td></tr></tbody></table><div class="foot" id="foot"><label class="fl select-all"><input type="checkbox" class="check-all check"/>?全選</label><a class="fl delete" id="deleteAll" href="javascript:;">刪除</a><div class="fr closing">結(jié) 算</div><div class="fr total">合計：￥<span>{{sumTotal}}</span></div><div class="fr selected" id="selected">已選商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div><div class="selected-view"><div id="selectedViewList" class="clearfix"><div><img src="images/1.jpg"><span>取消選擇</span></div></div><span class="arrow">aaaa<span>aaaa</span></span></div></div></div></body> </html>刪除：刪除也很簡單，只需要刪除該數(shù)組就好了。 $scope.deleteCart=function(id){for(var i in $scope.cartList){if($scope.cartList[i].id==id){$scope.cartList.splice(i,1);}}}一個簡單的小DEMO基本上就改造完成了。點(diǎn)擊打開鏈接

總結(jié)

以上是生活随笔為你收集整理的淘宝购物车前端（JS和Angularjs版本)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python django高校课程教学质
下一篇： layui模板引擎的使用