suchen

Heim >Web-Frontend >js-Tutorial >Verwenden Sie natives JavaScript, um Einkaufswagen und Einkaufsseiten zu implementieren

Verwenden Sie natives JavaScript, um Einkaufswagen und Einkaufsseiten zu implementieren

巴扎黑
巴扎黑Original
2017-08-22 17:08:423705Durchsuche

Der folgende Editor bringt Ihnen einen Artikel über die Verwendung von Cookies für native JS-Warenkörbe und Einkaufsseiten. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Schauen Sie doch mal mit dem Editor vorbei

Gehen Sie direkt zum Code: 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物页面</title>
<style>
ul{list-style:none;padding:0;margin:0;}
.goods li{display:inline-block;border:1px solid #ddd;padding:10px;margin:10px;}
.goods li:hover{}
.goods .price{color:#f00;font-weight:bold;}
.goods .price::before{
content:"￥";
}
</style>
<script>
window.onload = function(){
var goods = document.getElementsByClassName(&#39;goods&#39;)[0];

// 用于保存购物车商品信息
var carList = [];

// 先获取当前cookie
var cookies = document.cookie.split(&#39;; &#39;);
for(var i=0;i<cookies.length;i++){
var arr = cookies[i].split(&#39;=&#39;);
if(arr[0] === &#39;carlist&#39;){
carList = JSON.parse(arr[1]);
}
}

// 事件委托
goods.onclick = function(e){
e = e || window.event;
var target = e.target || e.srcElement;

// 添加到购物车
if(target.tagName.toLowerCase() === &#39;button&#39;){

// 获取当前li
var currentLi = target.parentElement.parentElement;
var children = currentLi.children;
var currentGUID = currentLi.getAttribute(&#39;data-guid&#39;);

// 先创建一个对象保存当前商品信息
var goodsObj = {};
goodsObj.guid = currentGUID;
goodsObj.qty = 1;
goodsObj.name = children[1].innerHTML;
goodsObj.price = children[2].innerHTML;
goodsObj.imgUrl = children[0].src;

// 如果cookie为空，则直接添加
if(carList.length===0){
// 添加到carList
carList.push(goodsObj);
}else{
// 先判断cookie中有无相同的guid商品
for(var i=0;i<carList.length;i++){
// 如果商品已经存在cookie中，则数量+1
if(carList[i].guid === currentGUID){
carList[i].qty++;
break;
}
}

// 如果原cookie中没有当前商品
if(i===carList.length){
// 添加到carList
carList.push(goodsObj);
}

}	
// 存入cookie
// 把对象/数组转换诚json字符串：JSON.stringify()
document.cookie = &#39;carlist=&#39; + JSON.stringify(carList);
}

}
}
</script>
</head>
<body>
<ul class="goods">
<li data-guid="g01">
<img src="images/shirt_1.jpg">
<p>短袖衬衣</p>
<p class="price">98.88</p>
<p class="add2cart">
<button>添加到购物车</button>
</p>
</li>
<li data-guid="g02">
<img src="images/shirt_2.jpg">
<p>短袖衬衣2</p>
<p class="price">88.88</p>
<p class="add2cart">
<button>添加到购物车</button>
</p>
</li>
<li data-guid="g03">
<img src="images/shirt_3.jpg">
<p>短袖衬衣3</p>
<p class="price">9.98</p>
<p class="add2cart">
<button>添加到购物车</button>
</p>
</li>
<li data-guid="g04">
<img src="images/shirt_4.jpg">
<p>短袖衬衣4</p>
<p class="price">8.88</p>
<p class="add2cart">
<button>添加到购物车</button>
</p>
</li>
</ul>
<a href="04car.html" rel="external nofollow" >去结算</a>
</body>
</html>

//Warenkorbseite


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style>
#carList li{position:relative;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid #ddd;}
#carList img{display:block;width:100px;}
#carList li .btn-close{position:absolute;top:0;right:0;padding:0 5px;cursor:default;}
#carList li .btn-close:hover{color:#fff;}
.subPrice{padding:5px 20px;color:#f00;font-weight:bold;text-align:right;}
#carList .price{color:#f00;}
.price::before{
content:&#39;￥&#39;;
font-size:11px;
}
#carList .price span{font-size:11px;}
</style>
<script>
window.onload = function(){
/*
读取cookie中的carlist
把json字符串转换成对象/数组：JSON.parse()
json字符串格式：
1.必须用双引号
2.不能右注释
*/
var oCarList = document.getElementById(&#39;carList&#39;);
var oSubPrice = oCarList.nextElementSibling;
var btnClear = document.getElementById(&#39;btnClear&#39;);

var carList;
var cookies = document.cookie.split(&#39;; &#39;);
for(var i=0;i<cookies.length;i++){
var arr = cookies[i].split(&#39;=&#39;);
if(arr[0] === &#39;carlist&#39;){
console.log(JSON.parse(arr[1]));
carList = JSON.parse(arr[1]);
}
}

var subPrice = 0;

if(carList){
var ul = document.createElement(&#39;ul&#39;);
for(var i=0;i<carList.length;i++){
var li = document.createElement(&#39;li&#39;);
// 给每个li添加data-guid属性
li.setAttribute(&#39;data-guid&#39;,carList[i].guid);

// 商品名
var title = document.createElement(&#39;h4&#39;);
title.innerHTML = carList[i].name;

// 商品价格
var price = document.createElement(&#39;p&#39;);
price.className = &#39;price&#39;;
price.innerHTML = carList[i].price + &#39;×&#39; + carList[i].qty;

// 商品图片
var img = document.createElement(&#39;img&#39;);
img.src = carList[i].imgUrl;

// 添加删除按钮
var btnClose = document.createElement(&#39;span&#39;);
btnClose.innerHTML = &#39;×&#39;;
btnClose.className = &#39;btn-close&#39;;

// 计算总价
subPrice += carList[i].price*carList[i].qty;

li.appendChild(title);
li.appendChild(price);
li.appendChild(img);
li.appendChild(btnClose);

ul.appendChild(li);
}

// 写入页面
oCarList.appendChild(ul);

// 写入总价
// toFixed(n)获取小数点后n位（自动四舍五入，Number类型的方法）
oSubPrice.innerHTML = &#39;<span class="price">&#39; + subPrice.toFixed(2) + &#39;</span>&#39;;
}


// 删除商品
oCarList.onclick = function(e){
e = e || window.event;
var target = e.target || e.srcElement;

// 是否点击了删除按钮
if(target.className === &#39;btn-close&#39;){
var currentLi = target.parentElement;

// 获取当前guid
var currentGUID = currentLi.getAttribute(&#39;data-guid&#39;);

// 删除cookie中对应的商品
// 根据guid取对比
for(var i=0;i<carList.length;i++){
// 找出要删除的商品
if(carList[i].guid === currentGUID){
carList.splice(i,1);
break;
}
}

// 更新cookie
document.cookie = &#39;carlist=&#39; + JSON.stringify(carList);

// 删除li节点
currentLi.parentElement.removeChild(currentLi);
}
}

// 清空购物车
// 1、删除DOM节点
// 2、删除cookie
btnClear.onclick = function(){
oCarList.innerHTML = &#39;&#39;;
oSubPrice.innerHTML = &#39;&#39;;

// 利用设置有效期位过期事件来达到删除cookie的效果
var now = new Date();
now.setDate(now.getDate()-7);
document.cookie = &#39;carlist=xx;expires=&#39; + now;
}
}

</script>
</head>
<body>
<h1>购物车</h1>
<p id="carList">

</p>
<p class="subPrice"></p>
<a href="#" rel="external nofollow" id="btnClear">清空购物车</a>
</body>
</html>

Das obige ist der detaillierte Inhalt vonVerwenden Sie natives JavaScript, um Einkaufswagen und Einkaufsseiten zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Webpack-KonfigurationsdateiNächster Artikel：Detaillierte Erläuterung der Webpack-Konfigurationsdatei

In Verbindung stehende Artikel

Mehr sehen