Native JS-Simulation Taobao-Einkaufswagenprojekt tatsächlicher Kampf
Das Beispiel in diesem Artikel beschreibt den Implementierungscode für die native JS-Simulation des Taobao-Einkaufswagens. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Verwenden Sie JavaScript, um einen Einkaufswageneffekt ähnlich wie bei Taobao zu erzielen, einschließlich der Implementierung von Funktionen wie Einzelauswahl, Gesamtauswahl, Löschen, Mengenänderung, Preisberechnung, Mengenberechnung, Vorschau , usw. Implementierte Renderings:
Entsprechender Code:
shoppingCart.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>JavaScript实现购物车项目实战</title>
<link rel="stylesheet" type="text/css" href="./css/shoppingCart.css">
<script type="text/javascript" src="./js/shoppingCart.js"></script>
</head>
<body>
<table id="cartTable">
<thead>
<tr class="order_content">
<th><input class="check_all check" type="checkbox"></input> 全选</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="order_content">
<td class="check"><input class = "check_one check" type="checkbox"></input></td>
<td class="goods"><img src="/static/imghw/default1.png" data-src="./imgs/apple6s.png" class="lazy" alt="Native JS-Simulation Taobao-Einkaufswagenprojekt tatsächlicher Kampf" ><span>Iphone 6S</span></td>
<td class="price">5099.88</td>
<td class="count">
<span class="reduce">-</span>
<input class="count_input" type="text" value="1"></input>
<span class="add">+</span>
</td>
<td class="subtotle">5099.88</td>
<td class="operation"><span class="delete">删除<span></td>
</tr>
<tr class="order_content">
<td class="check"><input class = "check_one check" type="checkbox"></input></td>
<td class="goods"><img src="/static/imghw/default1.png" data-src="./imgs/macbook.png" class="lazy" alt="Native JS-Simulation Taobao-Einkaufswagenprojekt tatsächlicher Kampf" ><span>MacBook Air</span></td>
<td class="price">1099.99</td>
<td class="count">
<span class="reduce">-</span>
<input class="count_input" type="text" value="1"></input>
<span class="add">+</span>
</td>
<td class="subtotle">1099.99</td>
<td class="operation"><span class="delete">删除<span></td>
</tr>
<tr class="order_content">
<td class="check"><input class = "check_one check" type="checkbox"></input></td>
<td class="goods"><img src="/static/imghw/default1.png" data-src="./imgs/ipadmini.png" class="lazy" alt="Native JS-Simulation Taobao-Einkaufswagenprojekt tatsächlicher Kampf" ><span>Ipad mini2 银16g WLAN7.9英寸</span></td>
<td class="price">6599.00</td>
<td class="count">
<span class="reduce">-</span>
<input class="count_input" type="text" value="1"></input>
<span class="add">+</span>
</td>
<td class="subtotle">6599.00</td>
<td class="operation"><span class="delete">删除<span></td>
</tr>
<tr>
<td class="check"><input class = "check_one check" type="checkbox"></input></td>
<td class="goods"><img src="/static/imghw/default1.png" data-src="./imgs/applewatch.png" class="lazy" alt="Native JS-Simulation Taobao-Einkaufswagenprojekt tatsächlicher Kampf" ><span>IWatch EXTS Min</span></td>
<td class="price">9998.68</td>
<td class="count">
<span class="reduce">-</span>
<input class="count_input" type="text" value="1"></input>
<span class="add">+</span>
</td>
<td class="subtotle">9998.68</td>
<td class="operation"><span class="delete">删除<span></td>
</tr>
</tbody>
</table>
<p class="slected view">
<p id="selectedViewList" class="clearfix">
<!-- <p><img src="/static/imghw/default1.png" data-src="./imgs/applewatch.png" class="lazy" alt="Native JS-Simulation Taobao-Einkaufswagenprojekt tatsächlicher Kampf" ><span>取消选择</span></p> -->
</p>
<span class="arrow">.<span>.</span></span>
</p>
<p id = "footer" class="footer">
<label class="fl select_all" ><input class="check_all check" type="checkbox"> 全选</input></label>
<a class="fl delete_all" id="deleteAll" href="javascript:;">删除</a>
<p class="fr closing">结算</p>
<p class="fr selected_totle">合计：￥ <span id="priceTotle">0.00</span> </p>
<p class="fr selectAll" id="selected">已购商品
<span id = "selectTotle">0</span>件
<span class="arow up">+++</span>
<span class="arow down">---</span>
</p>
</p>
</body>
</html>shoppingCart.js
window.onload = function(){
//低版本的IE浏览器不支持getElementByClassName方法，考虑兼容性,重写方法。
if (!document.getElementByClassName) {
document.getElementByClassName =function(cls){
var ret = [];
var clsElments = document.getElementsByTagName('*');
for (var i = 0, len = clsElments.length; i < len; i++) {
//考虑一个标签有多个class的情况,这里用正则表达式会好一点
if (clsElments[i].className == cls
|| (clsElments[i].className.indexOf(cls + " ") >= 0)
|| (clsElments[i].className.indexOf(" " + cls + " ") >= 0)
|| (clsElments[i].className.indexOf(" " + cls) >= 0))
{
ret.push(clsElments[i]);
}
}
return ret;
}
}
var cartTable = document.getElementById("cartTable");
var tr = cartTable.children[1].rows; //table标签特有的属性，rows可以获得表格元素的所有tr行。
var checkInput = document.getElementByClassName('check');//获得所有的单选框
var checkAllInput = document.getElementByClassName('check_all');//获得所有的单选框
var priceTotle = document.getElementById("priceTotle");//总价
var selectTotle = document.getElementById("selectTotle");//已选商品
var selected = document.getElementById("selected");
var footer = document.getElementById("footer");//底部标签
var selectedViewList = document.getElementById("selectedViewList");//底部标签
var deleteAll = document.getElementById("deleteAll");
//计算总价格和数量
function getTotle(){
var selectNum = 0;//数量
var priceNum = 0;//价格
var HTMLstr = ""; //缩略图的字符串拼接
for (var i = 0,len = tr.length; i < len; i++) {
if (tr[i].getElementsByTagName("input")[0].checked) {
tr[i].className ="on";
selectNum += parseInt(tr[i].getElementsByTagName("input")[1].value);
priceNum += parseFloat(tr[i].cells[4].innerHTML);
//拼接字符串显示已经选择的商品
HTMLstr += '<p><img src="/static/imghw/default1.png" data-src="'+ tr[i].getElementsByTagName('img')[0].src +'" class="lazy" alt="Native JS-Simulation Taobao-Einkaufswagenprojekt tatsächlicher Kampf" ><span class ="del" index ="'+ i +'">取消选择</span></p>';
}
else{
tr[i].className = "";
}
}
selectTotle.innerHTML = selectNum;
priceTotle.innerHTML = priceNum.toFixed(2);//保留两位小数
selectedViewList.innerHTML = HTMLstr;
}
//计算小计价格
function getSubTotle(tr){
var tds = tr.cells;
var price = parseFloat(tds[2].innerHTML);
var num = parseInt(tr.getElementsByTagName("input")[1].value);
var subTotle = parseFloat(price * num).toFixed(2);
tds[4].innerHTML = subTotle;
}
//复选框绑定单击事件
for (var i = 0, len = checkInput.length; i < len; i++){
checkInput[i].onclick =function (){
//判断全选按钮，变更
if (this.className == "check_all check") {
for (var j = 0; j < len; j++){
checkInput[j].checked = this.checked;
}
}
if (this.checked == false) {
for (var k = 0,len2 = checkAllInput.length; k < len2; k++){
checkAllInput[k].checked = false;
}
}
getTotle();
}
}
//控制底部标签的显示
selected.onclick = function(){
if (footer.className == "footer") {
footer.className == "footer show";
} else {
footer.className == "footer";
}
}
//图片缩略图的取消选择按钮功能,e为事件对象
selectedViewList.onclick = function(e){
//兼容低版本的IE
/* if (e){
e = e;
}else{
e = window.event;
} */
var e = e || window.event;
var el = e.srcElement;
if (el.className == "del") {
var index = el.getAttribute("index");
var input = tr[index].getElementsByTagName("input")[0];
input.checked = false;
input.onclick();
}
}
//实现加减、删除操作。同样用事件代理的方法实现
for (var i = 0, len3 = tr.length; i < len3; i++){
tr[i].onclick = function(e){
var e = e || window.event;
var el = e.srcElement;
var clsName = el.className;
var input = this.getElementsByTagName("input")[1];
var inputValue = parseInt(input.value);
var reduce = this.getElementsByTagName("span")[1];
switch (clsName){
case "add":
/*parseInt(inputValue) ++;*/
input.value = inputValue + 1;
reduce.innerHTML ="-";
getSubTotle(this);
break;
case "reduce":
if(inputValue >= 1){
input.value = inputValue - 1;
}else{
reduce.innerHTML ="";
}
getSubTotle(this);
break;
case "delete":
var conf = confirm("确定删除这个商品？");
if (conf) {
this.parentNode.removeChild(this);
}
break;
default:
break;
}
getTotle();
}
//处理从手动输入商品数量
tr[i].getElementsByTagName("input")[1].onkeyup = function(){
var val = this.value;
var tr = this.parentNode.parentNode;
if (isNaN(val) || val < 0 ) {
val = 1;
}
this.value = val;
getSubTotle(tr);
}
}
//全选删除
deleteAll.onclick = function(){
if (selectTotle.innerHTML !="0") {
var conf = confirm("确定删除这些商品？");
if (conf) {
for (var i = 0, len = tr.length; i < len; i++) {
var input = tr[i].getElementsByTagName("input")[0];
if(input.checked){
tr[i].parentNode.removeChild(tr[i]);
}
}
}
}
}
}
//取消选择--采用事件代理---放到父元素上。
<br>shoppingCart.css
.count_input{
width: 39px;
height: 15px;
line-height: 15px;
border: 1px solid #aaa;
color: #343434;
text-align: center;
padding: 4px 0;
background-color: #fff;
}
span.add, span.reduce{
height: 23px;
width: 27px;
border: 1px solid #e5e5e5;
background: #f0f0f0;
line-height: 23px;
color: #444;
}
.closing{
display: inline-block;
width: 120px;
height: 50px;
line-height: 50px;
background: #f40;
text-align: center;
font-family: 'Microsoft Yahei';
font-size: 20px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
text-decoration: none;
cursor: pointer;
}
.fr{
float: right;
}
.selected_totle, .selectAll, .select_all, .delete_all{
margin-top: 15px;
}
.footer{
height: 50px;
background: #e5e5e5;
font-family: 'Microsoft Yahei';
}
#selectTotle, #priceTotle,.subtotle {
color: #f40;
font-weight: 700;
font-size: 18px;
font-family: tohoma,arial;
padding: 5px;
}Das Obige ist der gesamte Projektcode für js zur Simulation des Taobao-Einkaufswagens. Jeder ist herzlich eingeladen, ihn zu lernen, zu schätzen und etwas davon zu gewinnen.
Weitere Artikel zum Taobao-Einkaufswagenprojekt zur nativen JS-Simulation finden Sie auf der chinesischen PHP-Website!
Verwandte Artikel:
Grundsätze der Implementierung eines Einkaufswagens für Anfänger in PHP
jQuery-Methode zur Implementierung eines Einkaufswagens basierend auf JSON und Cookie
js implementiert einen einfachen Warenkorb mit Bildern und Codes
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Wie implementiert man eine einfache Warenkorbfunktion in Java?
Nov 02, 2023 am 11:56 AM
Wie implementiert man eine einfache Warenkorbfunktion in Java? Der Warenkorb ist eine wichtige Funktion eines Online-Shops, mit der Benutzer Artikel, die sie kaufen möchten, in den Warenkorb legen und diese verwalten können. In Java können wir eine einfache Warenkorbfunktion mithilfe eines objektorientierten Ansatzes implementieren. Zuerst müssen wir eine Produktkategorie definieren. Diese Klasse enthält Attribute wie Produktname, Preis und Menge sowie entsprechende Getter- und Setter-Methoden. Zum Beispiel: publicclassProduct
PHP implementiert die Warenkorbfunktion
Jun 22, 2023 am 09:00 AM
In unserem täglichen Leben ist Online-Shopping zu einer weit verbreiteten Konsumform geworden und auch die Warenkorbfunktion ist einer der wichtigen Bestandteile des Online-Shoppings. In diesem Artikel erfahren Sie, wie Sie mithilfe der PHP-Sprache Warenkorbfunktionen implementieren. 1. Technischer Hintergrund Der Warenkorb ist eine häufige Funktion auf Online-Shopping-Websites. Wenn Benutzer einige Produkte auf einer Website durchsuchen, können sie diese Artikel in einen virtuellen Warenkorb legen, um sie während des anschließenden Bestellvorgangs einfacher auszuwählen und zu verwalten. Ein Warenkorb umfasst in der Regel folgende Grundfunktionen: Artikel hinzufügen:
Praktisches Tutorial: Ausführliche Erklärung der Warenkorbfunktion mit PHP und MySQL
Mar 15, 2024 pm 12:27 PM
Praktisches Tutorial: Ausführliche Erklärung der Warenkorbfunktion mit PHP und MySQL. Die Warenkorbfunktion ist eine der häufigsten Funktionen bei der Website-Entwicklung. Über den Warenkorb können Benutzer die Artikel, die sie kaufen möchten, einfach in den Warenkorb legen Fahren Sie dann mit der Abrechnung und Zahlung fort. In diesem Artikel erklären wir detailliert, wie Sie eine einfache Warenkorbfunktion mit PHP und MySQL implementieren, und stellen spezifische Codebeispiele bereit. Um eine Datenbank und eine Datentabelle zu erstellen, müssen Sie zunächst eine Datentabelle in der MySQL-Datenbank erstellen, um Produktinformationen zu speichern. Das Folgende ist eine einfache Datentabelle
So implementieren Sie die Warenkorbfunktion mit Redis und JavaScript
Sep 21, 2023 pm 01:27 PM
So implementieren Sie die Warenkorbfunktion mit Redis und JavaScript. Der Warenkorb ist eine der häufigsten Funktionen auf E-Commerce-Websites. Er ermöglicht Benutzern das Hinzufügen interessanter Artikel zum Warenkorb und erleichtert so die Anzeige Gekaufte Artikel jederzeit verwalten. In diesem Artikel stellen wir die Implementierung der Warenkorbfunktion mithilfe von Redis und JavaScript vor und stellen spezifische Codebeispiele bereit. 1. Vorbereitung Bevor wir beginnen, müssen wir sicherstellen, dass Redis installiert und konfiguriert wurde. Dies kann über die offizielle Website [https:/] erfolgen.
So implementieren Sie eine einfache Warenkorbfunktion mit PHP
Sep 24, 2023 am 09:13 AM
So implementieren Sie mit PHP eine einfache Warenkorbfunktion Die Warenkorbfunktion ist ein wesentlicher Bestandteil einer E-Commerce-Website. Sie ermöglicht es Benutzern, interessante Artikel zum Warenkorb hinzuzufügen und dann zur Kasse zu gehen oder mit dem Stöbern und Hinzufügen von Artikeln fortzufahren . In diesem Artikel wird erläutert, wie Sie mit PHP eine einfache Warenkorbfunktion implementieren, und es werden spezifische Codebeispiele bereitgestellt. Datenbank und Tabellen erstellen Zuerst müssen wir eine Datenbank und eine Tabelle erstellen, um die Warenkorbdaten zu speichern. CREATEDATABASEshopping_ca
Wie entwerfe ich die Warenkorb-Tabellenstruktur des Einkaufszentrums in MySQL?
Oct 30, 2023 pm 02:12 PM
Wie entwerfe ich die Warenkorb-Tabellenstruktur des Einkaufszentrums in MySQL? Mit der rasanten Entwicklung des E-Commerce sind Einkaufswagen zu einem wichtigen Bestandteil von Online-Einkaufszentren geworden. Der Warenkorb dient zum Speichern der von Benutzern gekauften Produkte und zugehörigen Informationen und bietet Benutzern ein bequemes und schnelles Einkaufserlebnis. Das Entwerfen einer angemessenen Warenkorbtabellenstruktur in MySQL kann Entwicklern dabei helfen, Warenkorbdaten effektiv zu speichern und zu verwalten. In diesem Artikel wird erläutert, wie die Einkaufswagentabellenstruktur des Einkaufszentrums in MySQL entworfen wird, und es werden einige spezifische Codebeispiele bereitgestellt. Zunächst sollte die Warenkorbtabelle enthalten
PHP-Mall-Entwicklungsfähigkeiten: Entwerfen Sie Einkaufswagen- und Bestellsynchronisierungsfunktionen
Jul 30, 2023 pm 07:22 PM
Fähigkeiten zur Entwicklung von PHP-Einkaufszentren: Entwerfen von Warenkorb- und Bestellsynchronisierungsfunktionen Auf einer Einkaufszentrum-Website sind Warenkorb und Bestellungen unverzichtbare Funktionen. Über den Warenkorb können Benutzer Produkte kaufen und diese in einem temporären Warenkorb speichern. Bei der Bestellung handelt es sich um einen Datensatz, der generiert wird, nachdem der Benutzer den Kauf des Produkts bestätigt hat. Um das Benutzererlebnis zu verbessern und Fehler zu reduzieren, ist es sehr wichtig, eine Warenkorb- und Bestellsynchronisierungsfunktion zu entwickeln. 1. Das Konzept von Warenkorb und Bestellung Ein Warenkorb ist normalerweise ein temporärer Behälter, in dem von Benutzern gekaufte Artikel aufbewahrt werden. Benutzer können Produkte zum einfachen Durchsuchen und Verwalten in den Warenkorb legen.
So implementieren Sie das Java-Switch-Lebensmitteleinkaufssystem mit der Erinnerungsfunktion für die Warenkorbmenge
Nov 04, 2023 am 09:03 AM
So realisieren Sie das Java-Switch-Lebensmitteleinkaufssystem mit der Warenkorbmengen-Erinnerungsfunktion Mit der rasanten Entwicklung des Internets wird E-Commerce immer beliebter. Immer mehr Menschen kaufen über Mobiltelefone oder Computer-Webseiten ein und genießen ein bequemes und effizientes Einkaufserlebnis. Im Einkaufsprozess ist der Warenkorb ein unverzichtbares Hilfsmittel. Er ermöglicht es den Nutzern, ihre Lieblingsprodukte in einen temporären „Warenkorb“ zu legen und nach Bestätigung der Bestellung mit der Abrechnung fortzufahren. Allerdings vergessen Nutzer beim Online-Einkauf manchmal, dass sich bereits mehrere Artikel im Warenkorb befinden. Also beim Entwerfen eines Warenkorbs
