JavaScript51購商城實例是一個非常具有實用性的網站，為廣大購物愛好者提供了方便快捷的購買途徑。該網站中充滿了各種復雜的JavaScript編碼，這些編碼使得網站的功能更加完備，用戶的購物體驗也更加流暢。下面我們來詳細探究一下這個充滿良心的網站。 首先，讓我們來看一下產品展示頁面。在該頁面中，我們可以看到所有正在銷售的商品，每個商品都會有一張完整的圖片、商品名稱、商品描述和價格信息。當我們點擊其中一個商品時，會跳轉到商品詳情頁面。值得一提的是，這些信息都是利用JavaScript動態生成的，代碼如下：

function createProduct(element,product){
var a = document.createElement(element);
if(element == "img"){
a.src = product;
} else if(element == "h2"){
a.innerHTML = product;
} else if(element == "p"){
a.innerHTML = product;
} else if(element == "button"){
a.innerHTML = product;
}
return a;
}

通過調用createProduct函數，我們可以輕松的生成商品展示頁面中的各種元素。這個函數通過判斷傳入的參數，來動態生成相應的html元素。在這里，我們可以看到JavaScript函數的強大之處，通過一個簡單的函數，我們就可以輕松的實現一個完整的產品展示頁面。 現在，我們來看一下購物車頁面。在該頁面中，我們可以看到所有已經加入到購物車里的商品，每個商品都會有商品信息、數量和價格信息。我們可以通過加、減按鈕來改變商品的數量，還可以刪除某個選定的商品。這些效果的實現離不開復雜的JavaScript代碼，下面是一個實現商品數量變化的腳本：

function changeProductNumberButton(){
// 獲取所有 + 和 - 按鈕
var addButton = document.querySelectorAll(".add");
var minusButton = document.querySelectorAll(".minus");
// 添加事件監聽，對應不同的加減操作
for(var i = 0;i < addButton.length;i++){
addButton[i].addEventListener("click",(function(i){
return function(){
var input = addButton[i].previousElementSibling;
input.value = parseInt(input.value) + 1;
getTotalPrice();
}
})(i));
}
for(var i = 0;i < minusButton.length;i++){
minusButton[i].addEventListener("click",(function(i){
return function(){
var input = minusButton[i].nextElementSibling;
if(input.value < 2){
input.value = 1;
} else {
input.value = parseInt(input.value) - 1;
}
getTotalPrice();
}
})(i));
}
}

通過調用這個函數，我們就可以輕松的為每個商品卡片添加加、減按鈕，并且實現對數量的加減操作。 最后，讓我們來看一下結算頁面。在該頁面中，我們可以看到所有已經加入到購物車里的商品，以及購物車里的總價和結算按鈕。這個頁面最復雜的部分就在于結算過程了，首先需要判斷用戶是否勾選了購物車中的所有商品，然后再根據商品數量和單價來計算總價，最后彈出支付二維碼。下面是一個實現勾選商品后計算總價的函數：

function getTotalPrice(){
var cartWrapper = document.querySelector(".cart-list");
var selectedGoods = cartWrapper.querySelectorAll("input[type=checkbox]:checked");
var totalPrice = 0;
for(var i = 0;i < selectedGoods.length;i++){
var goodsItem = selectedGoods[i].parentNode.parentNode;
var goodsPrice = goodsItem.querySelector(".cart-price span").innerHTML;
var goodsCount = goodsItem.querySelector(".cart-count input").value;
totalPrice += parseFloat(goodsPrice) * parseInt(goodsCount);
}
var PriceShow = document.querySelector(".cart-totalPrice");
PriceShow.innerHTML = totalPrice.toFixed(2);
}

通過調用該函數，我們就可以實時計算出購物車中已勾選的商品的總價，并且將總價展示在結算頁面中。 綜上所述，JavaScript51購商城實例是一個非常注重細節的網站。其中充滿了各種JavaScript技巧和魔法，這些技巧和魔法使得網站更加完美。在我們學習JavaScript的過程中，也可以從這個網站中獲得靈感并借鑒優秀的代碼。