原生js實現(xiàn)購物車
更新時間：2020年09月23日 15:29:06 作者：zyfacd
這篇文章主要為大家詳細介紹了原生js實現(xiàn)購物車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
原生就js實現(xiàn)購物車增刪改查，供大家參考，具體內(nèi)容如下
效果圖：
代碼：
<!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">數(shù)量</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>繼續(xù)購物</span>
<span>已選商品<s id="piece">0</s>件</span>
<span>合計(不含運費)：￥<s class="sum_">0.00</s></span>
<span>結(jié)算</span>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//購物車功能要求
//1.勾選全選框 商品勾選狀態(tài)為已勾選狀態(tài) 并且計算商品合計 單價合計
//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");//獲取商品勾選狀態(tài)復(fù)選框節(jié)點
var minus=document.getElementsByClassName("minus");//商品減
var plus=document.getElementsByClassName("plus");//商品加
var count=document.getElementsByClassName("count");//商品數(shù)量
var price=document.getElementsByClassName("price");//獲得單價
var price_sum=document.getElementsByClassName("price_sum");//獲得商品價格
var sum_=document.getElementsByClassName("sum_")[0];//獲得商品總價格
var piece=document.getElementById("piece");//已選商品件數(shù)
var cancel=document.getElementById("cancel");//取消選擇
//全選功能
all_();
function all_(){
all.onchange=function(){
//當(dāng)全選框狀態(tài)為ture 的時候循環(huán)勾選 商品狀態(tài) 為false 則相反
if(all.checked){
for(var i=0;i<ischeck.length;i++)
{
ischeck[i].checked=true;
}
piece_();//已選商品件數(shù)
}
else{
for(var i=0;i<ischeck.length;i++)
{
ischeck[i].checked=false;
}
piece_();//已選商品件數(shù)
}
shss();//每次商品勾選或者數(shù)量發(fā)生改變計算總額數(shù)
}
}
//商品狀態(tài)勾選
comm_ischeck();
function comm_ischeck(){
for (var i=0;i<ischeck.length;i++) {
(function(j){
ischeck[j].onclick=function(){
shss();//每次商品勾選或者數(shù)量發(fā)生改變計算總額數(shù)
piece_();//每次商品勾選狀態(tài)發(fā)生變化計算已選商品件數(shù)
for (var k=0;j<ischeck.length;k++) {//循環(huán)判斷商品勾選狀態(tài)
if (!ischeck[k].checked) {//如果有一個為flase 則全選框取消勾選
all.checked = false;
break; //結(jié)束循環(huán)
}
//否則勾選
all.checked =true;
}
}
})(i)
}
}
//反選
all_iss();
function all_iss(){
all_is.onchange=function(){
//循環(huán)遍歷勾選狀態(tài) 商品狀態(tài)勾選則取消勾選
for(var i=0;i<ischeck.length;i++){
ischeck[i].checked = ischeck[i].checked?false:true;
}
shss();//每次商品勾選或者數(shù)量發(fā)生改變計算總額數(shù)
piece_();//每次商品勾選狀態(tài)發(fā)生變化計算已選商品件數(shù)
}
}
//減少商品
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 類型 運算需要進行類型轉(zhuǎn)換
//如果數(shù)量值<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);//商品總結(jié)價格等于=商品單價*商品數(shù)量
shss();//每次商品勾選或者數(shù)量發(fā)生改變計算總額數(shù)
piece_();//每次商品勾選狀態(tài)發(fā)生變化計算已選商品件數(shù)
}
})(i)
}
}
//添加商品
add();
function add(){
for(var i=0;i<plus.length;i++){
//立即執(zhí)行函數(shù)得到下標(biāo)
(function(i){
plus[i].onclick=function(){
var pric=price[i].innerHTML;//商品單價
//因為得到的value 是string 類型 運算需要進行類型轉(zhuǎn)換
count[i].value=parseInt(count[i].value)+1;//改變數(shù)量值
price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品總結(jié)價格等于=商品單價*商品數(shù)量
shss();//每次商品勾選或者數(shù)量發(fā)生改變計算總額數(shù)
piece_();//每次商品勾選狀態(tài)發(fā)生變化計算已選商品件數(shù)
}
})(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 類型 運算需要進行類型轉(zhuǎn)換
count[i].value=parseInt(count[i].value)+1;//改變數(shù)量值
price_sum[i].innerHTML=parseInt(pric)*parseInt(count[i].value);//商品總結(jié)價格等于=商品單價*商品數(shù)量
shss();//每次商品勾選或者數(shù)量發(fā)生改變計算總額數(shù)
piece_();//每次商品勾選狀態(tài)發(fā)生變化計算已選商品件數(shù)
}
})(i)
}
}
//計算已選商品件數(shù)
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();//每次商品勾選或者數(shù)量發(fā)生改變計算總額數(shù)
piece_();//每次商品勾選狀態(tài)發(fā)生變化計算已選商品件數(shù)
}
})(i)
}
}
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
滑動門,簡潔,新手上路制作篇 (小鴿子系列)...2007-04-04
這篇文章主要介紹了Python版實現(xiàn)微信公眾號掃碼登陸，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
javascript讀取Xml文件做一個二級聯(lián)動菜單示例
這篇文章主要介紹了使用javascript中讀取Xml文件做成的一個二級聯(lián)動菜單,需要的朋友可以參考下2014-03-03
微信小程序動態(tài)設(shè)置導(dǎo)航欄標(biāo)題的實現(xiàn)步驟
實際開發(fā)中很多時候我們需要通過上個頁面?zhèn)鬟^來的值動態(tài)的更改標(biāo)題欄文字,下面這篇文章主要給大家介紹了關(guān)于微信小程序動態(tài)設(shè)置導(dǎo)航欄標(biāo)題的實現(xiàn)步驟,需要的朋友可以參考下2023-02-02
JS截取url獲取一些信息類似的文章可以在網(wǎng)上找很多，本文在重復(fù)講述一遍，有不會的朋友可以鞏固一下2014-04-04
我們知道JScript中對象的prototype屬性，是用來返回對象類型原型的引用的。2010-04-04
這篇文章主要介紹了JS文件上傳時如何使用MD5加密，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
要做一個異步登錄，打算給用戶做一點提示，所以就網(wǎng)上找了點代碼，自己修改新增了一些，做了一個html+css+js的功能封裝,供大家參考，需要的朋友參考下吧2017-02-02
今天小編就為大家分享一篇layer彈出層全屏及關(guān)閉方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章介紹了javascript實現(xiàn)yield的方法，有需要的朋友可以參考一下2013-11-11