JavaScript實現簡單購物車效果
CSS、JavaScript；本地存儲（localstorage）實現簡單購物車添加、刪除、計算、本地存儲等。文章最下方見效果圖。
Html代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>購物車</title> <link rel="stylesheet" href="shopcar.css" /> <script type="text/javascript" src="shopcar.js" ></script> </head> <body> <center> <div class="good-list"> <ul id="ul"> <li> <img src="img/1.png"/> <p class="good-name">Huawei/華爲P20 Pro</p> <p class="good-pice">￥4000.00</p> </li> <li> <img src="img/3.png"/> <p class="good-name">SMARTISAN/錘子 堅果手機</p> <p class="good-pice">￥2880.00</p> </li> <li> <img src="img/2.png"/> <p class="good-name">Lenovo/聯想 拯救者 Y7000 14.0</p> <p class="good-pice">￥5200.00</p> </li> <li> <img src="img/4.png"/> <p class="good-name">Apple/蘋果 IPad 2018款</p> <p class="good-pice">￥2200.00</p> </li> <li> <img src="img/5.png"/> <p class="good-name">Xiaomi/小米8 透明探索版</p> <p class="good-pice">￥3988.00</p> </li> </ul> </div> <div class="shopping" align="right"><img src="img/timg.png" width="40px"/></div> <div class="shopping"> <table border=1 bordercolor="#CCC" cellspacing="0" id="tb"> <tr height=45><th width="10%"><input type="checkbox" value="全選" onclick="allSelect(this.checked),total()" id="isAllSelect"/> 全選</th> <th width="15%">圖片</th> <th width="25%">名稱</th> <th width="15%">單價</th> <th width="25%">數量</th> <th>操作</th></tr> <tr> <td style="border-right: none;"><input type="button" value="刪除選擇" id="deleteAll" onclick="deletAllSelect()"/></td> <td style="border-left: none;" colspan="5" align="right">合計：￥<span id="totalSpan">0</span> <input type="button" id="pay" value="結算(0)"/> </td> </tr> </table> </div> </center> </body> </html>
css代碼：
* {
margin: 0;
padding: 0;
list-style: none;
}
.good-list {
width: 700px;
height: 220px;
}
.good-list li {
float: left;
width: 140px;
height: 160px;
}
.good-list li:hover {
cursor: pointer;
}
.good-list img {
height: 140px;
width: 140px;
}
.good-list p {
text-align: center;
}
.good-name {
font-size: 14px;
}
.good-pice {
font-size: 12px;
color: red;
}
.shopping{
width: 700px;
}
.shopping table{
width: 100%;
}
/*.shopping input[type="checkbox"]{display: inline-block;}*/
.number{
display: inline-block;
font-size: 14px;
width: 35px;
line-height: 120%;
border-left:1px solid #ddccdd;
border-right:1px solid #ddccdd;
}
.number-bt{
display: inline-block;
font-size: 18px;
border: 0;
width: 20px;
background: none;
}
.goodNumber{
height: 30px;
border-radius: 4px;
border: 1px solid #ddccdd;
}
#pay{
width: 60px;
height: 30px;
border: none;
background-color: #FF3333;
border-radius: 20px;
margin: 5px 0 5px 0;
}
#deleteAll{
width: 60px;
height: 30px;
font-size: 12px;
font-family: "blackadder itc";
background:none;
border: 1px solid #FF3300;
border-radius: 20px;
margin-left:5px ;
}
#tb{
border-radius:3px ;
background-size: 100%;
background-image: url(img/bgi.jpg);
background-position-y: -70px;
}
#tb img{
margin-top: 5px;
}
#tb input[type="checkbox"]{
display: inline-block;
background-color: #FF33000;
border-radius: 100px;
}
button{
background: none;
border: none;
}
JS代碼：
window.onload = function() {
var tB = document.getElementById("tb");
//從localstroage中取出保存的購物車信息
if(window.localStorage) {
var shoppingInfoText = localStorage.getItem("shoppingInfo");
if(shoppingInfoText != null) {
//將本地存儲加入購物車列表。
var shoppingInfoObject = JSON.parse(shoppingInfoText);
for(var i = 0; i < shoppingInfoObject.length; i++) {
var tr = tB.insertRow(1); //向表格添加一行，位置在第一行
tr.align = "center";
var td1 = tr.insertCell(tr.cells.length);
td1.innerHTML = "<input type='checkbox' onclick='total()' name='isCheckbox' />";
var td2 = tr.insertCell(tr.cells.length);
td2.innerHTML = "<img src='" + shoppingInfoObject[i].imgPath + "' height='30px' />";
var td3 = tr.insertCell(tr.cells.length);
td3.innerHTML = shoppingInfoObject[i].goodName;
var td4 = tr.insertCell(tr.cells.length);
td4.innerHTML = shoppingInfoObject[i].goodPrice;
var td5 = tr.insertCell(tr.cells.length);
var td5HTML = "<input class='number-bt' type='button' value='-'onclick='subtractA(this.parentNode),total()'>";
td5HTML += "<span class='number'>" + shoppingInfoObject[i].num + "</span>";
td5HTML += "<input class='number-bt' type='button' value='+' id='addNum' onclick='addA(this.parentNode),total()'/>";
td5.innerHTML = "<span class='goodNumber'>" + td5HTML + "</span>";
var td6 = tr.insertCell(tr.cells.length);
td6.innerHTML = "<button onclick='deleteAShop(this.parentNode.parentNode)'>刪除</button>"
tb.rows[0].cells[0].children[0].checked = false; //新增後‘全選’爲false
}
total();
}
}
tb.rows[0].cells[0].children[0].checked = false; //‘全選’默認爲false
//加載事件中獲取列表的所有li標籤
var getLi = document.querySelectorAll("#ul li");
for(var i = 0; i < getLi.length; i++) {
getLi[i].onclick = function() {
var imgPath = this.children[0].getAttribute("src");
var goodName = this.children[1].innerHTML;
var goodPrice = this.children[2].innerHTML;
var isExist = false;
for(var i = 1; i < tb.rows.length - 1; i++) {
if(tb.rows[i].cells[2].innerHTML == goodName) {
//檢查商品是否已在購物車，存在則疊加
var carExistNum = parseInt(tb.rows[i].cells[4].children[0].children[1].innerHTML);
tb.rows[i].cells[4].children[0].children[1].innerHTML = carExistNum + 1;
isExist = true;
if(window.localStorage) {
var shoppingInfoText = localStorage.getItem("shoppingInfo");
var shoppingInfoObject = JSON.parse(shoppingInfoText);
shoppingInfoObject[tb.rows.length - i - 2].num++;
localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
}
break;
}
// //自定選擇，當全部選取
// var isSelect1 = tb.rows[i].cells[0].children[0];
// console.log(isSelect1[i]);
// if(isSelect1.checked){
// tb.rows[0].cells[0].children[0].checked = true;//全部‘全選’爲true
// }
}
if(isExist == false) {
var tr = tB.insertRow(1); //向表格添加一行，位置在第一行
tr.align = "center";
var td1 = tr.insertCell(tr.cells.length);
td1.innerHTML = "<input type='checkbox' onclick='total()' name='isCheckbox' />";
var td2 = tr.insertCell(tr.cells.length);
td2.innerHTML = "<img src='" + imgPath + "' height='30px' />";
var td3 = tr.insertCell(tr.cells.length);
td3.innerHTML = goodName;
var td4 = tr.insertCell(tr.cells.length);
td4.innerHTML = goodPrice;
var td5 = tr.insertCell(tr.cells.length);
var td5HTML = "<input class='number-bt' type='button' value='-'onclick='subtractA(this.parentNode),total()'>";
td5HTML += "<span class='number'>1</span>";
td5HTML += "<input class='number-bt' type='button' value='+' id='addNum' onclick='addA(this.parentNode),total()'/>";
td5.innerHTML = "<span class='goodNumber'>" + td5HTML + "</span>";
var td6 = tr.insertCell(tr.cells.length);
td6.innerHTML = "<button onclick='deleteAShop(this.parentNode.parentNode)'>刪除</button>"
tb.rows[0].cells[0].children[0].checked = false; //新增後‘全選’爲false
if(window.localStorage) {
var shoppingInfoText = localStorage.getItem("shoppingInfo");
var shoppingInfoObject = null;
if(shoppingInfoText == null) {
shoppingInfoObject = [];
} else {
shoppingInfoObject = JSON.parse(shoppingInfoText); //轉數組
}
var goods = new Object();
goods.imgPath = imgPath;
goods.goodName = goodName;
goods.goodPrice = goodPrice;
goods.num = 1;
shoppingInfoObject.push(goods);
localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
}
}
total(); //總計
}
}
}
//計算合計函數
function total() {
var totalMoney = 0;
var totalNum = 0;
for(var i = 1; i < tb.rows.length - 1; i++) {
var box = tb.rows[i].cells[0].children[0];
if(box.checked) {
//獲取出單價 轉爲浮點型
var price = parseFloat(tb.rows[i].cells[3].innerHTML.substring(1, ));
var num = parseFloat(tb.rows[i].cells[4].children[0].children[1].innerHTML);
totalMoney += price * num;
totalNum += num;
}
}
document.getElementById("pay").value = "結算(" + totalNum + ")";
document.getElementById("totalSpan").innerHTML = totalMoney;
}
//全選功能函數
function allSelect(isSelect) {
for(var i = 1; i < tb.rows.length - 1; i++) {
if(isSelect) {
tb.rows[i].cells[0].children[0].checked = true;
} else {
tb.rows[i].cells[0].children[0].checked = false;
}
}
}
//刪除全選功能函數
function deletAllSelect() {
var boxes = document.getElementsByName("isCheckbox");
for(i = 0; i < boxes.length; i++) {
if(boxes[i].checked) {
tr = boxes[i].parentNode.parentNode;
tr.parentNode.removeChild(tr);
if(window.localStorage) {
var shoppingInfoText = localStorage.getItem("shoppingInfo");
var shoppingInfoObject = JSON.parse(shoppingInfoText);
shoppingInfoObject.splice(i - 1, 1);
//刪除完存儲
localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
}
i--;
}
}
document.getElementById("pay").value = "結算(0)";
document.getElementById("totalSpan").innerHTML = 0;
tb.rows[0].cells[0].children[0].checked = false;
}
//刪除一個功能函數
function deleteAShop(isShop) {
var indexTr = isShop.rowIndex;
isShop.parentNode.removeChild(isShop);
if(window.localStorage) {
var shoppingInfoText = localStorage.getItem("shoppingInfo");
var shoppingInfoObject = JSON.parse(shoppingInfoText);
shoppingInfoObject.splice(tb.rows.length - indexTr-1, 1);
localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
}
total();
}
//加一操作
function addA(a) {
var num = parseInt(a.children[1].innerHTML);
a.children[1].innerHTML = num + 1;
var index = a.parentNode.parentNode.rowIndex;
if(window.localStorage) {
var shoppingInfoText = localStorage.getItem("shoppingInfo");
var shoppingInfoObject = JSON.parse(shoppingInfoText);
shoppingInfoObject[tb.rows.length - index - 2].num++;
localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
}
}
//減一操作
function subtractA(a) {
var num = parseInt(a.children[1].innerHTML);
if(num > 1) {
a.children[1].innerHTML = num - 1;
var index = a.parentNode.parentNode.rowIndex;
if(window.localStorage) {
var shoppingInfoText = localStorage.getItem("shoppingInfo");
var shoppingInfoObject = JSON.parse(shoppingInfoText);
shoppingInfoObject[tb.rows.length - index - 2].num--;
localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
}
}
}
效果圖：
