實現購物車結算功能：批量和全部刪除，全選和反選，單價和總價，數量增減，頁面隱藏和顯示

阿新 • • 發佈：2019-01-16

需求：

要求：技術要求（html+css+angularjs）

1. 完成頁面佈局，如圖1.1（button按鈕可以用普通按鈕）

2.Ø宣告資料物件，初始化商品資訊，資料自擬且不低於四條

3. 用ng-repaet指令將物件遍歷並渲染到頁面中

4.Ø點選”+”按鈕輸入框中的數量加1，同時可以計算出商品小計和購物車總價。同理，當點選”-”按鈕時輸入框中的數量減1，商品小計和購物車總價都會改變。在輸入框中手動輸入數量值，商品小計和購物車總價動態改變。

5. 使用AngularJS的過濾器在商品價格、商品小計、購物車總價前加”￥：”。

6. 當商品數量為1，使用者點選”-”操作時，彈出對話方塊，詢問使用者是否刪除該商品。如圖

1.2 當用戶點選”確認”時刪除該條商品資訊，當用戶點選”取消”時商品恢復原來數量。

7. 使用者點選第一個checkbox代表全選，全選商品後點擊刪除選中商品，選中商品被刪除，若購物車商品被全部刪除後，展示如圖1.3

效果圖：

圖1.1

圖1.2

圖1.3

程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>實現購物車結算功能：批量/全部刪除，全選/反選，單價/總價，數量增減，頁面隱藏/顯示</title 
>
    <style type="text/css">
       .mouse_color{
background-color: #cccccc;
       }
        .num{
width: 50px;
        }
a{
text-decoration: none;
        }
#btn1,#btn2{
color:white;
width: 100px;
float: right;
border: solid red;
margin-right: 88px;
background-color: #ff3b30;
        }
    </ 
style>
    <script src="../js/jquery-2.1.0.js"></script>
    <script src="../js/angular.js"></script>
    <script type="text/javascript">
$(function () {
// 滑鼠移到行的顏色:游標在表格上移動，當前行變色；( mousemove或mouseover )
$("#tab tr").mouseover(function () {
$(this).addClass("mouse_color");
            });
// 滑鼠移出行的顏色:離開當前行，顏色恢復
$("#tab tr").mouseout(function () {
$(this).removeClass("mouse_color");
            });
        });
    </script>
    <script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function ($scope) {
//1. 宣告資料物件，初始化商品資訊，資料自擬且不低於四條
$scope.Products = [
                {name:"qq",price:12.90,number:1,totalPrice:12.90,state:false},
                {name:"wx",price:23.90,number:1,totalPrice:23.90,state:false},
                {name:"cn",price:99.90,number:1,totalPrice:99.90,state:false},
                {name:"us",price:2.90,number:1,totalPrice:2.90,state:false},
                {name:"jp",price:0.90,number:1,totalPrice:0.90,state:false}
            ];
//2. 減少數量函式
$scope.less = function (index) {
if($scope.Products[index].number > 1){
$scope.Products[index].number--;
                }else {
//跳轉到刪除按鈕事件處
$scope.remove(index);
                }
            }
//3. 新增數量函式
$scope.add = function (index) {
$scope.Products[index].number++;
            }
//4. 所有商品總價函式
$scope.AlltotalPrice = function () {
var allPrice = 0;
for(var i = 0;i<$scope.Products.length;i++){
allPrice +=  $scope.Products[i].number * $scope.Products[i].price;
allPrice.toFixed(2);        //保留兩位小數
}
return allPrice.toFixed(2);;
            }
//5. 輸入框輸入負數或其它除數字外的內容時，輸入框內容要變為1
$scope.change = function (index) {
if($scope.Products[index].number >= 1){
                }else {
$scope.Products[index].number = 1;
                }
            }
//6.購買總數量函式
$scope.numAll = function () {
var numAlls = 0;
for(var i = 0;i<$scope.Products.length;i++){
numAlls += $scope.Products[i].number;
                }
return numAlls;
            }
//7. 點選刪除按鈕操作，彈出對話方塊，詢問使用者是否刪除該商品。
$scope.remove = function (index) {
if(confirm("您是否要將該商品移除購物車？")){
$scope.Products.splice(index,1);
                }
            }
//8.點選 清空購物車 按鈕，清空商品資訊
$scope.clear = function () {
if(confirm("您是否準備清空購物車？")){
$scope.Products = [];
                }
            }
//9. 點選批量刪除按鈕的函式：使用者沒有選中任意複選框時點選批量刪除按鈕提示使用者先進行選中要刪除的商品資訊
$scope.delSelect = function () {
var ProductsNames = [];  //定義空陣列，儲存選中項的name
                //根據下標遍歷資料來源，把選中項的名字新增到陣列中。
for(index in $scope.Products){
//判斷選項是否為選中的的狀態？
if($scope.Products[index].state == true){
ProductsNames.push($scope.Products[index].name);
                    }
                }
//遍歷含有選中項name屬性的陣列。有多少個被選中，資料來源就會被遍歷多少遍。
if(ProductsNames.length >0 ){
if(confirm("您是否要將選擇的商品移除購物車？")){
for(i in ProductsNames){
var name = ProductsNames[i];
//對比選中項的名字在陣列中的角標，根據角標刪除當前物件，刪一個數據源少一個。
for(y in $scope.Products){
if (name == $scope.Products[y].name){
$scope.Products.splice(y,1);
                                }
                            }
                        }
                    }
                }else {
alert("請先選擇要移除的商品項");
                }
            }
//10. 全選複選按鈕 的點選事件
$scope.selectAll = false;
$scope.selectAllFun = function () {
//如果全選按鈕為true時，就把陣列的state狀態變為true
if($scope.selectAll){
for(index in $scope.Products){
$scope.Products[index].state = true;
                    }
                }else {
for(index in $scope.Products){
$scope.Products[index].state = false;
                    }
                }
            }
//單個複選框按鈕的點選事件：根據點選的單個複選框按鈕的下標的state 檢測內容是否全選
$scope.checkSelect = function (index) {
var temp = 0;
if($scope.Products[index].state == true){
temp++;
                }else {
temp--;
                }
//定義的變數大小等於陣列的長度，代表內容全選，表示全選按鈕為true
if(temp == $scope.Products.length  ){
$scope.selectAll = true;
                }else {
$scope.selectAll = false;
                }
//定義標誌位checkState，預設為false
var checkState = false;
for(i in $scope.Products){
if($scope.Products[i].state == true){
                    }else {
//資料來源中的標誌位變數state不是全部等於true時，標誌位checkState才為true
checkState = true;
                    }
                }
if(checkState){
//標誌位checkState為true時，全選按鈕就為false
$scope.selectAll = false;
                }else {
$scope.selectAll = true;
                }
            }
//11. 判斷資料來源的長度：長度為0時，即購物車為空，頁面就提示：您的購物車為空，去逛商場
$scope.showContent = function () {
if($scope.Products.length > 0){
return false;
                }else {
return true;
                }
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h2>我的購物車</h2>
<hr style="size: 1px;background-color: #F5F5F5;width: 100%;">   <br>
    <button ng-click="delSelect()" id="btn1" > 批量刪除 </button>
    <button ng-click="clear()" id="btn2" > 清空購物車 </button>   <br><br>
<center>
    <table id="tab" ng-hide="showContent()" border="1 solid #F5F5F5;" cellspacing="0" cellpadding="1" width="888" height="333">
        <thead>
            <tr align="left">
<!--    全選複選按鈕    -->
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></th>
                <th>name</th>
                <th>price</th>
                <th>number</th>
                <th>totalPrice</th>
                <th>option</th>
            </tr>
        </thead>
        <tbody>
<!--    用ng-repaet指令將物件遍歷並渲染到頁面中    -->
            <!--    使用AngularJS的過濾器在商品價格、商品小計、購物車總價前加”￥：”   -->
<tr ng-repeat="goods in Products">
<!--    單個 複選按鈕    -->
<th align="left"><input type="checkbox" ng-model="goods.state"  ng-click="checkSelect($index)"></th>
                <td>{{goods.name}}</td>
                <td>￥:{{goods.price.toFixed(2)}}</td>
                <td>
<!--    點選”+”按鈕輸入框中的數量加1，同時可以計算出商品小計和購物車總價。 -->
<button ng-click="less($index)" style="background-color: #007aff;color: white;border: solid #007aff;">-</button>
                    <input type="text" class="num" ng-model="goods.number" ng-change="change($index)">
<!--    當點選”-”按鈕時輸入框中的數量減1，商品小計和購物車總價都會改變。  -->
<button ng-click="add($index)" style="background-color: #007aff;color: white;border: solid #007aff;">+</button> </td>
                </td>
                <td>￥:{{(goods.price * goods.number).toFixed(2)}}</td>
                <td><button ng-click="remove($index)" style="background-color: #007aff;color: white;border: solid #007aff;">刪除</button></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6">
購買數量：<span>{{numAll()}}</span> &nbsp;&nbsp;
<!--    顯示￥符號也可以直接使用  ￥  如<td colspan="6">總價為：￥:<span ng-bind="AlltotalPrice()"></span></td>    -->
總價為：<span ng-bind="AlltotalPrice() | currency:'￥'"></span>
                </td>
            </tr>
        </tfoot>
    </table>
<!--    購物車為空時選擇顯示的內容   -->
<p ng-show="showContent()">您的購物車為空，<a href="https://world.taobao.com/">去逛商場</a></p>
</center>
</body>
</html>

實現購物車結算功能：批量和全部刪除，全選和反選，單價和總價，數量增減，頁面隱藏和顯示

需求：要求：技術要求（html+css+angularjs） 1. 完成頁面佈局，如圖1.1（button按鈕可以用普通按鈕） 2.Ø宣告資料物件，初始化商品資訊，資料自擬且不低於四條 3. 用ng-repaet指令將物件遍歷並渲染到頁面中 4.Ø點選”+”按鈕輸入

原生js實現購物車相關功能

parse ole child number ble doctype oat gin button <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

JQuery實現全選、反選和取消功能

oct put 執行 tab function src color gpo 不用 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

微信小程序 - 實現購物車結算

結算 img 小程序 http mil zip 微信小程序 span font 示例源碼下載：小程序-實現購物車結算微信小程序 - 實現購物車結算

angular4實現購物車全選、反選、單選功能

<div class="items" *ngFor="let item of data; let i = index;"> <input type="checkbox" name="checkSingle[]" class="my_chec

Python實現購物車的功能

列表是Python中最基本的資料結構。列表中的每個元素都分配一個數字 - 它的位置，或索引，第一個索引是0，第二個索引是1，依此類推，列表可以用於儲存很多維度的資料，一個應用就是用於購物車的實現，以下是我寫的一個購物車的小程式，本例子中通過一個goods的；列表儲存所有商品的名稱和金額，通過操作goods列表

使用servlet過濾器實現跨域功能：

1.定義過濾器介面Filter的實現類，實現類中修改respone的頭資訊，把 “Access-Control-Allow-Origin” 的域名修改問請求方的域名，如下: package fi

linux使用檔案來實現swap的功能：SWAPFILE實現

如果安裝機子交換分割槽沒有分好不夠大建立swap檔案mkdir /var/swap #建立一個資料夾用於存放交換分割槽檔案，自行決定 chmod 700 /var/swap #修改交換分割槽資料夾許可權介紹一下dd命令的一些使用技巧dd命令硬碟對拷：dd if=/dev/

用jQuery實現（全選、反選、全不選功能）

sele 元素 selectall input html元素 UNC 推薦 not rop 在jQuery選擇器的基礎下我們實現一個全選，反選，全不選功能！ <script type="text/javascript"> $(functio

JavaScript實現複選框的全選、全部不選、反選

以較為簡潔的程式實現複選框的全選、全部不選、反選操作。並且將可變的部分設定為JS的引數，以實現程式碼複用。全選和全不選第一個引數為複選框名稱，第二個引數為是全選還是全部不選。 function allCheck(name,boolValue) { var

jQuery實現表單全選、全不選以及反選的功能

本文主要介紹了利用jQuery實現表單的全選、全不選以及反選的功能。對如下的form表單：  <form id="test-form" action="test"> <legend&g

vue三種方式實現：全選、反選、全不選

方法一：v-model 與 [{checked:true},…] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi

shell指令碼：批量修改檔名(刪除檔名中字元)

上一篇寫過批量修改檔名（檔名中新增字元），工作中還存在這樣的需求，批量修改檔名，刪除檔名中的某些字元；舉例如下：批量改名，刪除檔名中多餘字元目錄下檔名為如下，要求去掉_finished。 stu_102999_1_finished.jpg stu_10

【JavaScript】實現複選框的全選、全部不選、反選

以較為簡潔的程式實現複選框的全選、全部不選、反選操作。並且將可變的部分設定為JS的引數，以實現程式碼複用。全選和全不選第一個引數為複選框名稱，第二個引數為是全選還是全部不選。 function allCheck(name,boolValue) { var all

icheck結合datatable使用方法及實現全選、反選功能

var table = $("#user_index").DataTable({ order: [ ["1", 'asc'] ], //按照發布時間降序排序 page: false, serverSide:true,

jQuery實現簡單全選、反選、全不選功能

例子：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <titl

利用js實現全選、反選、全不選(button)

put () false 全選 charset btn tel pre fun <!DOCTYPE html><html><head><meta charset="utf-8"/><title>

利用jQuery實現全選、全不選、反選(button)

htm nag ttr check n) 足球 text ctype cti <!DOCTYPE html><html><head><meta charset="utf-8"><title>&l

使用jQuery實現全選、全不選、反選(button)

jquery實現 mage water oct ces div charset body check <!DOCTYPE html><html><head><meta charset="utf-8"><

利用jQuery實現全選、全不選、反選(checkBox)

utf body type charset his all set htm script <!DOCTYPE html><html><head><meta charset="utf-8"><title

實現購物車結算功能：批量和全部刪除，全選和反選，單價和總價，數量增減，頁面隱藏和顯示

相關推薦