JavaScript51购商城实例

发布时间：2024-12-31 以下文章来源于网友投稿，内容仅供参考！

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的过程中，也可以从这个网站中获得灵感并借鉴优秀的代码。