js實現(xiàn)購物車加減以及價格計算功能
更新時間：2021年08月19日 08:53:48 作者：Sestid
這篇文章主要為大家詳細介紹了js實現(xiàn)購物車加減以及價格計算功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)購物車加減以及價格計算的具體代碼，供大家參考，具體內(nèi)容如下
需求說明：
1、單擊“半閉”按鈕時，關(guān)閉當前頁面購物車頁面
2、單擊“移入收藏”彈出收藏提示
3、單擊“刪除”彈出確認刪除提示
4、單擊“結(jié)算”按鈕，彈出結(jié)算信息頁面窗口
5、自動計算商品總計
6、單擊“刪除”按鈕，使用parentNode訪問當前節(jié)點的父親節(jié)點等，使用removeChild( )刪除當前商品
效果圖：
代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>完善當當購物車頁面</title>
<style type="text/css">
body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;}
ul,li,ol{list-style: none;}
.content{width: 810px; margin: 0 auto; font-family: "微軟雅黑";}
.logo{margin: 10px 0;}
.logo span{
display: inline-block;
float: right;
width: 60px;
height: 30px;
line-height: 30px;
font-size: 14px;
background: #ff0000;
color: #ffffff;
text-align: center;
border-radius: 10px;
margin-top: 5px;
margin-right: 10px;
cursor: pointer;
font-weight: bold;
}
.cartList{
/*background: url("../image/02.jpg") no-repeat;*/
/*height: 414px;*/
overflow: hidden;
}
.cartList ul{
display: flex;
justify-content: space-between;
/*float: right;*/
/*width: 450px;*/
}
.cartList ul:nth-of-type(1){
display: flex;
margin-top: 125px;
}
.cartList ul:nth-of-type(2){
margin: 20px 0;
}
.cartList ul li{
font-family: "微軟雅黑";
font-size: 12px;
color: #666666;
text-align: center;
line-height: 25px;
/*float: left;*/
}
.cartList ul li input[name="price"]{
border: none;
background: transparent;
width: 45px;
text-align: center;
}
.cartList ul li input[name="amount"]{
width: 45px;
text-align: center;
border: 1px solid #999999;
border-left: none;
border-right: none;
height: 21px;
}
.cartList ul li input[name="minus"],.cartList ul li input[name="plus"]{
height: 25px;
border: 1px #999999 solid;
width: 25px;
text-align: center;
}
.cartList ul li:nth-of-type(1){width: 130px;}
.cartList ul li:nth-of-type(2){width: 100px;}
.cartList ul li:nth-of-type(3){width: 130px;}
.cartList ul li p{cursor: pointer;}
.cartList ol{
float: right;
clear: both;
margin-top: 40px;
}
.cartList ol li{
float: left;
}
.cartList ol li:nth-of-type(1){
color: #ff0000;
width: 80px;
height: 35px;
line-height: 35px;
text-align: center;
}
.cartList ol li span{display: inline-block;
float: right;
width: 80px;
height: 35px;
line-height: 35px;
font-size: 14px;
font-family: "微軟雅黑";
background: #ff0000;
color: #ffffff;
text-align: center;
/*margin-top: 5px;*/
/*margin-right: 15px;*/
cursor: pointer;
font-weight: bold;}
</style>
</head>
<!--onload，在加載時計算好原始金額-->
<body onload="total()">
<div class="content">
<div class="logo">
<span onclick="javascript:if (confirm('確認要關(guān)閉嗎'))window.close() ">關(guān)閉</span>
</div>
<div class="cartList">
<ul>
<li>商品信息</li>
<li>商品圖片</li>
<li>單價（元）</li>
<li>數(shù)量</li>
<li>金額（元）</li>
<li>操作</li>
</ul>
<ul style="display: flex;justify-content: space-between;align-items: center" id="first">
<li>《平凡的世界》</li>
<li><img src="./img/1.png" alt="" width="50" height="50"></li>
<li>¥<input type="text" name="price" value="21.90"></li>
<li><input type="button" name="minus" value="-" onclick="minus(0)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(0)" ></li>
<li id="price0">¥21.90</li>
<li><p onclick="save()">移入收藏</p><p onclick="delete1()">刪除</p></li>
</ul>
<ul style="display: flex;justify-content: space-between;align-items: center; margin: 20px 0;">
<li>《昆蟲記》</li>
<li><img src="./img/2.png" alt="" width="50" height="50"></li>
<li>¥<input type="text" name="price" value="24.00"></li>
<li><input type="button" name="minus" value="-" onclick="minus(1)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(1)"></li>
<li id="price1">¥24.00</li>
<li><p onclick="save()">移入收藏</p><p onclick="delete1()">刪除</p></li>
</ul>
<ol>
<li id="totalPrice"> </li>
<li><span>結(jié)算</span></li>
</ol>
</div>
</div>
</body>
</html>
<script>
//減法
function minus(index) {
//獲取當前數(shù)量的值
var amounts=document.getElementsByName("amount");
//得到第一個amount的元素的value屬性的值
var count=parseInt(amounts[index].value); //數(shù)量加1
if (count<=1){
alert("不能再減了，快沒了??！");
} else {
//得到第一個amount的元素的value屬性的值
var count=parseInt(amounts[index].value)-1; //數(shù)量加1
//重新把count的值綁定在數(shù)量文本框里
amounts[index].value=count;
var prices=document.getElementsByName("price");
var price=parseFloat(prices[index].value);
//乘以Math.pow(10,2)的原因為避免失真
var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
document.getElementById("price"+index).innerHTML="¥："+totalMoney;
}
total();
}
//加法
function plus(index) {
//獲取當前數(shù)量的值
var amounts=document.getElementsByName("amount");
//得到第一個amount的元素的value屬性的值
var count=parseInt(amounts[index].value)+1; //數(shù)量加1
//重新把count的值綁定在數(shù)量文本框里
amounts[index].value=count;
//當前操作端口的價格也要重新計算
//得到當前端口的單價
var prices=document.getElementsByName("price");
var price=parseFloat(prices[index].value);
//乘以Math.pow(10,2)的原因為避免失真
var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
//把當前價格顯示在文本中
document.getElementById("price"+index).innerHTML="¥："+totalMoney;
total();
}
//求總金額
function total() {
//得到所有的數(shù)量
var counts=document.getElementsByName("amount");
//得到所有的單價
var prices=document.getElementsByName("price");
var sumMoney=0;
for (var i=0;i<counts.length;i++){
//乘以Math.pow(10,2)的原因為避免失真
sumMoney+=(parseFloat(prices[i].value)*Math.pow(10,2)*parseInt(counts[i].value)/Math.pow(10,2));
}
//把總金額顯示再指定的元素中
document.getElementById("totalPrice").innerHTML="¥："+sumMoney;
}
//加入收藏
function save() {
if (confirm("確認要收藏嗎？")){
alert("收藏成功！");
}
}
//刪除
function delete1() {
if (confirm("確認要刪除嗎？")) {
var del=document.getElementById("first");
del.parentNode.removeChild(del);
alert("刪除成功?。?);
}
}
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
location是javascript里邊管理地址欄的內(nèi)置對象，比如location.href就管理頁面的url，用location.href=url就可以直接將頁面重定向url。而location.hash則可以用來獲取或設(shè)置頁面的標簽值。2010-03-03
JavaScript中所有的任務(wù)分為同步任務(wù)與異步任務(wù)，同步任務(wù)，顧名思義就是立即執(zhí)行的任務(wù)，它一般是直接進入到主線程中執(zhí)行,這篇文章主要介紹了JS定時器不可靠的原因及解決方案,需要的朋友可以參考下2022-01-01
寫一個函數(shù)處理大數(shù)據(jù)的相加問題，所謂的大數(shù)據(jù)是指超出了整型，長整型之類的常規(guī)數(shù)據(jù)類型表示范圍的數(shù)據(jù)。實現(xiàn)語言不限。2011-08-08
應(yīng)項目之需求，需用JS操作XML文檔，遂上網(wǎng)查資料，感覺這篇文章還不錯，特轉(zhuǎn)載到此地，與大家共享！2009-07-07
什么是閉包呢？閉包就是函數(shù)實例執(zhí)行過程中動態(tài)產(chǎn)生一個沒有被釋放資源的棧區(qū)，也是一個預(yù)執(zhí)行的過程。2011-01-01
下面小編就為大家?guī)硪黄鷍s封裝二級城市下拉列表的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)頁面導(dǎo)航層級指示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
Javascript實現(xiàn)快速排序（Quicksort）的算法詳解
排序算法（Sorting algorithm）是計算機科學(xué)最古老、最基本的課題之一，要想成為合格的程序員，就必須理解和掌握各種排序算法。2015-09-09
js傳參數(shù)受特殊字符影響錯誤，如果不做處理，會產(chǎn)品傳參錯誤，encodeURI 方法返回一個編碼的URI，可以有效解決此問題，感興趣的朋友可以參考下2013-10-10
這篇文章主要教大家如何簡單實現(xiàn)js拖拽效果，很詳細的js拖拽效果實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07