對主頁進(jìn)行設(shè)計(jì)之后，就可以進(jìn)行與主頁相關(guān)的DOM操作，涉及到添加按鈕的點(diǎn)擊事件，

cookie和json的應(yīng)用，cookie主要為了讓當(dāng)前數(shù)據(jù)與購物車進(jìn)行共享，以方便操作。

思路：

第一步：獲取所要操作的節(jié)點(diǎn)對象

第二步：當(dāng)頁面加載完后，需要計(jì)算本地cookie存了多少【個(gè)】商品，把個(gè)數(shù)賦值給ccount

第三步：為每一個(gè)商品對應(yīng)的添加購物車按鈕綁定一個(gè)點(diǎn)擊事件onclick

更改本地的cookie

獲取當(dāng)前商品的pid

循環(huán)遍歷本地的cookie轉(zhuǎn)換后的數(shù)組，取出每一個(gè)對象的pid進(jìn)行對比，若相等則該商品不是第一次添加

從購物車中取出該商品，然后更pCount值追加1

否則：創(chuàng)建一個(gè)新的對象，保存到購物中。同時(shí)該商品的數(shù)量為1

<script>
var ccount = document.getElementById("ccount"); //顯示商品總數(shù)量的標(biāo)簽節(jié)點(diǎn)對象
var btns = document.querySelectorAll(".list dl dd button"); //所有的購物車按鈕
//querySelectorAll返回匹配的元素集合，如果沒有匹配項(xiàng)，返回空的nodelist(節(jié)點(diǎn)數(shù)組)。

//約定好用名稱為datas的cookie來存放購物車?yán)锏臄?shù)據(jù)信息  datas里所存放的就是一個(gè)json字符串
var listStr = cookieObj.get("datas");
/*判斷一下本地是否有一個(gè)購物車（datas），沒有的話，創(chuàng)建一個(gè)空的購物車，有的話就直接拿來使用*/
if(!listStr) { //沒有購物車     datas  json
  cookieObj.set({
    name: "datas",
    value: "[]"
  });
  listStr = cookieObj.get("datas");
}

var listObj = JSON.parse(listStr); //數(shù)組
/*循環(huán)遍歷數(shù)組，獲取每一個(gè)對象中的pCount值相加總和*/
var totalCount = 0; //默認(rèn)為0
for(var i = 0, len = listObj.length; i < len; i++) {
  totalCount = listObj[i].pCount + totalCount;
}
ccount.innerHTML = totalCount;

/*循環(huán)為每一個(gè)按鈕添加點(diǎn)擊事件*/
for(var i = 0, len = btns.length; i < len; i++) {
  btns[i].onclick = function() {
    var dl = this.parentNode.parentNode;
    //parentNode 獲取文檔層次中的父對象。
    var pid = dl.getAttribute("pid");//獲取自定義屬性
    //getAttribute() 方法通過名稱獲取屬性的值。
    var arrs = dl.children;//獲取所有子節(jié)點(diǎn)
    if(checkObjByPid(pid)) {
      listObj = updateObjById(pid, 1)
    } else {
      var imgSrc = arrs[0].firstElementChild.src;
      var pName = arrs[1].innerHTML;
      var pDesc = arrs[2].innerHTML;
      var price = arrs[3].firstElementChild.innerHTML;
      var obj = {
        pid: pid,
        pImg: imgSrc,
        pName: pName,
        pDesc: pDesc,
        price: price,
        pCount: 1
      };
      listObj.push(obj);
      //push() 方法可向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長度。
      listObj = updateData(listObj);
    }
    ccount.innerHTML = getTotalCount();
  }
}
</script>

創(chuàng)建一個(gè)index.js文件把上面的JavaScript代碼放入其中。

<script type="text/javascript" src="index.js"></script>

以后從HTML頁面調(diào)用，實(shí)現(xiàn)功能模塊效果。