JavaScript实战之购物车案例

最新推荐文章于 2022-10-12 19:22:28 发布

原创

最新推荐文章于 2022-10-12 19:22:28 发布 · 1.9k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

这篇博客记录了使用JavaScript实现购物车中单选框和全选框的关联控制。通过HTML结构、CSS样式初始化和JS代码实现，详细阐述了页面布局、表格样式以及全选功能的逻辑设计。重点在于点击全选框时如何影响所有单选框的状态，以及在单选框变化时如何同步全选框的选中状态。

这个是通过网上视频案例学习，然后，自己想整理一下页面书写流程文档。

show样式：

在这里插入图片描述

HTML代码结构+CSS结构

初始化css样式：

	* {
   
   
	    margin: 0;
	    padding: 0;
	}
	a {
   
   
	    color: #666;
	    text-decoration: none;
	}
	body {
   
   
	    padding: 20px;
	}

此页面主要分为两个部分：商品表格部分+合计结算等的页脚部分
在这里插入图片描述
对应代码：

表格

表格总体样式：

table {
   
   
    border-collapse: collapse;     //边框合并为单一边框
    border-spacing: 0;             //相邻单元格边框间距，因collapse的存在，无影响
    border: 0;                     //边框宽度，在此处没有影响
    text-align: center;
    width: 937px;
}

表格头部：
在这里插入图片描述
对应样式：

th, td {
   
   
    border: 1px solid #CADEFF;
}
th {
   
   
    background: #e2f2ff;
    border-top: 3px solid #a7cbff;
    height: 30px;
}

表格主体内容部分
每一行代码都差不多就是图片文字数字更改一下
在这里插入图片描述

<tr>
	<td class="checkbox"><input type="checkbox" class="check-one check" /></td>
	<td class="goods"><img src="img/1.jpg" alt="" /><span>用JS实现购物车特效</span></td>
	<td class="price">5999.88</td>
	<td class="count">
		<span class="reduce"></span>
		<input class="count-input" type="text" value="1" />
		<span class="add">+</span>
	</td>
	<td class="subtotal">5999.88</td>
	<td class="operation"><span class="delete">删除</span></td>
</tr>

对应的样式：

td {
   
   
    padding: 10px;
    color: #444;

最低0.47元/天解锁文章

JavaScript实战之购物车案例

show样式：

HTML代码结构+CSS结构

表格

1 条评论