代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;font-family: "微软雅黑";}
.content{
width: 1200px;
height: 352px;
margin: 0 auto;
margin-top: 200px;
}
.product-div{
width: 498px;
height: 350px;
float: left;
border: 1px solid #ccc;
}
.shopping-div{
width: 698px;
height: 350px;
float: left;
border: 1px solid #ccc;
}
.product-div li{
width: 120px;
height: 170px;
float: left;
border: 1px solid #CCCCCC;
margin-left: 3px;
margin-top: 2px;
padding: 0 20px;
cursor: pointer;
}
.product-div img{
width: 120px;
height: 120px;
}
.product-div p{
text-align: center;
}
.name{
font-size: 14px;
color: #333;
}
.price{
color: red;
font-size: 16px;
}
.shopping-div table{
width: 100%;
}
.shopping-div table tr{
text-align: center;
}
.shopping-div table img{
width: 60px;
height: 60px;
}
</style>
</head>
<body>
<div class="content">
<div class="product-div" id="product-div">
<ul>
<li>
<img src="../img/1.jpg"/>
<p class="name">荣耀V10</p>
<p class="price">2799</p>
</li>
<li>
<img src="../img/2.jpg"/>
<p class="name">苹果8</p>
<p class="price">5888</p>
</li>
<li>
<img src="../img/3.jpg"/>
<p class="name">小米MIX2</p>
<p class="price">3299</p>
</li>
<li>
<img src="../img/4.jpg"/>
<p class="name">联想小新</p>
<p class="price">6299</p>
</li>
<li>
<img src="../img/5.jpg"/>
<p class="name">戴尔笔记本</p>
<p class="price">5699</p>
</li>
<li>
<img src="../img/6.jpg"/>
<p class="name">小米笔记本</p>
<p class="price">4999</p>
</li>
</ul>
</div>
<div class="shopping-div">
<table id="tb">
<tr>
<th><input type="checkbox" />全选</th>
<th>商品图片</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<img src="../img/1.jpg" />
</td>
<td>
<span>商品</span>
</td>
<td>
<span>3299</span>
</td>
<td>
<a><</a>
<span>1</span>
<a>></a>
</td>
</tr>
</table>
</div>
</div>
<script>
//所有的需要在页面加载完成后执行的代码都写到页面加载事件中去
window.onload = function() {
//localStorage.removeItem("shopping");
//从localstorage中获取出当前存储的购物车json数据
var shoppingText = localStorage.getItem("shopping");
if(shoppingText == null) {
//当前localStorage还没有存储过购物车信息
//创建一个新的存储键值对
var shoppingJson = {};
shoppingJson.ps = [];
//html5的本地存储只能存储字符串
//所以在存储json数据之前,需要将json转为字符串
localStorage.setItem("shopping", JSON.stringify(shoppingJson));
} else {
//localstorage中已经保存了购物车信息
//需要从中取出所有的商品信息,循环添加到购物车表格中
var shoppingJson = JSON.parse(shoppingText);
for(var i = 0; i < shoppingJson.ps.length; i++) {
//向购物车表格中添加一行数据
var row = tb.insertRow(1);
//新增5列
var checkboxCell = row.insertCell();
checkboxCell.innerHTML = "<input type='checkbox'>";
var imgCell = row.insertCell();
imgCell.innerHTML = "<img src='" + shoppingJson.ps[i].img + "'>";
var nameCell = row.insertCell();
nameCell.innerHTML = "<span>" + shoppingJson.ps[i].name + "</span>";
var priceCell = row.insertCell();
priceCell.innerHTML = "<span>" + shoppingJson.ps[i].price + "</span>";
var numCell = row.insertCell();
numCell.innerHTML = "<a><</a><span>"+shoppingJson.ps[i].num+"</span><a>></a>";
}
}
//获取到商品列表中所有的li标签
var lis = document.getElementById("product-div").getElementsByTagName("li");
//循环所有的li标签动态注册双击事件
for(var i = 0; i < lis.length; i++) {
lis[i].ondblclick = function() {
//this表示绑定事件的这个对象 在此处表示双击的这一个li
//.children获取所有的元素节点
var imgsrc = this.children[0].src;
var name = this.children[1].innerHTML;
var price = this.children[2].innerHTML;
//循环购物车表格中所有的行判断是否已经存在该商品
var tb = document.getElementById("tb");
var rows = tb.rows;
var index = -1;
for(var l = 1; l < rows.length; l++) {
if(rows[l].cells[2].children[0].innerHTML == name) {
//记录下当前的行序号
index = l;
}
}
//判断记录下的行号,如果还是-1说明商品列表列表中没有该商品
if(index == -1) {
//向购物车表格中添加一行数据
var row = tb.insertRow(1);
//新增5列
var checkboxCell = row.insertCell();
checkboxCell.innerHTML = "<input type='checkbox'>";
var imgCell = row.insertCell();
imgCell.innerHTML = "<img src='" + imgsrc + "'>";
var nameCell = row.insertCell();
nameCell.innerHTML = "<span>" + name + "</span>";
var priceCell = row.insertCell();
priceCell.innerHTML = "<span>" + price + "</span>";
var numCell = row.insertCell();
numCell.innerHTML = "<a><</a><span>1</span><a>></a>";
//向localStorage的购物车数据中添加一个商品信息
//组装一个商品json数据
var productJson = {};
productJson.name = name;
productJson.img = imgsrc;
productJson.price = price;
productJson.num = 1;
//shoppingText是从localstorage中获取出的现有购物车数据
shoppingText = localStorage.getItem("shopping");
//从localStorage中获取出的数据是字符串类型的,需要先转为json才能进行后续操作
var shoppingJSON = JSON.parse(shoppingText);
shoppingJSON.ps.push(productJson);
//添加完成之后,只是将数据添加到了shoppingJSON中,还需要重新保存到localStorage里面去
localStorage.setItem("shopping", JSON.stringify(shoppingJSON));
} else {
//根据找到的这一行的下标从表格的所有行中获取到这一行的对象
//根据这一行的对象找到数量列
//从数量列中找到保存数量的span字标签
rows[index].cells[4].children[1].innerHTML = parseInt(rows[index].cells[4].children[1].innerHTML) + 1;
shoppingText = localStorage.getItem("shopping");
//从localStorage中获取出的数据是字符串类型的,需要先转为json才能进行后续操作
var shoppingJSON = JSON.parse(shoppingText);
for(var k=0;k<shoppingJSON.ps.length;k++){
if(shoppingJSON.ps[k].name==name){
shoppingJSON.ps[k].num=parseInt(shoppingJSON.ps[k].num)+1;
break;
}
}
//修改之后,重新保存到localStorage中
localStorage.setItem("shopping", JSON.stringify(shoppingJSON));
}
}
}
}
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手