这是我的index.html代码内容：<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>京东商城 - 购物车</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<header></header>
<div class="content">
<div class="t-head"><h4>全部商品</h4></div>
<div class="sct">
<div class="thead">
<div><input type="checkbox" class="selectAll" /></div>
<div>全选</div>
<div>商品</div>
<div>单价</div>
<div>数量</div>
<div>小计</div>
<div>操作</div>
</div>
<div id="listBox">
<div class="item">
<div><input type="checkbox" name="check" /></div>
<div><img src="img/
product5.jpg" height="100" /></div>
<div>光明 纯牛奶250mL*24盒</div>
<div>¥<span class="price">58.80</span></div>
<div><input type="number" value="1" min="1" /></div>
<div>¥<span class="subtotal">58.80</span></div>
<div><a href="#" class="del">删除</a></div>
</div>
<div class="item">
<div><input type="checkbox" name="check" /></div>
<div><img src="img/
product5.jpg" height="100" /></div>
<div>光明 纯牛奶250mL*24盒</div>
<div>¥<span class="price">58.80</span></div>
<div><input type="number" value="1" min="1" /></div>
<div>¥<span class="subtotal">58.80</span></div>
<div><a href="#" class="del">删除</a></div>
</div>
<div class="item">
<div><input type="checkbox" name="check" /></div>
<div><img src="img/
product5.jpg" height="100" /></div>
<div>光明 纯牛奶250mL*24盒</div>
<div>¥<span class="price">58.80</span></div>
<div><input type="number" value="1" min="1" /></div>
<div>¥<span class="subtotal">58.80</span></div>
<div><a href="#" class="del">删除</a></div>
</div>
<div class="item">
<div><input type="checkbox" name="check"></div>
<div><img src="img/
product1.jpg" height="100"></div>
<div>新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15i5-10210U 16 512G独显灰</div>
<div>¥<span class="price">5239.00</span></div>
<div><input type="number" value="1" min="1"></div>
<div>¥<span class="subtotal">5239.00</span></div>
<div><a href="#" class="del">删除</a></div>
</div>
</div>
<div class="countBox">
<div><input type="checkbox" class="selectAll" /></div>
<div>全选 <a href="#" id="delcheck">删除选中的商品</a></div>
<div>
<span class="gray">总价:</span> ￥<span id="totalprice">0.00</span>
</div>
<div>去结算</div>
</div>
</div>
</div>
<div class="p-head"><h5>猜你喜欢</h5></div>
<div class="
productsBox">
<div class="
product">
<img src="img/
product1.jpg" height="100" />
<p>
新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15
i5-10210U 16 512G独显灰
</p>
<div>¥5239.00</div>
<button class="add-to-cart">
<i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车
</button>
</div>
<div class="
product">
<img src="img/
product1.jpg" height="100" />
<p>
新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15
i5-10210U 16 512G独显灰
</p>
<div>¥5239.00</div>
<button>
<i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车
</button>
</div>
</div>
<footer></footer>
<script src="js/shoppingcar.js"></script>
</body>
<script>
// 等待DOM加载完毕
document.addEventListener('DOMContentLoaded', function () {
// 全选/取消全选功能
const selectAllCheckboxes = document.querySelectorAll('.selectAll');
const itemCheckboxes = document.querySelectorAll('input[name="check"]');
selectAllCheckboxes.forEach(function (checkbox) {
checkbox.addEventListener('change', function () {
itemCheckboxes.forEach(function (itemCheckbox) {
itemCheckbox.checked = checkbox.checked;
});
calculateTotal();
});
});
// 监听每个商品的复选框变化
itemCheckboxes.forEach(function (checkbox) {
checkbox.addEventListener('change', function () {
const allChecked = Array.from(itemCheckboxes).every(checkbox => checkbox.checked);
selectAllCheckboxes.forEach(function (selectAllCheckbox) {
selectAllCheckbox.checked = allChecked;
});
calculateTotal();
});
});
// 数量变化时更新小计
document.getElementById('listBox').addEventListener('change', function (event) {
if (event.target.tagName === 'INPUT' && event.target.type === 'number') {
const item = event.target.parentElement.parentElement;
updateSubtotal(item);
}
});
// 删除商品
document.getElementById('listBox').addEventListener('click', function (event) {
if (event.target.classList.contains('del')) {
event.preventDefault();
const item = event.target.parentElement.parentElement;
item.remove();
calculateTotal();
}
});
// 计算总价
function calculateTotal() {
let total = 0;
itemCheckboxes.forEach(function (checkbox) {
if (checkbox.checked) {
const item = checkbox.parentElement.parentElement;
const price = parseFloat(item.querySelector('.price').textContent);
const quantity = parseInt(item.querySelector('input[type="number"]').value);
total += price * quantity;
}
});
document.getElementById('totalprice').textContent = total.toFixed(2);
}
// 更新小计
function updateSubtotal(item) {
const price = parseFloat(item.querySelector('.price').textContent);
const quantity = parseInt(item.querySelector('input[type="number"]').value);
const subtotal = price * quantity;
item.querySelector('.subtotal').textContent = subtotal.toFixed(2);
calculateTotal();
}
// 删除选中的商品
document.getElementById('delcheck').addEventListener('click', function (event) {
event.preventDefault();
itemCheckboxes.forEach(function (checkbox) {
if (checkbox.checked) {
const item = checkbox.parentElement.parentElement;
item.remove();
}
});
calculateTotal();
});
document.querySelectorAll('.add-to-cart').forEach(function(button) {
button.addEventListener('click', function(event) {
event.preventDefault();
const
product = button.closest('.
product');
const imgSrc =
product.querySelector('img').src;
const
productName =
product.querySelector('p').textContent;
const price = parseFloat(
product.querySelector('div').textContent);
// 检查商品是否已存在于购物车
let existingItem = document.querySelector(`.item img[src="${imgSrc}"]`).parentElement;
if (existingItem) {
// 如果已存在，则增加数量
const quantityInput = existingItem.querySelector('input[type="number"]');
quantityInput.value = parseInt(quantityInput.value) + 1;
updateSubtotal(existingItem);
} else {
// 如果不存在，则添加新商品
const newItem = createCartItem(imgSrc,
productName, price);
document.getElementById('listBox').appendChild(newItem);
}
calculateTotal();
});
});
// 创建购物车中的商品项
function createCartItem(imgSrc,
productName, price) {
const item = document.createElement('div');
item.className = 'item';
item.innerHTML = `
<div><input type="checkbox" name="check" checked /></div>
<div><img src="${imgSrc}" height="100" /></div>
<div>${
productName}</div>
<div>¥<span class="price">${price.toFixed(2)}</span></div>
<div><input type="number" value="1" min="1" /></div>
<div>¥<span class="subtotal">${price.toFixed(2)}</span></div>
<div><a href="#" class="del">删除</a></div>
`;
// 为新添加的删除按钮
和小计数量添加事件监听
item.querySelector('.del').addEventListener('click', function(event) {
event.preventDefault();
item.remove();
calculateTotal();
});
item.querySelector('input[type="number"]').addEventListener('change', function() {
updateSubtotal(item);
});
return item;
}
});
</script>
</html>
，不过这段代码不是很正确，有些功能未正确实现，这是我的
product.json:{
"status": "success",
"data": [
{
"name": "新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15i5-10210U 16 512G独显灰",
"img": "
product1.jpg",
"price": "5239.00"
},
{
"name": "新款Huawei/华为折叠手机mates xs5g版大屏双屏全面屏双面屏官方旗舰店对折手机可折叠屏 Mate XS折叠",
"img": "
product2.jpg",
"price": "20980.00"
},
{
"name": "
华为智慧屏V
55i-A
55英寸 HEGE-
550 4K超薄全面屏液晶电视机 多方视频通话AI升降摄像头 4GB+64GB 星际黑",
"img": "
product3.jpg",
"price": "3999.00"
},
{
"name": "华为荣耀智能手表WATCH Magic运动男女2
Pro手环定位NFC支付陶瓷版（流沙杏）",
"img": "
product4.jpg",
"price": "699.00"
}
]
}它位于C:\Users\金邦鑫\Downloads\京东仿制效果\京东仿制效果\js\
products.json，其中index.html要获取
product.json中的数据实现内容数据的加载，你还要实现script中的全选，删除等等代码功能，注意仅仅实现script中的代码内容
本文对比了华为智慧屏V55i与荣耀智慧屏/PRO的配置参数，包括外观设计、音质、硬件性能等方面。华为智慧屏V55i在内存、音质等方面表现出色，内置AI摄像头支持多种智能功能，性价比较高。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
