2021-05-12 14:32:11
原生js實現購物車
2020-09-24 06:00:59
原生就js實現購物車增刪改查，供大家參考，具體內容如下
效果圖：
程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0;padding:0;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix{
clear: both;
zoom: 1;
}
.shopping{
width: 1200px;
margin: 0 auto;
font-size: 14px;
}
.shopping .header{
width: 100%;
height: 50px;
line-height: 50px;
background: #ccc;
color: #000000;
font-weight: bold;
text-align: left;
}
.shopping .header ul{
padding-left: 30px;
}
.shopping .header ul li{
width: 190px;
list-style: none;
}
.shopping .footer{
width: 100%;
height: 50px;
background: #ccc;
color: #000000;
text-align: left;
}
.shopping .footer .footlf{
width: 200px;
line-height: 50px;
margin-left: 30px;
}
.shopping .footer .footrg{
width: 600px;
text-align:right;
}
.shopping .footer .footrg span:nth-child(1){
display: inline-block;
padding: 0px 25px;
background: black;
color: white;
line-height: 48px;
margin-right: 20px;
}
.shopping .footer .footrg span:nth-child(2),.shopping .footer .footrg span:nth-child(3){
display: inline-block;
margin-right: 20px;
}
.shopping .footer .footrg span:nth-child(4){
font-size:16px;
font-weight: bold;
line-height: 50px;
margin-right: 50px;
}
.shopping .footer .footrg s{
color: red;
}
.content{
margin: 10px 0px;
}
.content dl{
margin-bottom: 20px;
}
.content dl dt{
border: 1px solid #CCCCCC;
height: 30px;
line-height: 30px;
font-weight: bold;
}
.content dl dt{
padding-left: 20px;
}
.content dl dd{
padding-left: 20px;
border: 1px solid #CCCCCC;
height: 100px;
line-height: 100px;
border-top: none;
}
.content dl dd ul li{
list-style: none;
}
.content dl dd ul li img{
width: 80px;
height: 80px;
vertical-align: middle;
}
.content dl dd ul li{
width: 190px;
}
.content dl dd ul li s{
color: red;
font-weight: bold;
}
.content dl dd ul li input{
width: 30px;
}
s{
text-decoration: none;
}
.content .del{
cursor: pointer;
}
.minus{
padding: 0px 10px;
background: red;
cursor: pointer;
}
.plus{
padding: 0px 10px;
background: red;
cursor: pointer;
}
input{
cursor: pointer;
}
</style>
</head>
<body>
<div class="shopping">
<div class="header clearfix">
<ul>
<li class="fl"><input type="checkbox" name="" class="all">全選</li>
<li class="fl">商品</li>
<li class="fl">單價</li>
<li class="fl">數量</li>
<li class="fl">價格</li>
<li class="fl">操作</li>
</ul>
</div>
<div class="content">
<dl>
<dt>店鋪：xxx快餐店1</dt>
<dd>
<ul>
<li class="fl"><input type="checkbox" name="" class="ischeck"></li>
<li class="fl">
<img src="imges/01.jpg" />
<span>涼茶</span>
</li>
<li class="fl">
<s>$<span class="price">100</span></s>
</li>
<li class="fl">
<span class="minus">-</span>
<input type="text" name="" class="count" value="1">
<span class="plus">+</span>
</li>
<li class="fl">
<s>$<span class="price_sum">100</span></s>
</li>
<li class="fl">
<span class="del">刪除</span>
</li>
</ul>
</dd>
</dl>
<dl>
<dt>店鋪：xxx快餐店2</dt>
<dd>
<ul>
<li class="fl"><input type="checkbox" name="" class="ischeck"></li>
<li class="fl">
<img src="imges/02.jpg" />
<span>涼茶2</span>
</li>
<li class="fl">
<s>$<span class="price">200</span></s>
</li>
<li class="fl">
<span class="minus">-</span>
<input type="text" name="" class="count" value="1">
<span class="plus">+</span>
</li>
<li class="fl">
<s>$<span class="price_sum">200</span></s>
</li>
<li class="fl">
<span class="del">刪除</span>
</li>
</ul>
</dd>
</dl>
<dl>
<dt>店鋪：xxx快餐店3</dt>
<dd>
<ul>
<li class="fl"><input type="checkbox" name="" class="ischeck"></li>
<li class="fl">
<img src="imges/02.jpg" />
<span>涼茶3</span>
</li>
<li class="fl">
<s>$<span class="price">300</span></s>
</li>
<li class="fl">
<span class="minus">-</span>
<input type="text" name="" class="count" value="1" >
<span class="plus">+</span>
</li>
<li class="fl">
<s>$<span class="price_sum">300</span></s>
</li>
<li class="fl">
<span class="del">刪除</span>
</li>
</ul>
</dd>
</dl>
</div>
<div class="footer clearfix">
<div class="footlf fl">
<input type="checkbox" name="" class="all_is">反選
<input type="checkbox" name="" id="cancel">取消
</div>
<div class="footrg fr">
<span>繼續購物</span>
<span>已選商品<s id="piece">0</s>件</span>
<span>合計(不含運費)：￥<s class="sum_">0.00</s></span>
<span>結算</span>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//購物車功能要求
//1.勾選全選框 商品勾選狀態為已勾選狀態 並且計算商品合計 單價合計
//2.取消勾選時取消所以商品勾選
var del=document.getElementsByClassName("del");//刪除
var dl=document.getElementsByTagName("dl");
var all=document.getElementsByClassName("all")[0];//獲取全選按鈕
var all_is=document.getElementsByClassName("all_is")[0];//獲取取反按鈕
var ischeck=document.getElementsByClassName("ischeck");//獲取商品勾選狀態核取方塊節點
var minus=document.getElementsByClassName("minus");//商品減
var plus=document.getElementsByClassName("plus");//商品加
var count=document.getElementsByClassName("count");//商品數量
var price=document.getElementsByClassName("price");//獲得單價
var price_sum=document.getElementsByClassName("price_sum");//獲得商品價格
var sum_=document.getElementsByClassName("sum_")[0];//獲得商品總價格
var piece=document.getElementById("piece");//已選商品件數
var cancel=document.getElementById("cancel");//取消選擇
//全選功能
all_();
function all_(){
all.onchange=function(){
//當全選框狀態為ture 的時候迴圈勾選 商品狀態 為false 則相反
if(all.checked){
for(var i=0;i<ischeck.length;i++)
{
ischeck[i].checked=true;
}
piece_();//已選商品件數
}
else{
for(var i=0;i<ischeck.length;i++)
{
ischeck[i].checked=false;
}
piece_();//已選商品件數
}
shss();//每次商品勾選或者數量發生改變計算總額數
}
}
//商品狀態勾選
comm_ischeck();
function comm_ischeck(){
for (var i=0;i<ischeck.length;i++) {
(function(j){
ischeck[j].onclick=function(){
shss();//每次商品勾選或者數量發生改變計算總額數
piece_();//每次商品勾選狀態發生變化計算已選商品件數
for (var k=0;j<ischeck.length;k++) {//迴圈判斷商品勾選狀態
if (!ischeck[k].checked) {//如果有一個為flase 則全選框取消勾選
all.checked = false;
break; //結束迴圈
}
//否則勾選
all.checked =true;
}
}
})(i)
}
}
//反選
all_iss();
function all_iss(){
all_is.onchange=function(){
//迴圈遍歷勾選狀態 商品狀態勾選則取消勾選
for(var i=0;i<ischeck.length;i++){
ischeck[i].checked = ischeck[i].checked?false:true;
}
shss();//每次商品勾選或者數量發生改變計算總額數
piece_();//每次商品勾選狀態發生變化計算已選商品件數
}
}
//減少商品
add_is();
function add_is(){
for(var i=0;i<minus.length;i++){
(function(i){
minus[i].onclick=function(){
if(parseInt(count[i].value)<2){
count[i].value=1;
}
else{
count[i].value=parseInt(count[i].value)-1;
}
// parseInt(count[i].value) 因為得到的value 是string 型別 運算需要進行型別轉換
//如果數量值<1預設為0
//count[i].value=parseInt(count[i].value)<1?0:(parseInt(count[i].value)-1);
var pric=price[i].innerHTML;//商品單價
price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品總結價格等於=商品單價*商品數量
shss();//每次商品勾選或者數量發生改變計算總額數
piece_();//每次商品勾選狀態發生變化計算已選商品件數
}
})(i)
}
}
//新增商品
add();
function add(){
for(var i=0;i<plus.length;i++){
//立即執行函數得到下標
(function(i){
plus[i].onclick=function(){
var pric=price[i].innerHTML;//商品單價
//因為得到的value 是string 型別 運算需要進行型別轉換
count[i].value=parseInt(count[i].value)+1;//改變數量值
price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品總結價格等於=商品單價*商品數量
shss();//每次商品勾選或者數量發生改變計算總額數
piece_();//每次商品勾選狀態發生變化計算已選商品件數
}
})(i)
}
}
//count
count_();
function count_(){
for(var i=0;i<count.length;i++){
(function(i){
count[i].onchange=function(){
var pric=price[i].innerHTML;//商品單價
//因為得到的value 是string 型別 運算需要進行型別轉換
count[i].value=parseInt(count[i].value)+1;//改變數量值
price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品總結價格等於=商品單價*商品數量
shss();//每次商品勾選或者數量發生改變計算總額數
piece_();//每次商品勾選狀態發生變化計算已選商品件數
}
})(i)
}
}
//計算已選商品件數
piece_();
function piece_(){
piece.innerHTML=0;
for(var i=0;i<ischeck.length;i++){
if(ischeck[i].checked){
piece.innerHTML=parseInt(piece.innerHTML)+parseInt(count[i].value);
}
}
}
//計算商品總額
shss();
function shss(){
sum_.innerHTML=0;
for(var i=0;i<ischeck.length;i++){
if(ischeck[i].checked){
console.log(sum_.innerHTM);
sum_.innerHTML=parseInt(sum_.innerHTML)+parseInt(price_sum[i].innerHTML);
}
}
}
//取消選擇
cancel_();
function cancel_(){
//取消按鈕點選事件
cancel.onclick=function(){
for(var i=0;i<ischeck.length;i++){
ischeck[i].checked=false;
}
shss();
piece_();
}
}
//刪除
del_();
function del_(){
for(var i=0;i<del.length;i++){
(function(i){
del[i].onclick=function(){
dl[i].parentNode.removeChild(dl[i]);
shss();//每次商品勾選或者數量發生改變計算總額數
piece_();//每次商品勾選狀態發生變化計算已選商品件數
}
})(i)
}
}
</script>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。
相關文章