购物页面在html怎么，html怎么铺满整个页面

大家一直都想了解购物页面在html怎么和一些html怎么铺满整个页面相关的话题，接下来小编带你走进购物页面在html怎么的案。

趁着过年假期，在家复习了之前学过的JS知识，用原生搭建了一个购物车模块。接下来我就整理一下我的想法，分享给大家。

一、功能及效果图

11废话不多说，首先上效果图如下

购物车功能效果图

12功能介绍

点击全选按钮，每件商品的复选框被勾选，同时计算商品数量和该商品的总价；

点击切换数量按钮，修改数量后自动计算产品的数量和价格；

货物的总数量和总价仅计算托运货物的数量和金额。

功能介绍完了，我来介绍一下这个购物车的编写步骤。

2、购物车的页面结构

21HTML代码

lt;表gt;lt;标题gt;购物车lt;/captiongt;lt;标题gt;lt;trgt;lt;--选中所有复选框--gt;lt;thgt;lt；输入类型=34；名称=34；id=34；选中/gt;lt;labelfor=34;gt;全选lt;/labelgt;lt;/thgt;lt;thgt;图片lt;/thgt;lt;thgt;产品名称lt;/thgt;lt;thgt;单位lt;/thgt;lt;thgt;单价/元lt;/thgt;lt;/theadgt;lt;tbodygt;lt;trgt;lt;tdgt;lt；输入类型=34；名称=34；值=34；检查/gt；lt;/tdgt;lt;tdgt;lt;ahref=34;gt;lt;imgsrc=34;替代=34；/gt;lt;/agt;lt;/tdgt;lt;tdgt;iPhone11lt;/tdgt;lt;tdgt;台lt;/tdgt;lt;td类=34;gt;4799lt;/tdgt;lt;tdgt;lt;输入类型=34;分钟=34；值=34；/gt;lt;/tdgt;lt;td类=34;gt;xxxxlt;lt;/trgt;lt;trgt;lt;tdgt;lt；输入类型=34；名称=34；值=34；检查/gt；lt;/tdgt;lt;tdgt;lt;ahref=34;gt;lt;imgsrc=34;替代=34；/gt;lt;/agt;lt;/tdgt;lt;tdgt;小米pro11lt;/tdgt;td类=34;gt;3999lt;/tdgt;lt;tdgt;lt;输入类型=34;分钟=34；值=34；/gt;lt;/tdgt;lt;td类=34;gt;xxxxlt;lt;/trgt;lt;trgt;lt;tdgt;lt；输入类型=34；名称=34；值=34；检查/gt；lt;/tdgt;lt;tdgt;lt;ahref=34;gt;lt;imgsrc=34;替代=34；/gt;lt;/agt;lt;/tdgt;lt;tdgt;MacBookProlt;/tdgt;lt;tdgt;台lt;/tdgt;lt;tdclass=34;gt;18999lt;/tdgt;lt;tdgt;lt;输入类型=34;分钟=34；值=34；/gt;lt;/tdgt;lt;tdclass=34;gt;xxxxlt;/lt;/trgt;lt;trgt;lt;tdgt;lt；输入类型=34；名称=34；值=34；检查/gt；lt;/tdgt;>lt;imgsrc=34;替代=34；/gt;lt;/agt;lt;/tdgt;lt;tdgt;小米75电视lt;/tdgt;td类=34;gt;5999lt;/tdgt;lt;tdgt;lt;输入类型=34;分钟=34；值=34；/gt;lt;/tdgt;lt;td类=34;gt;xxxxlt;lt;/trgt;lt;trgt;lt;tdgt;lt；输入类型=34；名称=34；值=34；检查/gt；lt;/tdgt;lt;tdgt;lt;ahref=34;gt;lt;imgsrc=34;替代=34；/gt;lt;/agt;lt;/tdgt;lt;tdgt;佳能90D单反相机lt;/tdgt;lt;tdgt;台lt;/tdgt;lt;td类=34;gt;9699lt;/tdgt;lt;tdgt;lt;输入类型=34;分钟=34；值=34；/gt;lt;/tdgt;lt;tdclass=34;gt;xxxxlt;/tdgt;lt;/trgt;lt;/tbodygt;lt;tfootgt;lt;trstyle=34;gt;lt;tdcolspan=34;gt;总计lt;/tdgt;lt;tdid=34;gt;xxxxlt;/tdgt;lt;tdid=34;gt;xxxxlt;/tdgt;lt;/trgt;lt;/tfootgt;lt;/tablegt;22CSS代码

tabletabletitletableth,tabletdtabletheadtr:first-of-typetableinput[type=34;]tabletbodytrtabletbodytr:hovertbodyimgtbodyinput[type=34;]按钮button:hover23效果图

购物车效果图

以上是一个简单的购物车页面的HTML和CSS样式代码。

3.完成相关JS代码

首先我们先完成选择和取消选择所有商品的功能，所以我们必须获取全选复选框元素和商品前面的复选框元素。代码如下

//获取所有复选框，所有商品都有独立的复选框constcheckAll=documentquerySelectorcheck-all39;item39;price39;bodyinput[type=number]39;price39;bodyinput[type=number]39;amount39;39;textContent=CheckSum;效果如上图所示。

下面开始计算所选商品的总金额，等于以上所有所选商品的总金额之和。计算出结果后，渲染到页面上。

//声明一个数组来存储每个选中项的总金额letcheckedPrice=[];checkedNumbersforEachitem,index=gt;checkPricepushitemPriceArr[index];//打印每个选中商品的总金额consolelogcheckedPrice;//计算选中商品的总金额letTotalAmount=checkPricereduceprev,curr=gt;prev+curr;//将所选商品的总金额渲染到页面documentquerySelectortotal-amount39;bodyinput[type=number]39;change39;自动计算；但我们会发现这里有一个小bug，就是如果勾选未选中的商品，则不会自动计算商品的数量和总价。原因很简单。不执行自动计算功能，只需要在两者的事件监听中添加自动计算功能即可。

checkAllonchange=ev=>;checkItemsforEachitem=>;itememonchange=ev=gt；写到这里，我们的购物车的所有功能就已经完成了。购物车模块看似不难，但实际上有很多陷阱，例如

在对获取到的元素节点进行操作时，我们有时需要先将其转换为数组，然后才能使用数组函数进行操作，因为我们

本文给大家介绍的一些关于购物页面在html怎么和html怎么铺满整个页面的相关题已解完毕，希望各位能够喜欢。