原生js实现购物车（完整）
2018-12-18 本文已影响0人
楠木cral
1.前端页面以及样式
图例：
image.png
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 960px;
margin: 20px auto;
}
#cart {
margin: 0 auto;
width: 850px;
}
#cart-header {
height: 40px;
background-color: lightgray;
margin-bottom: 20px;
}
#cart-header div {
line-height: 40px;
}
.left {
float: left;
}
.right {
float: right;
}
.w110 {
width: 100px;
}
.ml10 {
margin-left: 10px;
}
.w120 {
width: 120px;
}
.w250 {
width: 250px;
}
.center {
text-align: center;
}
.w20 {
width: 20px;
}
.w90 {
width: 90px;
}
.clear {
clear: both;
}
#cart-items>div {
height: 100px;
}
#cart-items>div>div {
line-height: 100px;
}
.w250 span {
display: inline-block;
font-size: 12px;
line-height: 16px !important;
}
.single-item {
border-bottom: 1px solid gray;
}
.small-button {
display: inline-block;
width: 20px;
height: 20px;
border: none;
}
.big-button {
color: white;
background-color: red;
display: inline-block;
width: 120px;
height: 40px;
border: none;
font-size: 22px;
}
#totalCount, #totalPrice {
color: red;
}
#totalPrice {
font: bolder 20px Arial;
display: inline-block;
width: 150px;
}
#cart a {
text-decoration: none;
}
#cart a:link, #cart a:visited, #cart a:active {
color: gray;
}
</style>
</head>
<body>
<div id="cart">
<div id="cart-header">
<div class="left w110 ml10">
<input id="selectAll" type="checkbox">
<label for="selectAll">全选</label>
</div>
<div class="left w250">商品</div>
<div class="left w120 center">单价</div>
<div class="left w120 center">数量</div>
<div class="left w120 center">小计</div>
<div class="left w120 center">操作</div>
</div>
<div id="cart-items">
<div class="clear single-item">
<div class="left w20 ml10">
<input name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a1.jpg">
</a>
</div>
<div class="left w250">
<span>
海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂
</span>
</div>
<div class="left w120 center">¥<span class="price">138.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input class="center count" type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">¥<span class="priceCount">138.00</span></div>
<div class="left w120 center">
<a href="javascript:void(0);">删除</a>
</div>
</div>
<div class="clear single-item">
<div class="left w20 ml10">
<input name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a2.jpg">
</a>
</div>
<div class="left w250">
<span>
HLA海澜之家长袖衬衫男牛津纺休闲干净透气HNEAJ1E048A浅灰
</span>
</div>
<div class="left w120 center">¥<span class="price">128.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input class="center count" type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">¥<span class="priceCount">128.00</span></div>
<div class="left w120 center">
<a href="javascript:void(0);">删除</a>
</div>
</div>
<div class="clear single-item">
<div class="left w20 ml10">
<input name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a3.jpg">
</a>
</div>
<div class="left w250">
<span>
HLA海澜之家牛津纺清新休闲衬衫2018春季新品质感柔软长袖衬衫男
</span>
</div>
<div class="left w120 center">¥<span class="price">99.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input class="center count" type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">¥<span class="priceCount">99.00</span></div> <!--这里原文没有span标签，应该属于老师调皮-->
<div class="left w120 center">
<a href="javascript:void(0);">删除</a>
</div>
</div>
</div>
<div id="cart-footer">
<div class="clear left">
<a id="clearSelected" href="javascript:void(0);">删除选中商品</a>
</div>
<div class="right">
<span>总共选中了<span id="totalCount">0</span>件商品</span>
<span>总计: <span id="totalPrice">¥0.00</span></span>
<button id="pay" class="big-button">去结算</button>
</div>
</div>
</div>
2.下面是js代码实现
1.首先实现选好的物品的删除功能，获取‘删除所选物品删除’按钮id，绑定点击事件，点击删除按钮，调用删除函数，其中window.confirm(）用来提示删除操作。
（1）调用函数
//删除所选物品
var removeDiv = document.getElementById('clearSelected');
removeDiv.addEventListener('click', removeDivs);
（2）定义函数
//删除所选全部物品的函数
function removeDivs(){
if(window.confirm('这将删除所选物品，是否继续？')){
var divs = document.querySelectorAll('#cart-items>div'); //设为局部变量
var checkBoxs = document.querySelectorAll('#cart-items>div input[type=checkbox]');
for(var i = 0;i < divs.length;i++){
if(checkBoxs[i].checked){
document.querySelector('#cart-items').removeChild(divs[i]);
}
}
}
}
2.每个功能一一对应着敲代码的流程：获取按钮id--绑定点击事件--调用函数（需要什么样的功能）--定义函数（实现这个功能），一般功能函数最后需要调用自己定义的刷新总价总数的函数sumCount();
3.总的js代码（有简单注释）
<script>
//删除所选全部物品的函数
function removeDivs(){
if(window.confirm('这将删除所选物品，是否继续？')){
var divs = document.querySelectorAll('#cart-items>div'); //设为局部变量
var checkBoxs = document.querySelectorAll('#cart-items>div input[type=checkbox]');
for(var i = 0;i < divs.length;i++){
if(checkBoxs[i].checked){
document.querySelector('#cart-items').removeChild(divs[i]);
}
}
}
sumCount();
}
//删除单样物品的函数
function removeThing(evt){
if(window.confirm('这将删除这件物品，是否继续？')){
var divs = document.querySelectorAll('#cart-items>div'); //设为局部变量
var thing = evt.target||evt.srcElement;
document.querySelector('#cart-items').removeChild(thing.parentNode.parentNode);
}
sumCount();
}
//调数量加减的函数
function changeCount(evt){
var operator = evt.target||evt.srcElement;
if(operator.textContent == '+'){
if(operator.previousElementSibling.value <= 999){
operator.previousElementSibling.value = parseInt(operator.previousElementSibling.value) + 1;
}
// console.log(operator.previousElementSibling);
}else{
if(operator.nextElementSibling.value >= 2){
operator.nextElementSibling.value = parseInt(operator.nextElementSibling.value) - 1;
}
// console.log(operator.nextElementSibling.value);
}
var price = operator.parentElement.parentElement.querySelector('.price');
var countIput = operator.parentElement.querySelector('input').value;
if(countIput > 999||countIput<1){
window.alert('请输入有效数字！')
return ;
}
var newPrice = parseInt(price.textContent) * parseFloat(countIput);
operator.parentElement.nextElementSibling.querySelector('span').innerHTML = newPrice.toFixed(2); //toFixed函数保留两位小数
sumCount();
}
//总数和总价格函数刷新
function sumCount(){
var divs = document.querySelectorAll('#cart-items>div');
var count = 0; //总的数量
var sumPrice = 0; //总价
for(var i = 0;i < divs.length;i++){
if(divs[i].querySelector('input[type=checkbox]').checked){
count += parseInt(divs[i].querySelector('input[type=text]').value);
sumPrice += parseInt(divs[i].querySelector('.priceCount').innerHTML);
}
}
document.querySelector('#totalCount').innerHTML = parseInt(count); //总数成功改变
document.querySelector('#totalPrice').innerHTML = '￥' + sumPrice.toFixed(2); //总的价格改变
}
//全选
function allIn(){
// var allBtn = evt.target||evt.srcElement;
var checkBoxs = document.querySelectorAll('#cart-items>div input[type=checkbox]');
if(qxButton.checked){ //如果全选按钮没按
for(var i = 0;i < checkBoxs.length;i++){
if(!checkBoxs[i].checked){
checkBoxs[i].checked = true; //
}
}
}else{ //如果不是全选，就变为全选
for(var i = 0;i < checkBoxs.length;i++){
if(checkBoxs[i].checked){
checkBoxs[i].checked = false;
}
}
}
sumCount();
}
//**************************************************FZX-楠木cral*************************************************************//
//删除所选物品
var removeDiv = document.getElementById('clearSelected');
removeDiv.addEventListener('click', removeDivs);
//删除单个指定物品
var removeThings = document.querySelectorAll('#cart-items>div .center>a');
for(var i = 0;i < removeThings.length;i++){
removeThings[i].addEventListener('click',removeThing);
}
//数量加减按钮 数量变化导致价格变化
var countButtons = document.querySelectorAll('#cart-items>div .small-button');
for(var i= 0;i < countButtons.length;i++){
countButtons[i].addEventListener('click',changeCount);
}
//数量输入框自己输入
var inputBorders = document.querySelectorAll('#cart-items>div>div input[type=text]');
for(var i= 0;i < inputBorders.length;i++){
inputBorders[i].addEventListener('focusout', changeCount);
}
//总数量以及总计价格功能
var checkBoxs = document.querySelectorAll('#cart-items>div input[type=checkbox]');
for(var i = 0;i < checkBoxs.length;i++){
checkBoxs[i].addEventListener('click', sumCount);
}
//全选按钮
var qxButton = document.getElementById('selectAll');
qxButton.addEventListener('click', allIn);
</script>
