购物车结算功能JS

最新推荐文章于 2024-05-28 18:30:26 发布

Future_q

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量9.3k

点赞数 6

分类专栏： JS

本文链接：https://blog.csdn.net/Shmily____/article/details/81230179

版权

购物车结算功能

布局：

<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-=parseFloat(oEm.innerHTML);}
    	oStr.innerHTML=number;
    	oSpan.innerHTML=parseFloat(oEm.innerHTML)*number+"元"
    }
    aBtn[1].oncl

最低0.47元/天解锁文章

Future_q

关注

6
点赞
踩
27

收藏

觉得还不错? 一键收藏
2
评论
购物车结算功能JS

购物车结算功能布局：&lt;ul&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; …………&lt;/ul&gt;&lt;p&gt;&lt;p&gt;每一个li标签代表每一个商品里面有+ -商品数量
复制链接

扫一扫