js购物车实现
1.添加购物车
<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: 300px;
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><textarea type="text"></textarea><br>
<span>商品图片</span><input type="text"><br>
<button id="save">添加商品</button>
</div>
<h2>商品列表</h2>
<ul id="goodList">
</ul>
<a href="./02-购物车.html">去购物车页面</a>
<script>
function addGood(goodName, goodPrice, info, imgUrl) {
//先取出商品列表本身有的数据
var goodList = localStorage.getItem('goodList') ? JSON.parse(localStorage.getItem('goodList')) : []
var id = Date.now()+Math.random() * 300 // 时间戳 生成一个随机的ID
var good = { //初始化一个对象 储存对应的值
id,
goodName,
goodPrice,
info,
imgUrl
}
goodList.push(good)
addGoodToUl(good)
localStorage.setItem('goodList', JSON.stringify(goodList))
}
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)
}
}
//加进ul里
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')):[]
var flag=false // 默认没有
for(var good of car){ // 查找当前的car是否具备这个id
if(good.id==item.id){
good.count++ //有 数量加1
flag=true
}
}
if(!flag){ //如果没有这个id
item.count=1
car.push(item)
}
localStorage.setItem('car',JSON.stringify(car))
}
</script>
2.购物车页面
<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="8" align="right">合计￥<span class="totalPrice">0</span></td>
</tr>
</tfoot>
</table>
<script>
var tbody = document.querySelector('tbody')
randerList()
//购物车渲染
function randerList() {
var car = localStorage.getItem('car') ? JSON.parse(localStorage.getItem('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 //点选为true 取消选择为fasle
}
computePrice()
}
//给每个添加点击事件
for(var i=0;i<checks.length;i++){
checks[i].onclick=function(){
computePrice()
if(isSelectAll()){
selectAll.checked=true
}else{
selectAll.checked=false
}
}
}
//判断是否为全选 如果全选返回true 不是返回fasle
function isSelectAll(){
var count=0
for(var i=0;i<checks.length;i++){
if(checks[i].checked){
count++
}
}
return count==checks.length
}
//计算价格的方法
function computePrice(){
var prices=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)
}
}
//再给到totalPrice
document.querySelector('.totalPrice').innerText=prices
}
//添加数量 //减少数量
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))
//重新渲染
// tbody.innerHTML=''
// randerList()
location.reload()
}
//移除购物车的方法
function rm(id){ //根据id删除商品
var car =localStorage.getItem('car')?JSON.parse(localStorage.getItem('car')):[]
var index=-1
for(var i in car){
if(id==car[i].id){
index=i
}
}
car.splice(index,1)
//重新设置进去
localStorage.setItem('car',JSON.stringify(car))
//重新渲染
// tbody.innerHTML=''
// randerList()
location.reload()
}
</script>
