加入购物车页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#addGoodContent{
border-radius: 5px;
padding: 10px;
border: 1px solid #000;
line-height: 30px;
width: 400px;
}
#addGoodContent>span{
display: inline-block;
width: 100px;
letter-spacing: 5px;
}
#goodList{
overflow: hidden;
margin: 10px 50px;
}
.item{
padding: 10px;
float: left;
width: 372px;
height: 154px;
overflow: hidden;
color: #333;
background-color: #f7f9fa;
border: 1px solid #f7f9fa;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
cursor: pointer;
display: flex;
flex-direction: row;
}
.left{
margin-right: 10px;
}
.left>img{
width: 150px;
height: 150px;
}
.right>h4{
color: #333;
font-size: 18px;
line-height: 23px;
margin: 5px 0;
}
.right>p{
font-size: 14px;
line-height: 22px;
height: 80px;
}
.right span{
color: red;
}
</style>
</head>
<body>
<!-- 添加商品 -->
<h2>添加商品</h2>
<div id="addGoodContent">
<span>商品名</span> <input type="text"><br>
<span>商品价格</span> <input type="text"><br>
<span>商品详情</span> <br> <textarea type="text"></textarea><br>
<span style="width: 150px;">商品的图片</span> <input type="text"><br>
<button id="save">添加商品</button>
</div>
<h2>商品列表</h2>
<ul id="goodList">
</ul>
<a href="./购物车1.html">去购物车页面</a>
<script>
//加入商品的功能 cookie来存储的 （大小只有4kb）
//localStorage 本地存储 他和cookie都是位于浏览器上 但是俩个的大小和特性不一样（5M）
function addGood(goodName,goodPrice,info,imgUrl){
//先取出商品列表本身有的数据
var goodList = localStorage.getItem('goodList')?JSON.parse(localStorage.getItem('goodList')):[]
//生成一个id
var id = Date.now()+Math.random().toFixed(2)
//初始化一个对象 存储对应的数据
var good = {
id,
goodName,
goodPrice,
info,
imgUrl
}
//加给localStroage
goodList.push(good)
addGoodToUl(good)
localStorage.setItem("goodList",JSON.stringify(goodList))
}
//获取ul
var ul = document.getElementById('goodList')
randerGoodList()
//给按钮添加事件
document.querySelector('#save').onclick = function(){
//获取所有输入的内容
var inputs = document.querySelectorAll('input')
var info = document.querySelector('textarea').value
//调用添加的方法
addGood(inputs[0].value,Number(inputs[1].value),info,inputs[2].value)
}
//商品列表渲染的功能
function randerGoodList(){
//根据localstroage里面存的数据 进行渲染
var goodList = localStorage.getItem('goodList')?JSON.parse(localStorage.getItem('goodList')):[]
//遍历这个数组进行渲染
for(var good of goodList){
addGoodToUl(good)
}
}
function addGoodToUl(good){
ul.innerHTML += `
<li class="item">
<div class="left">
<img src="${good.imgUrl}" alt="">
</div>
<div class="right">
<h4>${good.goodName}</h4>
<p>${good.info}</p>
<div>
<span>￥<b>${good.goodPrice}</b></span>
<button onclick="addCar(${good.id})">加入购物车</button>
</div>
</div>
</li>
`
}
//加入购物车的功能
function addCar(id){
//通过id取出对应的元素
var item = {}
var goodList = localStorage.getItem('goodList')?JSON.parse(localStorage.getItem('goodList')):[]
//遍历这个数组进行渲染
for(var good of goodList){
if(id == good.id){
item = good
}
}
//先取出之前购物车的东西
var car = localStorage.getItem('car')?JSON.parse(localStorage.getItem('car')):[]
//count 里面具备id
var flag = false //默认为没有
//查找当前的car里面的内容是否具备这个id
for(var good of car){
if(good.id == item.id){ //如果有这个id count++
good.count++
flag = true
}
}
if(!flag){ // 如果没有这个id count为1
item.count = 1
car.push(item)
}
//重新设置到localstorage里面去
localStorage.setItem('car',JSON.stringify(car))
}
</script>
</body>
</html>
购物车页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.small {
width: 100px;
}
</style>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th><input type="checkbox" id="selectAll"> 全选</th>
<th>
商品名
</th>
<th>
商品图片
</th>
<th>
商品详情
</th>
<th>
商品价格
</th>
<th>
商品个数
</th>
<th>
小计
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="5">
当前共选中<span class="Count">0</span> 件商品
</td>
<td colspan="5" align="right"> 合计 ￥<span class="totalPrice">0</span></td>
</tr>
</tfoot>
</table>
<script>
//购物车数据渲染
// 数据显示在tbody里面
var tbody = document.querySelector('tbody')
//调用渲染方法
randerList()
function randerList() {
var car = localStorage.getItem('car') ? JSON.parse(localStorage.getItem('car')) : []
//先要去localstorage拿对应的购物车数据 car
//遍历
for (var good of car) {
tbody.innerHTML += `
<tr>
<td>
<input type="checkbox" class='check'>
</td>
<td>
${good.goodName}
</td>
<td>
<img class="small" src="${good.imgUrl}" alt="">
</td>
<td>
${good.info}
</td>
<td>
￥<span>${good.goodPrice}</span>
</td>
<td>
<button class="btn" ${good.count==1?"disabled='disabled'":""} onclick='changeCount(${good.id})'>-</button>
<input type="number" value="${good.count}">
<button class="btn" onclick='changeCount(${good.id},true)' >+</button>
</td>
<td>
￥<span>${good.goodPrice*good.count}</span>
</td>
<td>
<button onclick="rm(${good.id})">移除购物车</button>
</td>
</tr>
`
}
}
//全选功能
var selectAll = document.querySelector('#selectAll')
var checks = document.querySelectorAll('.check')
//给全选功能做操作
selectAll.onclick = function () {
for (var i = 0; i < checks.length; i++) {
checks[i].checked = this.checked
}
computedPrice()
}
//给每个添加点击事件
for (var i = 0; i < checks.length; i++) {
checks[i].onclick = function () {
computedPrice()
if (isSelectAll()) {
selectAll.checked = true
}
}
}
//判断是否全选的方法 如果全选返回true 如果不是返回false
function isSelectAll() {
var count = 0
for (var i = 0; i < checks.length; i++) {
if (checks[i].checked) {
count++
}
}
return count == checks.length
}
//计算价格的方法
function computedPrice() {
var prices = 0
var Count = 0;
var car = localStorage.getItem('car') ? JSON.parse(localStorage.getItem('car')) : []
console.log(`car`, car);
for (var i = 0; i < checks.length; i++) {
if (checks[i].checked) {
prices += (car[i].count * car[i].goodPrice)//共计多少总价
Count += (car[i].count) //共计多少件商品
}
}
document.querySelector('.totalPrice').innerText = prices //再给到totalPrice
document.querySelector('.Count').innerText = Count
} //再给到Count
//添加数量 //减少数量
function changeCount(id, isAdd) {
var car = localStorage.getItem('car') ? JSON.parse(localStorage.getItem('car')) : []
//根据这个id获取对应的商品
for (var good of car) {
if (id == good.id) {
if (isAdd) {
good.count++
} else {
good.count--
}
}
}
//重新设置进去
localStorage.setItem('car', JSON.stringify(car))
location.reload()
}
//移除购物车的方法
function rm(id) {
var car = localStorage.getItem('car') ? JSON.parse(localStorage.getItem('car')) : []
var index = -1//-1的下标不存在
//根据这个id获取对应的商品
for (var i in car) {
if (id == car[i].id) {
index = i
}
}
car.splice(index, 1)
//重新设置进去
localStorage.setItem('car', JSON.stringify(car))
//重新渲染 重新加载
location.reload()
}
</script>
</body>
</html>
