小白學代碼使用原生JS寫購物車模塊過程中的踩坑總結

著過年放假在家復習了之前學的JS知識，用原生擼了一個購物車模塊，下面我來整理一下我的思路分享給大家。

一、功能和效果圖

1.1 廢話不多說，首先上個效果圖，如下：

購物車功能效果圖

1.2 功能介紹：

點擊全選按鈕，每一項商品的復選框處于被勾選的狀態，同時計算出商品數量和商品總價；
點擊數量切換的按鈕，能自動計算出修改數量之后的商品數量和價格；
商品的總計數量和總價格應該只計算被勾選的商品的數量和金額。

功能介紹完畢，下面開始介紹我寫這個購物車的步驟。

二、購物車的頁面結構

2.1 HTML代碼

<table>
        <caption>
            購物車
        </caption>
        <thead>
            <tr>
                <!-- 全選復選框 -->
                <th>
                    <input type="checkbox" name="checkAll" id="check-all" checked /><label for="check-all">全選</label>
                </th>
                <th>圖片</th>
                <th>品名</th>
                <th>單位</th>
                <th>單價/元</th>
                <th>數量</th>
                <th>金額/元</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" name="item" value="SN-1020" checked />
                </td>
                <td>
                    <a href=""><img src="images/p1.jpg" alt="" /></a>
                </td>
                <td>iPhone 11</td>
                <td>臺</td>
                <td class="price">4799</td>
                <td><input type="number" min="1" value="1" /></td>
                <td class="amount">xxxx</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="item" value="SN-1020" checked />
                </td>
                <td>
                    <a href=""><img src="images/p2.jpg" alt="" /></a>
                </td>
                <td>小米pro 11</td>
                <td>部</td>
                <td class="price">3999</td>
                <td><input type="number" min="1" value="2" /></td>
                <td class="amount">xxxx</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="item" value="SN-1030" checked />
                </td>
                <td>
                    <a href=""><img src="images/p3.jpg" alt="" /></a>
                </td>
                <td>MacBook Pro</td>
                <td>臺</td>
                <td class="price">18999</td>
                <td><input type="number" min="1" value="1" /></td>
                <td class="amount">xxxx</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="item" value="SN-1040" checked />
                </td>
                <td>
                    <a href=""><img src="images/p4.jpg" alt="" /></a>
                </td>
                <td>小米75電視</td>
                <td>臺</td>
                <td class="price">5999</td>
                <td><input type="number" min="1" value="2" /></td>
                <td class="amount">xxxx</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="item" value="SN-1050" checked />
                </td>
                <td>
                    <a href=""><img src="images/p5.jpg" alt="" /></a>
                </td>
                <td>Canon 90D單反</td>
                <td>臺</td>
                <td class="price">9699</td>
                <td><input type="number" min="1" value="1" /></td>
                <td class="amount">xxxx</td>
            </tr>
        </tbody>
        <tfoot>
            <tr style="font-weight: bolder; font-size: 1.2em">
                <td colspan="5">總計:</td>
                <td id="sum">xxxx</td>
                <td id="total-amount">xxxx</td>
            </tr>
        </tfoot>
    </table>

2.2 CSS代碼

table {
    border-collapse: collapse;
    width: 90%;
    text-align: center;
    margin: auto;
}

table caption {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

table th, table td {
    border-bottom: 1px solid #ccc;
    padding: 5px;
    font-weight: normal;
}

table thead tr:first-of-type {
    background-color: #e6e6e6;
    height: 3em;
}

table input[type="checkbox"] {
    width: 1.5em;
    height: 1.5em;
}

table tbody tr {
    border-bottom: 1px solid #ccc;
}

table tbody tr:hover {
    background-color: #f6f6f6;
    cursor: pointer;
}

tbody img {
    width: 3em;
}

tbody input[type="number"] {
    width: 3em;
}

button {
    width: 150px;
    height: 30px;
    outline: none;
    border: none;
    background-color: teal;
    color: white;
    letter-spacing: 5px;
}

button:hover {
    opacity: 0.7;
    cursor: pointer;
}

2.3 效果圖

購物車效果圖

以上就是一個簡單的購物車頁面的HTML和CSS樣式代碼。

三、完成相關JS代碼

首先，我們先完成商品的全選與取消全選的功能，所以肯定是需要拿到全選復選框元素和商品前面的復選框元素，代碼如下：

// 獲取全選復選框，所有的商品都有一個獨立的復選框
const checkAll=document.querySelector('#check-all');
const checkItems=document.getElementsByName('item');

拿到全選和每個商品的復選框元素之后，給全選框添加一個change事件，監聽它的checked值的變化。此時全選框的checked值可以通過事件監聽回調函數中的ev參數下的ev.target.checked拿到。

checkALl.onchange=ev=> {
    // 如果全選框處于選中狀態，ev.target.checked的值就為true，反之，為false。
    console.log(ev.target.checked);
};

如果想讓全選框的的狀態和每個商品前的復選框狀態保持一致，那么就使他們的checked值一致即可。因此，我們可以在全選復選框的change事件中遍歷每個商品的復選框元素。

checkALl.onchange=ev=> {
    // 如果全選框處于選中狀態，ev.target.checked的值就為true，反之，為false。
    console.log(ev.target.checked);
    checkItems.forEach(item=> item.checked=ev.target.checked);
};

這樣點擊全選框的時候，就可以實現全部選中，和取消全選的功能了。效果如圖：

全選與取消全選

全選和取消全選的功能完成之后，下面開始完善逐個勾選商品，直至勾選全部商品，讓全選按鈕自動變成被選中的狀態。

要完成這個功能，我們可以通過對每個商品的復選框添加一個change事件來監聽checked的變化。因此需要通過forEach()方法對遍歷每一個商品。

checkItems.forEach(item=> item.onchange=ev=> {
    // 在這里處理每一項的checked值
});

此時，我們可以這樣考慮：當每個商品的復選框都被勾選，即：所有商品復選框的checked的值全部為true時，全選復選框才會顯示被勾選的狀態，也就是全選復選框的checked的值也要為true。

由于checkAll的狀態依賴于每一項商品的checked值，那么可以利用一個數組函數：Array.every()遍歷每一項商品，當所有商品的checked值都為true時，every()方法的返回值就是一個true，然后再賦值給checkAll即可。注意：由于我們拿到的checkItems是一個NodeList數組，需要先將其轉換成數組后再進行操作。

checkItems.forEach(item=> item.onchange=ev=> {
    checkAll.checked=Array.from(checkItems).every(checkItem=> checkItem.checked);
});

點擊選中每個商品

至此，全選和單選功能全部完成了。下面開始寫自動計算金額的和總數的功能。

購物車的數量和金額不僅包含每一項商品的數量和每一項商品的總金額，還包含了計算選中的商品總數，以及所有選中的商品的總金額。

下面首先完成單個商品的總金額計算，總金額=單價 * 數量，根據這個公式，我們首先拿到商品的單價和數量元素。

// 獲取單價組成的數組
const priceLists=document.querySelectorAll('.price');
// 獲取數量組成的數組
const numberLists=document.querySelectorAll('body input[type=number]');

以上單價（priceLists）和數量（numberLists）都是NodeList類型的，需要先將它們轉換成數組，由于表單中獲取的內容都是string類型，而參與計算的需要的是整型，所以這里需要進行一下轉換，使用parseInt()方法即可。

// 獲取商品單價組成的數組
const priceLists=document.querySelectorAll('.price');
const priceArr=Array.from(priceLists).map(item=> parseInt(item.textContent)); // [ 4799, 3999, 18999, 5999, 9699 ]
// 獲取商品數量組成的數組
const numberLists=document.querySelectorAll('body input[type=number]');
const numbersArr=Array.from(numberLists).map(item=> parseInt(item.value)); // 默認值:[ 1, 1, 1, 1, 1 ]

注意：商品價格和商品數量在取值時有些不同。商品的單價是普通元素直接使用textContent即可拿到它內部的值，而數量這個用的是表單控件，所以需要使用value才可以拿到值。我剛開始寫這個功能的時候懵逼了半天，此處一定要注意。

拿到商品的單價和數量之后就可以按照上面的公式進行計算了，由于商品的價格和商品的數量都是一個數組，并且價格和數量在數組中都是一一對應的關系，因此可以使用JS數組的reduce()方法進行遍歷。

let amountArr=[priceArr, numbersArr].reduce((prev, curr)=> {
    return prev.map((item, index)=> {
        return item * curr[index];
    });
});

總感覺上述寫法有點怪怪的，是不是可以進行簡化呢？根據箭頭函數的特征，當只有一條返回語句的時候可以省略掉return關鍵字和大括號，因此上述方法可以簡寫成下面這樣：

let amountArr=[priceArr, numbersArr].reduce((prev, curr)=> prev.map((item, index)=> item * curr[index]));
console.log(amountArr); // [ 4799, 3999, 18999, 5999, 9699 ]

（PS:上面的方法我一開始也沒有發現可以簡寫，我是把代碼發給我朋友看了之后，朋友給我點醒了。還是才疏學淺呀。）

這時已經計算出來了每個商品的總金額，那么我們將其渲染到頁面中。

// 獲取單個商品總金額的元素數組
const amountDOM=document.querySelectorAll('.amount');
amountDOM.forEach((item, index)=> item.textContent=amountArr[index]);

計算每個商品的金額并渲染到頁面中

單個商品的總金額渲染到頁面之后，下面就開始計算商品的總數，和總金額了。根據某東、某寶的購物車功能，我們可以發現，總計那里統計的商品總數是一般是我們勾選上的商品總數，總金額也是一樣的，那么我們就需要根據商品的狀態來進行計算了。

首先聲明一個數組，用于存儲被選中的商品的狀態，如果被選中，值為1，未被選中，則為0。

let  isChecked=[];
checkItems.forEach(item=> isChecked.push(item.checked===true ? 1 : 0));
// 打印出商品狀態值
console.log(isChecked);

效果如圖：

打印商品狀態值

商品的狀態已經記錄好了，那么現在就需要統計選中的商品對應的數量了。

// 聲明一個用于存儲商品數量的數組，該數組的作用是用于與對應的商品的狀態值的數組進行相乘，得到實際的被選中的商品的數組。
let checkedNumbers=[];
numbersArr.forEach((item, index)=> checkedNumbers.push(item * isChecked[index]));
// 打印被選中的商品的數量
console.log(checkedNumbers);

打印出選中的商品的數量數組

計算出被選中的商品數量的總數并渲染到頁面中：

let checkedSum=checkedNumbers.reduce((prev, curr)=> prev + curr);
// 將獲取的數量結果渲染到頁面中
document.querySelector('#sum').textContent=checkedSum;

效果如上圖已經出來了。

下面開始計算被選中的商品的總金額，該總金額等于上面所有被選中的商品的總金額之和。計算出結果之后渲染到頁面中。

// 聲明一個數組用于存儲每一個被選中的商品的總金額
let checkedPrice=[];
checkedNumbers.forEach((item, index)=> checkedPrice.push(item * priceArr[index]));
// 打印被選中的每個被選中的商品總金額
console.log(checkedPrice);
// 計算被選中的商品總金額
let totalAmount=checkedPrice.reduce((prev, curr)=> prev + curr);
// 將選中的商品總金額渲染到頁面中
document.querySelector('#total-amount').textContent=totalAmount;

效果圖：

將總金額渲染到頁面

至此，關于計算單個商品的總金額以及被選中商品的數量和總金額的功能已經全部完成了，但是我們還需要實現在頁面加載以及更改某個商品數量時自動計算的功能。那么就需要將上述的計算功能封裝成一個函數，以便后面每一次執行計算時使用。

封裝后的代碼如下：

function autoCalculate() {
    // 獲取單價組成的數組
    const priceLists=document.querySelectorAll('.price');
    const priceArr=Array.from(priceLists).map(item=> parseInt(item.textContent));
    // 獲取數量組成的數組
    const numberLists=document.querySelectorAll('body input[type=number]');
    const numbersArr=Array.from(numberLists).map(item=> parseInt(item.value));
    console.log(priceArr, numbersArr);
  
    // 由于拿到的表單里的數據都是string類型的，所以需要先將其轉換成int類型，因此需要使用`map()`方法操作一下
    let amountArr=[priceArr, numbersArr].reduce((prev, curr)=> prev.map((item, index)=> item * curr[index]));
    console.log(amountArr);
    const amountDOM=document.querySelectorAll('.amount');
    amountDOM.forEach((item, index)=> item.textContent=amountArr[index]);

    // 首先聲明一個數組，用于存儲被選中的商品的狀態，如果被選中，值為1，未被選中，則為0
    let isChecked=[];
    checkItems.forEach(item=> isChecked.push(item.checked===true ? 1 : 0));
    console.log(isChecked);
    // 聲明一個用于存儲是商品數量的數組，該數組的作用是：如果商品處于被選中的狀態，那么就存儲它真實的數量值，
    // 如果沒有被選中，那么數量就是0
    let checkedNumbers=[];
    numbersArr.forEach((item, index)=> checkedNumbers.push(item * isChecked[index]));
    console.log(checkedNumbers);
    // 此時，被選中的商品的總數為：
    let checkedSum=checkedNumbers.reduce((prev, curr)=> prev + curr);
    console.log(checkedSum);
    // 將獲取的數量結果渲染到頁面中
    document.querySelector('#sum').textContent=checkedSum;
    // 下面開始計算被選中的商品的總金額，該總金額等于上面所有被選中的商品的總金額之和。
    // 聲明一個數組用于存儲每一個被選中的商品的總金額
    let checkedPrice=[];
    checkedNumbers.forEach((item, index)=> checkedPrice.push(item * priceArr[index]));
    console.log(checkedPrice);
    // 計算被選中的商品總金額
    let totalAmount=checkedPrice.reduce((prev, curr)=> prev + curr);
    // 將選中的商品總金額渲染到頁面中
    document.querySelector('#total-amount').textContent=totalAmount;
}

將代碼封裝后我們會發現，單個商品的總金額，商品總數以及總金額的值都沒了，如下圖：

封裝代碼后的效果

這是因為，代碼在第一次加載的時候并沒有執行封裝后的函數，因此需要加一行代碼：

// 頁面第一次加載的時候自動執行一次。
window.onload=autoCalculate;

這樣頁面中的數據在第一次加載的時候就全部都正常了。

下面完成最后一個功能：調整商品的數量，會自動計算總數和金額。該功能還是通過change事件監聽某個表單數據的變化來完成。效果圖下圖：

代碼實現：

// 監聽某個控件的事件，首先需要拿到控件元素。
const numInput=document.querySelectorAll('body input[type=number]');
// 上面都用了onchange來監聽，這里換個方法使用addEventListener。
numInput.forEach(item=> item.addEventListener('change', autoCalculate));

但是我們會發現這里有個小bug，就是如果勾選沒有選中的商品，并不會自動計算商品數量和總價，原因很簡單，我們在監聽單個商品選中和全選的時候根本就沒有執行自動計算函數，只需要在二者的事件監聽中加上自動計算的函數即可。

checkAll.onchange=ev=> {
    checkItems.forEach(item=> item.checked=ev.target.checked);
    // 解決勾選全選框不會自動計算的bug
    autoCalculate();
};
checkItems.forEach(item=> item.onchange=ev=> {
    checkAll.checked=Array.from(checkItems).every(checkItem=> checkItem.checked);
    // 解決勾選全選框不會自動計算的bug
    autoCalculate();
});

寫到這里，我們購物車的所有功能都已經完成了。購物車這個模塊看似不難，其實這里面的坑也是不少的，例如：

在操作獲取的元素節點時，我們有時候需要將其轉換成一個數組才可以使用數組函數進行操作，因為我們通過document.querySelector獲取的元素并不是一個真正的數組，而是一個類數組（NodeList）；
案例中使用了多個數組函數，Array.from()、Array.reduce()、Array.every()等等，由此可見，熟練掌握JS常用的數組也是非常重要的；
掌握事件監聽：addEventListener；
箭頭函數的簡寫方法；
表單事件的監聽，只能通過onchange方法，千萬不要使用onclick。

以上就是我個人在寫這個購物車功能的全部新的，由于本人也是新手，可能還有其他更簡介方便的寫法，如果有問題，請各位大佬批評指正，不勝感激。

如果有剛開始學習JS的同學，想要源碼的各位親，可以關注并私信回復“購物車”即可。

術用品對繪畫者來說是必備的，青少年、職業成年人都有較高需求度，尤其是當今生活條件變好，各種用品種類非常多，家長們也愿意在孩子身上花更多的金錢。

因此對經營者來說，市場高需求下，只滿足附近三公里客戶不足以生意增長和擴大營收，還需要通過線上拓展更廣的群體與訂單。

而通過雨科網商城平臺搭建美術用品小程序商城后又有什么效果呢？「鏈接」

1、商品管理、線上銷售

美術用品種類和品牌眾多，由于大多為短期消耗品，因此購買率相當可以。通過小程序可將所有產品規格參數上架管理，詳細價格、介紹等信息呈現，商城內精美布局商品和頁面設計制作，精美呈現形式更利于促進客戶消費。

琳瑯滿目的線上購物場景，多流量渠道利于商家分享、也利于用戶觸達，包括商品分享、商城搜索、篩選等。

更可構建電腦手機商城網站+微信小程序商城聯合打通多種購物環境，同城配送+到店自提+快遞配送，客戶坐在家里直接選擇商品下單購物即可按照自己的方式獲得商品。

線上銷售更利于和同行競爭，構建私域渠道打造自己的美術電商平臺。

消息通知和訂單管理發貨備貨，以及配套工具打單、小票、對接ERP、當面付等，輕松完成訂單流程。

2、客戶管理與持續生意增長

美術用品客戶的復購率較高，客戶在商城中注冊會員信息留存，商家可隨時查看并長期管理，短信發送等。

同時長期運營場景下，可通過會員積分、儲值、會員卡、等級體系留存客戶并長期復購，利于商城回籠資金和客戶享受折扣優惠持續復購，會員也是商城經營重要方式之一。

同時還有分銷，推廣員、分銷商、社區團長體系，讓會員成為推廣人員，利用自己的私域生態分享完成訂單獲得傭金收入，而商家則讓商城獲得更多曝光，更多新客與訂單。

商家后臺靈活管理，利于長期發展，動動手指，其他人幫你賣貨。

當然雨科網商城還擁有多種營銷功能，如優惠券、新人禮、積分商城、組合套餐、定金預售、短視頻、互動游戲等，管理和設置方便，客戶參與更加便捷，功能強大，利用營銷模式可帶動更多商品銷售和裂變復購等。

3、多商戶與商城后臺

美術用品客群一半都是青少年，由于地區廣泛，如果商家有多家門店，可以通過多商戶自營體系，將所有分店上線，客戶進入小程序可直接購物，也可選擇附近分店下單配送或到店等，分店獨立經營，總部統籌管理。

還有多商戶進駐體系，邀請其他商家進入到商城里成為子商戶，獨立后臺貨品上新、發貨、營收等。商城管理員后臺管理商品審核、店鋪呈現、評星、提現、資料等，構建完善的線上購物商圈。

后臺多種功能控件模塊，現成賣貨小程序商城模板直接修改設計制作，輕松完成上線。

現在就注冊賬號進入商城后臺搭建美術用品銷售賣貨小程序商城吧。「鏈接」

原文：https://www.zcdly.com/msypscxcx.html

TML編輯器粘貼word圖片，web編輯器粘貼word圖片，web富文本編輯器粘貼word，前端編輯器粘貼word內容，前端web編輯器粘貼word，支持快捷鍵操作（Ctrl+V），

粘貼后word圖片自動上傳到服務器中，然后自動將圖片和文字HTML添加到編輯器中。

用戶這邊日常的編輯工作基本上都是在word中完成的，用戶把內容編輯好后希望能夠直接一鍵（通過快捷鍵）粘貼到網站后臺新聞發布頁面的編輯器中，這樣能夠節省不少時間。提高工作效率，信息發布效率。

用戶發布新聞的時候是從word里面復制圖片和文字，然后將word圖文內容粘貼到web富文本編輯器中，希望能夠將word的圖片自動上傳到服務器中，服務器地址能夠自定義，后端的話需要支持任意開發語言，比如ASP,ASP.NET,JSP,PHP,PYTHON等。只要是基于標準HTTP協議的都要支持。如果能夠不裝控件最好，

實際上裝不裝都無所謂，只要好用。

1.下載示例：

http://www.ncmem.com/webapp/wordpaster/versions.aspx

2.復制WordPaster插件目錄

3.引入插件文件

注意：不要重復引入jquery，如果您的項目已經引入了jq，則不用再引入jq-1.4

4.在工具欄中增加插件按鈕

6.初始化控件

注意：

1.如果接口字段名稱不是file，請配置FileFieldName。ueditor接口中使用的upfile字段

參考：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45

2.如果接口返回JSON，請配置ImageMatch

參考：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1

3.如果接口返回的圖片地址沒有域名，請配置ImageUrl

參考：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936

4.如果接口有權限驗證（登陸驗證，SESSION驗證），請配置COOKIE。或取消權限驗證。

參考：http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3

效果

在線咨詢

上一篇：第一次拍銀河星空 27張拼成一張求大神指點
下一篇：付費文檔不能下載？一分鐘學會這4招，輕松解除這個限制

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

小白學代碼使用原生JS寫購物車模塊過程中的踩坑總結

一、功能和效果圖

二、購物車的頁面結構

您的項目需求