Web前端-购物车商城
Web前端－购物车商城
·
项目简介：该项目是跟随 b站动力节点 java老杜的夏令营前端小项目 跟随视频从头到结束的。
该项目内容包含基本的HTML/CSS/JavaScript知识点，对初学者初学前端有很大帮助，
能够很好的为初学者提供前端学习的思想，该项目功能只实现了视频学习中的功能，也 有很多需要修改和完善的地方，只提供初学者参考学习。
代码如下：ＨＴＭＬ＋（Ｓｃｒｉｐｔ）段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="car.css"/>
</head>
<body>
<script type="text/javascript">
function modifyCount(thisnode){
var userInput = thisnode.value;
var regExp= /^[1-9][0-9]*$/
var ok=regExp.test(userInput)
if(!ok){
thisnode.value=1;
}else{
if(thisnode.value > 64){
thisnode.value=1;
}
}
/* 修改条目的总价 */
/* 获取隐藏域的单价 */
var price = document.getElementById("price").value;
/* 计算总价 */
var total = price * thisnode.value
/* 将总价设置到div当中 */
var item_tatal_price = document.getElementById("item_total_price");
item_total_price.innerHTML="￥" + total;
}
function del(thisNode){
var ok = window.confirm("您确定要删除你的宝贝吗");
if(ok){
thisNode.parentNode.parentNode.remove()
}
}
function addProduct(thisNode){
var childNodes = thisNode.parentNode.childNodes;
var newCount;
var i;
for(i = 0 ; i < childNodes.length; i++){
if(childNodes[i].tagName == "INPUT"){
newCount = parseInt(childNodes[i].value) + 1;
break;
}
}
childNodes[i].value = newCount;
modifyCount(childNodes[i])
}
</script>
<div class="shops">
<!-- 第一个店铺 -->
<div class="shop">
<div class="header">
<input type="checkbox" class="shop_checkbox" />
<span class="shop_icon"></span>
<span class="shop_name">店铺：好好看服装店</span>
<span class="shop_wangwang_icon"></span>
</div>
<!-- 条目一 -->
<div class="item">
<!-- 条目的复选框 -->
<div class="item_checkbox">
<input type="checkbox" name="" id="" value="" />
</div>
<!-- 条目的图片 -->
<div class="item_img">
</div>
<!-- 条目的广告宣传 -->
<div class="promotion">
<!-- 宣传语 -->
<div class="promotion_content">
时尚雪纺衫女长袖2022春装新款内搭显瘦衬衫高档洋气小衫上衣打底
</div>
<!-- 三个小图标 -->
<div class="three_icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- sku -->
<div class="sku">
<!-- 颜色 -->
<div class="sku_color">
颜色分类:黑色
</div>
<!-- 尺寸 -->
<div class="sku_size">
尺码:xxl
</div>
</div>
<!-- 价格 -->
<div class="price">
<div class="price1">
<del>￥119.80</del>
</div>
<div class="price2">
￥59.90
<!-- 将单价隐藏起来 -->
<input type="hidden" name="" id="price" value="59.90" />
</div>
</div>
<!-- 数量 -->
<div class="num">
<span class="minus">-</span>
<input type="text" value="1" onkeyup="modifyCount(this)"/>
<span class="plus" onclick="addProduct(this)">+</span>
</div>
<!-- 条目总价 -->
<div id="item_total_price" class="item_total_price">
￥59.90
</div>
<!-- 操作 -->
<div class="operation">
<!-- 收藏 -->
<div class="favorites">
移入收藏夹
</div>
<!-- 删除 -->
<div class="del" onclick="del(this)">
删除
</div>
</div>
</div>
<!-- 条目二 -->
<div class="item">
<!-- 条目的复选框 -->
<div class="item_checkbox">
<input type="checkbox" name="" id="" value="" />
</div>
<!-- 条目的图片 -->
<div class="item_img">
</div>
<!-- 条目的广告宣传 -->
<div class="promotion">
<!-- 宣传语 -->
<div class="promotion_content">
时尚雪纺衫女长袖2022春装新款内搭显瘦衬衫高档洋气小衫上衣打底
</div>
<!-- 三个小图标 -->
<div class="three_icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- sku -->
<div class="sku">
<!-- 颜色 -->
<div class="sku_color">
颜色分类:黑色
</div>
<!-- 尺寸 -->
<div class="sku_size">
尺码:xxl
</div>
</div>
<!-- 价格 -->
<div class="price">
<div class="price1">
<del>￥119.80</del>
</div>
<div class="price2">
￥59.90
</div>
</div>
<!-- 数量 -->
<div class="num">
<span class="minus">-</span>
<input type="text" value="1" />
<span class="plus">+</span>
</div>
<!-- 条目总价 -->
<div class="item_total_price">
￥59.90
</div>
<!-- 操作 -->
<div class="operation">
<!-- 收藏 -->
<div class="favorites">
移入收藏夹
</div>
<!-- 删除 -->
<div class="del">
删除
</div>
</div>
</div>
</div>
<!-- 第二个店铺 -->
<div class="shop">
<div class="header">
<input type="checkbox" class="shop_checkbox" />
<span class="shop_icon"></span>
<span class="shop_name">店铺：好好看服装店</span>
<span class="shop_wangwang_icon"></span>
</div>
<!-- 条目一 -->
<div class="item">
<!-- 条目的复选框 -->
<div class="item_checkbox">
<input type="checkbox" name="" id="" value="" />
</div>
<!-- 条目的图片 -->
<div class="item_img">
</div>
<!-- 条目的广告宣传 -->
<div class="promotion">
<!-- 宣传语 -->
<div class="promotion_content">
时尚雪纺衫女长袖2022春装新款内搭显瘦衬衫高档洋气小衫上衣打底
</div>
<!-- 三个小图标 -->
<div class="three_icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- sku -->
<div class="sku">
<!-- 颜色 -->
<div class="sku_color">
颜色分类:黑色
</div>
<!-- 尺寸 -->
<div class="sku_size">
尺码:xxl
</div>
</div>
<!-- 价格 -->
<div class="price">
<div class="price1">
<del>￥119.80</del>
</div>
<div class="price2">
￥59.90
</div>
</div>
<!-- 数量 -->
<div class="num">
<span class="minus">-</span>
<input type="text" value="1" />
<span class="plus">+</span>
</div>
<!-- 条目总价 -->
<div class="item_total_price">
￥59.90
</div>
<!-- 操作 -->
<div class="operation">
<!-- 收藏 -->
<div class="favorites">
移入收藏夹
</div>
<!-- 删除 -->
<div class="del">
删除
</div>
</div>
</div>
<!-- 结算 -->
<div class="checkout">
<!-- 全选 -->
<div class="checkalldiv">
<!-- 全选 -->
<span class="checkall">
<input type="checkbox" /> 全选
</span>
<!-- 删除选中的 -->
<span class="delchecked">
删除
</span>
</div>
<div class="checkout2">
已选商品<span class="checkedcount">0</span>件
<span class="totaltext">合计(不含运费):</span>
<span class="total_price">0.00</span>
<span class="checkoutbtn">结 算</span>
</div>
</div>
</div>
</body>
</html>ＣＳＳ代码段
/* 类选择器可以写多个，使用逗号隔开 */
.shop_icon, .shop_wangwang_icon, .three_icon span {
width: 15px;
height: 15px;
background-color: aqua;
/* 以块的形式展现出来，但是不会独占行 */
display: inline-block;
}
/* 设置所有店铺的样式 */
.shops {
width: 1100px;
background-color:aliceblue;
/* 设置div居中 */
margin-left: auto;
margin-right: auto;
/* 字号大小 */
font-size: 0.8125rem;
color:black;
}
/* 设置店铺名称的位置 ，使其对齐*/
.shop_name {
position: relative;
bottom: 0.1875rem;
}
/* 设置店铺头上4个元素的右外补丁 */
.shop_checkbox, .shop_wangwang_icon, .shop_name, .shop_icon{
margin-right: 0.625rem;
}
/* 设置条目的样式 */
.item{
/* 弹性布局 */
display: flex;
/* 设置背景颜色 */
background-color: #FAFAFA;
/* 设置边框 */
border: 0.0625rem solid #DAD9D9;
/* 给item条目添加一个内补丁 */
padding: 1.25rem;
}
/* 设置商品图片的样式 */
.item_img{
width: 6.25rem;
height: 6.25rem;
background-color: #00FFFF;
}
/* 设置header向下的补丁 */
.header{
margin-bottom: 0.625rem;
}
/* 设置条目复选框，条目图片的右外补丁 */
.item_checkbox{
margin-right: 0.625rem;
}
.item_img{
margin-right: 0.625rem;
}
.promotion{
/* 弹性布局，默认是横向布局 */
display: flex;
/* 纵向布局，把弹性布局的默认横向改为纵向布局 */
flex-direction: column;
/* 调整内容，两端对齐 */
justify-content: space-between;
/* 调整div盒子宽度 */
width: 15.625rem;
margin-right: 3.125rem;
}
/* sku商品样式 */
.sku{
/* 右外补丁 */
margin-right: 9.375rem;
}
/* 单价price右边添加补丁 */
.price{
margin-right: 2.8125rem;
font-weight: 600;
}
/* 价格一灰色 */
.price1{
color: pink;
}
/* input输入框：数量 .空格后面是跟子元素*/
.num input{
width: 1.875rem;
height: 1.5625rem;
/* 让文本框中的文本居中 */
text-align: center;
}
/* num和总价的右外补丁 */
.num, .item_total_price{
margin-right: 3.125rem;
}
/* 总价颜色修改 */
.item_total_price{
font-weight: 600;
color: orangered;
}
.num{
background-color: pink;
height: 1.875rem;
}
.shop{
margin-top: 1.875rem;
}
.checkout{
display: flex;
justify-content: space-between;
background-color: pink;
height: 2.5rem;
margin-top: 1.25rem;
padding: 1.25rem;
}
.checkall{
margin-right: 6.25rem;
}
.checkout2{
margin-left: 1.875rem;
}
.checkoutbtn, .totaltext{
margin-left: 1.875rem;
}
.checkedcount, .total_price{
font-size: 1.25rem;
font-weight: 600;
color: orangered;
}
.checkoutbtn{
width: 6.25rem;
height: 58px;
background-color:#555555;
display: inline-block;
position: relative;
font-size: 1.25rem;
color: #00FFFF;
text-align: center;
/* 设置行间距 */
line-height: 3.75rem;
}
.checkout2{
position: relative;
bottom: 1.25rem;
}
.del:hover, .plus:hover, .minus:hover{
color: #F31919;
cursor: pointer;
}
效果图
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
5
0- 0
已为社区贡献2条内容
所有评论(0)