只有三個例子可以使用，感覺第三個不錯
目錄
例子一
效果圖：
代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js購物?計算商品價格例子</title>
</head>
<body>
<ul id="list">
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
單價：<em>12.5元</em>
小計：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
單價：<em>10.5元</em>
小計：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
單價：<em>8.5元</em>
小計：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
單價：<em>8元</em>
小計：<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
單價：<em>14.5元</em>
小計：<span>0元</span>
</li>
</ul>
<p>
商品合計共：<span>0</span>件，共花費了：<span>0</span>元<br />
所購商品中最貴的商品單價是：<span>0</span>元
</p>
<script>
var aLi = document.getElementsByTagName("li");
var aStrong = document.getElementsByTagName("strong");
var aEm = document.getElementsByTagName("em");
var oP = document.getElementsByTagName("p")[0];
var aSpan = oP.getElementsByTagName("span");
var number = 0;
var price = 0;
for (var i = 0; i < aLi.length; i++) {
Price(aLi[i]);
}
function Price(obj) {
var aIn = obj.getElementsByTagName("input");
var oStrong = obj.getElementsByTagName("strong")[0];
var oEm = obj.getElementsByTagName("em")[0];
var oSpan = obj.getElementsByTagName("span")[0];
aIn[0].onclick = function() {
if (oStrong.innerHTML > 0) {
number--;
oStrong.innerHTML--;
price -= parseFloat(oEm.innerHTML);
oSpan.innerHTML = parseFloat(oEm.innerHTML) * oStrong.innerHTML + "元";
aSpan[0].innerHTML = number;
aSpan[1].innerHTML = price;
aSpan[2].innerHTML = getMax();
}
}
aIn[1].onclick = function() {
number++;
oStrong.innerHTML++;
price += parseFloat(oEm.innerHTML);
oSpan.innerHTML = parseFloat(oEm.innerHTML) * oStrong.innerHTML + "元";
aSpan[0].innerHTML = number;
aSpan[1].innerHTML = price;
aSpan[2].innerHTML = getMax();
}
}
function getMax() {
var arr = [];
for (var i = 0; i < aStrong.length; i++) {
if (aStrong[i].innerHTML != 0) {
arr.push(parseFloat(aEm[i].innerHTML));
}
}
return aStrong == 0 ? 0 : arr.sort(function(a, b) {
return b - a
})[0];
}
</script>
</body>
</html>
例子二
效果圖：
代碼：
鏈接：https://pan.baidu.com/s/11vfGMQ4NITKiwYETsAuwlA
提取碼：gchj
例子三
效果圖：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS實現購物車結算功能代碼</title>
<style>
* {
margin: 0;
padding: 0;
list-style-type: none;
}
body{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
a {
color: #666;
text-decoration: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 0;
}
body {
color: #666;
font: 12px/180% Arial, Helvetica, sans-serif, "新宋體";
}
clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
.clearfix {
display: inline-table
}
*html .clearfix {
height: 1%
}
.clearfix {
display: block
}
*+html .clearfix {
min-height: 1%
}
.fl {
float: left;
}
.fr {
float: right;
}
.catbox {
width: 940px;
margin: 100px auto;
}
.catbox table {
text-align: center;
width: 100%;
}
.catbox table th,
.catbox table td {
border: 1px solid #CADEFF;
}
.catbox table th {
background: #e2f2ff;
border-top: 3px solid #a7cbff;
height: 30px;
}
.catbox table td {
padding: 10px;
color: #444;
}
.catbox table tbody tr:hover {
background: RGB(238, 246, 255);
}
.checkbox {
width: 60px;
}
.check-all {
vertical-align: middle;
}
.goods {
width: 300px;
}
.goods span {
width: 180px;
margin-top: 20px;
text-align: left;
float: left;
}
.goods img {
width: 100px;
height: 80px;
margin-right: 10px;
float: left;
}
.price {
width: 130px;
}
.count {
width: 90px;
}
.count .add,
.count input,
.count .reduce {
float: left;
margin-right: -1px;
position: relative;
z-index: 0;
}
.count .add,
.count .reduce {
height: 23px;
width: 17px;
border: 1px solid #e5e5e5;
background: #f0f0f0;
text-align: center;
line-height: 23px;
color: #444;
}
.count .add:hover,
.count .reduce:hover {
color: #f50;
z-index: 3;
border-color: #f60;
cursor: pointer;
}
.count input {
width: 50px;
height: 15px;
line-height: 15px;
border: 1px solid #aaa;
color: #343434;
text-align: center;
padding: 4px 0;
background-color: #fff;
z-index: 2;
}
.subtotal {
width: 150px;
color: red;
font-weight: bold;
}
.operation span:hover,
a:hover {
cursor: pointer;
color: red;
text-decoration: underline;
}
.foot {
margin-top: 0px;
color: #666;
height: 48px;
border: 1px solid #c8c8c8;
border-top: 0;
background-color: #eaeaea;
background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226));
position: relative;
z-index: 8;
}
.foot div,
.foot a {
line-height: 48px;
height: 48px;
}
.foot .select-all {
width: 80px;
height: 48px;
line-height: 48px;
color: #666;
text-align: center;
}
.foot .delete {
padding-left: 10px;
}
.foot .closing {
border-left: 1px solid #c8c8c8;
width: 103px;
text-align: center;
color: #666;
font-weight: bold;
cursor: pointer;
background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226));
}
.foot .closing:hover {
background-image: linear-gradient(RGB(226, 226, 226), RGB(241, 241, 241));
color: #333;
}
.foot .total {
margin: 0 20px;
cursor: pointer;
}
.foot #priceTotal,
.foot #selectedTotal {
color: red;
font-family: "Microsoft Yahei";
font-weight: bold;
}
.foot .selected {
cursor: pointer;
}
.foot .selected .arrow {
position: relative;
top: -3px;
margin-left: 3px;
}
.foot .selected .down {
position: relative;
top: 3px;
display: none;
}
.show .selected .down {
display: inline;
}
.show .selected .up {
display: none;
}
.foot .selected:hover .arrow {
color: red;
}
.foot .selected-view {
width: 938px;
border: 1px solid #c8c8c8;
position: absolute;
height: auto;
background: #ffffff;
z-index: 9;
bottom: 48px;
left: -1px;
display: none;
}
.show .selected-view {
display: block;
}
.foot .selected-view div {
height: auto;
}
.foot .selected-view .arrow {
font-size: 16px;
line-height: 100%;
color: #c8c8c8;
position: absolute;
right: 330px;
bottom: -9px;
}
.foot .selected-view .arrow span {
color: #ffffff;
position: absolute;
left: 0px;
bottom: 1px;
}
#selectedViewList {
padding: 10px 20px 10px 20px;
}
#selectedViewList div {
display: inline-block;
position: relative;
width: 100px;
height: 80px;
border: 1px solid #ccc;
margin: 10px;
float: left;
}
#selectedViewList div img {
width: 100px;
height: 80px;
margin-right: 10px;
float: left;
}
#selectedViewList div span {
display: none;
color: #ffffff;
font-size: 12px;
position: absolute;
top: 0px;
right: 0px;
width: 60px;
height: 18px;
line-height: 18px;
text-align: center;
background: #000;
cursor: pointer;
}
#selectedViewList div:hover span {
display: block;
}
</style>
</head>
<body>
<div class="catbox">
<table id="cartTable">
<thead>
<tr>
<th><label>
<input class="check-all check" type="checkbox" /> 全選</label></th>
<th>商品</th>
<th>單價</th>
<th>數量</th>
<th>小計</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkbox">
<input class="check-one check" type="checkbox" />
</td>
<td class="goods">
<img src="../js測試考覈/js測試輪播/img/3.jpg" alt="" />
<span>Casio/卡西歐 EX-TR350</span>
</td>
<td class="price">8</td>
<td class="count">
<span class="reduce"></span>
<input class="count-input" type="text" value="1" />
<span class="add">+</span>
</td>
<td class="subtotal">8</td>
<td class="operation">
<span class="delete">刪除</span>
</td>
</tr>
<tr>
<td class="checkbox">
<input class="check-one check" type="checkbox" /></td>
<td class="goods">
<img src="../js測試考覈/js自己自制頁面測試/img/9.jpg" alt="" />
<span>Canon/佳能 PowerShot SX50 HS</span>
</td>
<td class="price">6</td>
<td class="count">
<span class="reduce"></span>
<input class="count-input" type="text" value="1" />
<span class="add">+</span>
</td>
<td class="subtotal">6</td>
<td class="operation">
<span class="delete">刪除</span>
</td>
</tr>
<tr>
<td class="checkbox">
<input class="check-one check" type="checkbox" />
</td>
<td class="goods">
<img src="../js測試考覈/js的輪播測試v1.2/img/6.jpg" alt="" />
<span>Sony/索尼 DSC-WX300</span>
</td>
<td class="price">2</td>
<td class="count">
<span class="reduce"></span>
<input class="count-input" type="text" value="1" />
<span class="add">+</span>
</td>
<td class="subtotal">2</td>
<td class="operation">
<span class="delete">刪除</span>
</td>
</tr>
<tr>
<td class="checkbox">
<input class="check-one check" type="checkbox" />
</td>
<td class="goods">
<img src="../js測試考覈/js自己自制頁面測試/img/3.jpg" alt="" />
<span>Fujifilm/富士 instax mini 25</span>
</td>
<td class="price">5</td>
<td class="count">
<span class="reduce"></span>
<input class="count-input" type="text" value="1" />
<span class="add">+</span>
</td>
<td class="subtotal">5</td>
<td class="operation"><span class="delete">刪除</span></td>
</tr>
</tbody>
</table>
<div class="foot" id="foot">
<a class="fl delete" id="deleteAll" href="javascript:;">刪除</a>
<div class="fr closing" onclick="getTotal();">結 算</div>
<input type="hidden" id="cartTotalPrice" />
<div class="fr total">合計：￥
<span id="priceTotal">0.00</span>
</div>
<div class="fr selected" id="selected">已選商品
<span id="selectedTotal">0</span>
件<span class="arrow up">︽</span>
<span class="arrow down">︾</span>
</div>
</div>
</div>
</body>
<script>
//獲取加法按鈕
//加法要做 更新數量 顯示減號 獲取單價 更新小計
var addList = document.querySelectorAll(".add");
//獲取class名爲add在頁面中add爲"+";
for (var i = 0; i < addList.length; i++) {
//循環輸出所有的+然後給綁定點擊事件
addList[i].onclick = function() { //綁定點擊事件
var countInput = preEle(this);
//
var reduceSpan = preEle(countInput);
countInput.value = countInput.value * 1 + 1; //更新數量
reduceSpan.innerHTML = "-"; //顯示減號
updateSubtotal(this.parentNode, countInput.value * 1);
updateFooter();
}
}
//減號需要做 更新數量 隱藏減號 獲取單價 更新小計
var reduceList = document.querySelectorAll(".reduce");
for (var i = 0; i < reduceList.length; i++) {
reduceList[i].onclick = function() {
var countInput = nextEle(this);
if (countInput.value > 1) { //控制減號的顯示 和數量的更新
countInput.value -= 1;
if (countInput.value == 1) {
this.innerHTML = "";
}
updateSubtotal(this.parentNode, countInput.value * 1);
updateFooter();
} else {
this.innerHTML = "";
}
}
}
var chekAll = document.querySelector(".check-all");
var check = document.querySelectorAll(".check-one");
//多選
chekAll.onclick = function() {
for (var i = 0; i < check.length; i++) {
check[i].checked = this.checked;
}
updateFooter();
}
for (var i = 0; i < check.length; i++) {
check[i].onclick = function() {
updateFooter();
}
}
//刪除
var deleteList = document.querySelectorAll(".delete");
for (var i = 0; i < deleteList.length; i++) {
deleteList[i].onclick = function() {
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
updateFooter();
}
}
function updateFooter() {
//判斷每一行是否選中
var checkOneList = document.querySelectorAll(".check-one");
var selectedTotal = document.querySelector("#selectedTotal");
var priceTotal = document.querySelector("#priceTotal");
var allCount = 0;
var allPrice = 0
for (var i = 0; i < checkOneList.length; i++) {
if (checkOneList[i].checked) {
//選中的話獲取數量和小計
//如何根據checkbox獲取數量
var num = checkOneList[i].parentNode.parentNode.children[3].children[1].value * 1;
allCount += num;
var total = checkOneList[i].parentNode.parentNode.children[4].innerHTML * 1;
allPrice += total;
}
}
selectedTotal.innerHTML = allCount;
priceTotal.innerHTML = allPrice.toFixed(2);
}
/**
* 更新小計
*/
function updateSubtotal(parentTd, count) {
var price = preEle(parentTd).innerHTML * 1;
var subtotalSpan = nextEle(parentTd);
var total = price * count;
subtotalSpan.innerHTML = total.toFixed(2);
}
/**
* 獲取下一個同輩元素
* @param obj
* @returns {*}
*/
function nextEle(obj) {
if (obj.nextElementSibling) {
return obj.nextElementSibling;
} else {
return obj.nextSibling;
}
}
/**
* 獲取上一個同輩元素
* @param obj
* @returns {*}
*/
function preEle(obj) {
if (obj.previousElementSibling) {
return obj.previousElementSibling;
} else {
return obj.previousSibling;
}
}
</script>
</html>