购物车结算功能JS

最新推荐文章于 2025-07-10 15:49:12 发布

原创

最新推荐文章于 2025-07-10 15:49:12 发布 · 9.7k 阅读

收录于

本文介绍了如何使用JavaScript实现购物车的结算功能，包括商品数量的加减、小计计算，以及展示商品总件数、总价和最贵商品价格。通过逐步封装函数，实现了购物车布局和各项功能。

购物车结算功能

布局：

<ul>

…………

</ul>

<p><p>

每一个li标签代表每一个商品里面有+ -商品数量功能商品单价以及小计

P标签中实现商品总件数商品总价格已经购买的商品中最贵的价格是多少

实现思路：

第一步：首先完成一个商品的+ -数量及小计功能

代码：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<ul id="list">
	<li>
  	<input type="button" value="-" />
    <strong>0</strong>
  	<input type="button" value="+" />
    单价：<em>12.5元</em>
    小计：<span>0元</span>
    </li>
</ul>

<p>
商品合计共：<span>0</span>件，共花费了：<span>0</span>元<br />
所购商品中最贵的商品单价是：<span>0</span>元
</p>	
<script type="text/javascript">
	var aBtn=document.getElementsByTagName('input');//加减按钮
	var oStr=document.getElementsByTagName("strong")[0];//数量
	var oSpan=document.getElementsByTagName('span')[0];//小计
	var oEm=document.getElementsByTagName('em')[0];//单价
	var number=parseFloat(oStr.innerHTML);
	var sumprice=0;//小计
    aBtn[0].onclick=function(){
    	if(number>0){number--;sumprice-=pars