加入購物車頁面
<!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>商品價(jià)格</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都是位于瀏覽器上 但是倆個(gè)的大小和特性不一樣（5M）
function addGood(goodName,goodPrice,info,imgUrl){
//先取出商品列表本身有的數(shù)據(jù)
var goodList = localStorage.getItem('goodList')?JSON.parse(localStorage.getItem('goodList')):[]
//生成一個(gè)id
var id = Date.now()+Math.random().toFixed(2)
//初始化一個(gè)對象 存儲對應(yīng)的數(shù)據(jù)
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(){
//獲取所有輸入的內(nèi)容
var inputs = document.querySelectorAll('input')
var info = document.querySelector('textarea').value
//調(diào)用添加的方法
addGood(inputs[0].value,Number(inputs[1].value),info,inputs[2].value)
}
//商品列表渲染的功能
function randerGoodList(){
//根據(jù)localstroage里面存的數(shù)據(jù) 進(jìn)行渲染
var goodList = localStorage.getItem('goodList')?JSON.parse(localStorage.getItem('goodList')):[]
//遍歷這個(gè)數(shù)組進(jìn)行渲染
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取出對應(yīng)的元素
var item = {}
var goodList = localStorage.getItem('goodList')?JSON.parse(localStorage.getItem('goodList')):[]
//遍歷這個(gè)數(shù)組進(jìn)行渲染
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 //默認(rèn)為沒有
//查找當(dāng)前的car里面的內(nèi)容是否具備這個(gè)id
for(var good of car){
if(good.id == item.id){ //如果有這個(gè)id count++
good.count++
flag = true
}
}
if(!flag){ // 如果沒有這個(gè)id count為1
item.count = 1
car.push(item)
}
//重新設(shè)置到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>
商品價(jià)格
</th>
<th>
商品個(gè)數(shù)
</th>
<th>
小計(jì)
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="5">
當(dāng)前共選中<span class="Count">0</span> 件商品
</td>
<td colspan="5" align="right"> 合計(jì) ￥<span class="totalPrice">0</span></td>
</tr>
</tfoot>
</table>
<script>
//購物車數(shù)據(jù)渲染
// 數(shù)據(jù)顯示在tbody里面
var tbody = document.querySelector('tbody')
//調(diào)用渲染方法
randerList()
function randerList() {
var car = localStorage.getItem('car') ? JSON.parse(localStorage.getItem('car')) : []
//先要去localstorage拿對應(yīng)的購物車數(shù)據(jù) 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()
}
//給每個(gè)添加點(diǎn)擊事件
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
}
//計(jì)算價(jià)格的方法
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)//共計(jì)多少總價(jià)
Count += (car[i].count) //共計(jì)多少件商品
}
}
document.querySelector('.totalPrice').innerText = prices //再給到totalPrice
document.querySelector('.Count').innerText = Count
} //再給到Count
//添加數(shù)量 //減少數(shù)量
function changeCount(id, isAdd) {
var car = localStorage.getItem('car') ? JSON.parse(localStorage.getItem('car')) : []
//根據(jù)這個(gè)id獲取對應(yīng)的商品
for (var good of car) {
if (id == good.id) {
if (isAdd) {
good.count++
} else {
good.count--
}
}
}
//重新設(shè)置進(jìn)去
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的下標(biāo)不存在
//根據(jù)這個(gè)id獲取對應(yīng)的商品
for (var i in car) {
if (id == car[i].id) {
index = i
}
}
car.splice(index, 1)
//重新設(shè)置進(jìn)去
localStorage.setItem('car', JSON.stringify(car))
//重新渲染 重新加載
location.reload()
}
</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
