前言：
兄弟们，我来更新了。之前不是写了一篇文章是关于这个HTML+CSS仿写京东购物车静态页面附代码（web前端期末大作业）的，那个当时还没有学习js就只是写了一个静态页面。今天把js加上了，可以进行一些操作可以看见一些效果了。比如：全选，数量加减，计算价格，删除等等。就是表现的比之前那个纯静态页面优秀了一点，当然了也是刚学还是比较垃圾的一个页面（水平有限请见谅，希望可以蒙混过关）仅供学习参考。
京东购物车页面（官方的效果）
仿造的效果
加入js后可以实现的一些逻辑和操作效果
正文
好了我们废话不多说我们开整，以下是代码部分
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/jd.css"/>
<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
<script type="text/javascript" src="js/jd.js"></script>
</head>
<body>
<!--导航开始-->
<div class="nav">
<div class="warp">
<ul class="nav_ul1">
<li><a href=""><i class="iconfont">󰄫</i> 京东首页</a></li>
<li><a href="">配送到：北京</a></li>
</ul>
<ul class="nav_ul2">
<li><a href="">洋洋宝贝</a><span>|</span></li>
<li><a href="">我的订单</a><span>|</span></li>
<li><a href="">我的京东</a><span>|</span></li>
<li><a href="">京东会员</a><span>|</span></li>
<li><a href="">企业采购</a><span>|</span></li>
<li><a href="">京东手机</a><span>|</span></li>
<li><a href="">关注京东</a><span>|</span></li>
<li><a href="">客户服务</a><span>|</span></li>
<li><a href="">网站导航</a></li>
</ul>
</div>
</div>
<!-- 导航结束 -->
<!--搜索框开始-->
<div class="search">
<div class="warp">
<img src="img/jdlogo.png"/>
<ul class="search_1">
<li><a href="">购物车</a></li>
</ul>
<div class="search_div">
<input type="text" class="search_text"/>
<input type="button" value="搜索" class="search_but"/>
</div>
</div>
</div>
<!--搜索框结束-->
<!--标题开始-->
<div class="title warp">
<h3>全部商品</h3>
<div>
<span>配送到</span>
<select>
<option>昌平区</option>
<option>顺义区</option>
<option>大兴区</option>
<option>朝阳区</option>
<option>海淀区</option>
<option>石景山区</option>
<option>东城区</option>
<option>房山区</option>
<option>通州区</option>
<option>丰台区</option>
</select>
</div>
</div>
<!--标题结束-->
<!--显示菜单的开始-->
<div class="tips warp">
<ul>
<li>
<input type="checkbox" name="fav" id="all" onclick="checkTest1(this),checkTest2()"/>
全选
</li>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
<li>操作</li>
</ul>
</div>
<!--显示菜单的结束-->
<!--商品的详情展示开始-->
<div class="info warp" data-product-id="1">
<ul>
<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></li>
<li class="info_2"><img src="img/zhuzi.jpg" width="100px"/></li>
<li class="info_3">
<a>海蒂极简系列9.5-10mm18K金淡水珍珠耳钉素耳饰女附证书七夕礼物</a>
</li>
<li class="info_4"><a>白色 9.5-10mm [日常百搭]</a></li>
<li class="info_5"><a>￥439.00</a></li>
<li class="info_6">
<button class="but_1" onclick="checkTest3(this, -1, 1),checkTest2()">-</button>
<input type="text" name="quantity" class="quantity" value="1" data-product-id="1" />
<button class="but_2" onclick="checkTest3(this, 1, 1),checkTest2()">+</button>
</li>
<li class="info_7"><span class="totalPrice" data-product-id="1">￥439.00</span></li>
<li class="info_8">
<button class="but_3">
<a href="javascript:void(0)" onclick="checkTest4(this),checkTest2()">删除</a>
</button><br />
<button class="but_4">
<a>移入关注</a>
</button>
</li>
</ul>
</div>
<div class="info warp" data-product-id="2">
<ul>
<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()" /></li>
<li class="info_2"><img src="img/miphone.jpg" width="100px"/></li>
<li class="info_3">
<a>小米 Redmi K70 全网通5G手机 16GB+1TB 墨羽 ZG</a>
</li>
<li class="info_4"><a>墨羽 16GB+1TB</a></li>
<li class="info_5"><a>￥3129.0</a></li>
<li class="info_6">
<button class="but_1" onclick="checkTest3(this, -1, 2),checkTest2()">-</button>
<input type="text" name="quantity" class="quantity" value="1" data-product-id="2" />
<button class="but_2" onclick="checkTest3(this, 1, 2),checkTest2()">+</button>
</li>
<li class="info_7"><span class="totalPrice" data-product-id="2">￥3129.00</span></li>
<li class="info_8">
<button class="but_3">
<a href="javascript:void(0)" onclick="checkTest4(this),checkTest2()">删除</a>
</button><br />
<button class="but_4">
<a>移入关注</a>
</button>
</li>
</ul>
</div>
<div class="info warp" data-product-id="3">
<ul>
<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></li>
<li class="info_2"><img src="img/camera.jpg" width="100px"/></li>
<li class="info_3">
<a>小米摄像头C300双摄版高清无线摄像头监控家用室内智能摄像机手机远程监</a>
</li>
<li class="info_4"><a>【套餐一】小米摄像头+64G内存卡+吊装支架</a></li>
<li class="info_5"><a>￥319.00</a></li>
<li class="info_6">
<button class="but_1" onclick="checkTest3(this, -1, 3),checkTest2()">-</button>
<input type="text" name="quantity" class="quantity" value="1" data-product-id="3" />
<button class="but_2" onclick="checkTest3(this, 1, 3),checkTest2()">+</button>
</li>
<li class="info_7"><span class="totalPrice" data-product-id="3">￥319.00</span></li>
<li class="info_8">
<button class="but_3">
<a href="javascript:void(0)" onclick="checkTest4(this),checkTest2()">删除</a>
</button><br />
<button class="but_4">
<a>移入关注</a>
</button>
</li>
</ul>
</div>
<!--商品的详情展示结束-->
<!--结算开始-->
<div class="balance warp">
<ul class="balance_ul1">
<li>
<input type="checkbox" name="fav" id="" value="" onclick="checkTest1(this),checkTest2()" />
全选
</li>
<li><a>删除选中商品</a></li>
<li><a>移入关注</a></li>
<li><a>清理购物车</a></li>
</ul>
<ul class="balance_ul2">
<li><a>已选择<span id="snum">1</span>件商品</a></li>
<li><a>总价<span id="zongz">￥12</span></a></li>
<li>
<button class="butt">去结算</button>
</li>
</ul>
</div>
<!--结算结束-->
</body>
</html>css代码
jd.css
.nav {
height: 30px;
background-color: #f1f1f1;
}
.warp {
width: 1000px;
margin: 0px auto;
}
.nav_ul1, .nav_ul2 > li {
float: left;
}
.nav_ul1 li {
float: left;
line-height: 30px;
margin-right: 20px;
}
.nav_ul1 a, .nav_ul2 a, .nav_ul2 span {
font-size: 12px;
color: grey;
}
.nav_ul2 {
float: right;
}
.nav_ul2 li, .nav_ul2 span {
line-height: 30px;
margin-left: 10px;
}
.nav a:hover {
color: red;
}
/*搜索框开始*/
.search{
margin-top: 20px;
}
.search_1 li a{
float: left;
margin-top: 20px;
margin-left:20px;
font-size: 16px;
color: black;
}
.search img{
/*清除之前的所有样式*/
clear: both;
float: left;
}
.search_div{
float: right;
margin-top: 25px;
}
.search_text{
width: 265px;
height: 21px;
border: 3px solid #c91623;
position: relative;
left: 4px;
top: -1px;
}
.search_but{
width: 51px;
height: 28px;
background-color: #c91623;
border: 0px;
color: #FFFFFF;
}
/*搜索框结束*/
/*标题的开始*/
.title{
margin-top: 130px;
}
.title h3{
float: left;
font-size: 23px;
color: #c91623;
}
.title div{
float: right;
font-size: 14px;
color: gray;
}
/*标题的结束*/
/*显示菜单的开始*/
.tips{
width: 1000px;
height: 50px;
background-color: #f1f1f1;
margin-top: 165px;
border: 1px solid #e9e9e9;
}
.tips li{
float: left;
line-height: 50px;
font-size: 12px;
color: gray;
}
.tips li:nth-child(1){width: 90px;border-top: 3px solid #c91623;}
.tips li:nth-child(2){margin-left: 80px}
.tips li:nth-child(3){margin-left: 430px}
.tips li:nth-child(4){margin-left: 83px}
.tips li:nth-child(5){margin-left: 110px}
.tips li:nth-child(6){margin-left: 50px}
/*显示菜单的结束*/
/*商品详情展示开始*/
.info{
width: 1000px;
height: 130px;
background-color: #fff4e8;
border:1px solid gray;
margin-top: 20px;
border-top: 3px solid gray;
}
.info li{
float:left;
margin-top: 13px;
}
.info a{
font-size: 12px;
color: #333333;
}
.info_1{
margin-left: 23px;
}
.info_2{
margin-left: 15px;
border:1px solid gray;
}
.info_3{
margin-left: 30px;
width: 270px;
height: 20px;
}
.info_3 a:hover{
color: #c91623;
}
.info_4{
margin-left: 30px;
width: 100px;
height: 20px;
}
.info_5{
margin-left: 30px;
}
.info_6{
margin-left: 40px;
}
.info_6 input{
width: 30px;
height: 13px;
text-align: center;
position: relative;
line-height: 11px; /* 行高与按钮高度相同，实现垂直居中 */
top:-2px;
left: -5px;
}
.info_6 button{
width: 18px;
height: 18px;
}
.but_1{
position: relative;
text-align: center; /* 文本水平居中 */
line-height: 11px; /* 行高与按钮高度相同，实现垂直居中 */
top:-2px;
left: 1px;
}
.but_2{
position: relative;
text-align: center; /* 文本水平居中 */
line-height: 11px; /* 行高与按钮高度相同，实现垂直居中 */
top:-2px;
left: -11px;
}
.info_7{
margin-left: 50px;
font-weight: bold;
}
.info_8{
margin-left: 130px;
}
.but_3{
position: relative;
top:-30px
}
.but_4{
position: relative;
top:-26px
}
/*商品详情展示结束*/
/*结算模块的开始*/
.balance{
width: 1000px;
height: 50px;
border: 1px solid gray;
margin-top: 20px;
}
.balance_ul1,.balance_ul1>li,.balance_ul2>li{
float: left;
line-height: 50px;
margin-left: 11px;
}
.balance_ul2{
float: right;
}
.butt{
width: 100px;
height: 50px;
background-color: #c91623;
border: 0px ;
color: #FFFFFF;
font-size: 20px;
font-weight: bold;
}
.balance span{
font-size: 25px;
color: #c91623;
font-weight: bold;
}
/*结算模块的结束*/reset.css
/*清除所有的初始格式*/
body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{margin:0px;padding: 0px;}
/*位置居中，且设置字体大小为14px*/
body{text-align: center;font-size: 14px}
/*去重超链接的下划线*/
a{text-decoration: none;}
li{list-style: none;}js代码
jd.js
//获得所有的多选框对象
var fav=document.getElementsByName("fav");
//判断是否全选的操作
function checkTest1(th){
var flag=th.checked;
for(var i in fav) {
fav[i].checked = flag;
}
}
function checkTest2() {
var fav = document.getElementsByName('fav'); // 获取所有名为fav的复选框
var flag = true;
var zong = 0;
var spNum = 0;
// 检查是否所有商品都被选中
for (var i = 1; i < fav.length - 1; i++) {
if (!fav[i].checked) {
flag = false;
break;
}
// 如果选中，计算价格和数量
var productDiv = fav[i].closest('.info'); // 获取最近的.info元素
var priceText = productDiv.querySelector('.info_7 .totalPrice').innerText.split('￥')[1];
var quantityInput = productDiv.querySelector('.info_6 .quantity').value;
zong += Number(priceText) * Number(quantityInput);
spNum += Number(quantityInput);
}
// 更新全选框状态
fav[0].checked = flag;
// 注意：假设最后一个复选框不是用于商品的，所以这里不设置
// 更新显示的总价和总数量
document.getElementById("zongz").innerText = '￥' + zong.toFixed(2);
document.getElementById("snum").innerText = spNum;
// 如果全未选中，则总价和总数量应为0
if (spNum === 0) {
document.getElementById("zongz").innerText = '￥0.00';
document.getElementById("snum").innerText = 0;
}
}
function checkTest3(button, increment, productId) {
// 找到输入框
var input = document.querySelector('.info[data-product-id="' + productId + '"] .quantity');
// 获取当前值并转换为数字
var currentValue = Number(input.value);
// 更新值，注意检查最小值
var newValue = currentValue + increment;
if (newValue < 0) {
newValue = 0; // 不允许数量小于0
}
// 更新输入框的值
input.value = newValue;
// 找到单价和总价元素
var unitPriceElement = document.querySelector('.info[data-product-id="' + productId + '"] .info_5 > a'); // 假设单价存储在这里，需要根据实际HTML结构调整
var totalPriceElement = document.querySelector('.info[data-product-id="' + productId + '"] .totalPrice');
// 获取单价（这里需要根据实际HTML结构调整选择器）
var unitPrice = parseFloat(unitPriceElement.textContent.replace('￥', ''));
// 计算总价格
var totalPrice = unitPrice * newValue;
// 更新总价显示
totalPriceElement.textContent = '￥' + totalPrice.toFixed(2);
}
//删除指定的节点
function checkTest4(th) {
// 使用 closest 方法找到最近的带有 class="info warp" 的 div 元素
var div = th.closest('.info.warp');
if (div) {
div.remove();
}
}结尾
以上就是我的全部代码，一点一点敲的，希望对你们有帮助。
本文已经添加了js代码对其中的动态效果功能进行了完善，当然我完善的并不是很好，初学者水平有限见谅先凑合看吧。感谢观看，如果你能看到这里或者本文对你有一点点帮助请点赞收藏，再次感谢大家。如果需要项目源码压缩包，详细见资源绑定。
扫一扫
3083
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
