Simulation native js Projet de panier Taobao Combat réel
L'exemple de cet article décrit le code d'implémentation du panier d'achat Taobao de simulation js native. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Utilisez JavaScript pour obtenir un effet de panier similaire à Taobao, y compris la mise en œuvre de fonctions telles que la sélection unique, toutes les sélections, la suppression, la modification de la quantité, le calcul du prix, le calcul de la quantité, l'aperçu , etc. de produits. Rendus implémentés :
Code correspondant :
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="Simulation native js Projet de panier Taobao Combat réel" ><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="Simulation native js Projet de panier Taobao Combat réel" ><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="Simulation native js Projet de panier Taobao Combat réel" ><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="Simulation native js Projet de panier Taobao Combat réel" ><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="Simulation native js Projet de panier Taobao Combat réel" ><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="Simulation native js Projet de panier Taobao Combat réel" ><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;
}Ce qui précède est tout le code du projet pour js pour simuler le panier Taobao. Tout le monde est invité à l'apprendre, à l'apprécier et à en tirer quelque chose.
Pour plus d'articles sur le projet de panier d'achat Taobao de simulation js native, veuillez faire attention au site Web PHP chinois !
Articles connexes :
Principes de mise en œuvre du panier d'achat pour novices PHP
Méthode jQuery d'implémentation du panier d'achat basée sur json et cookie
js implémente un panier simple avec des images et du code
php implémente simple rejoindre Introduction détaillée au code graphique du panier
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment implémenter une fonction simple de panier d'achat en Java ?
Nov 02, 2023 am 11:56 AM
Comment implémenter une fonction simple de panier d'achat en Java ? Le panier est une fonctionnalité importante d'une boutique en ligne, qui permet aux utilisateurs d'ajouter les articles qu'ils souhaitent acheter au panier et de gérer les articles. En Java, nous pouvons implémenter une fonction de panier simple en utilisant une approche orientée objet. Tout d’abord, nous devons définir une classe de produits. Cette classe contient des attributs tels que le nom du produit, le prix et la quantité, ainsi que les méthodes Getter et Setter correspondantes. Par exemple : publicclassProduct
PHP implémente la fonction de panier d'achat
Jun 22, 2023 am 09:00 AM
Dans notre vie quotidienne, les achats en ligne sont devenus un mode de consommation très courant, et la fonction panier est également l'un des éléments importants des achats en ligne. Ainsi, cet article expliquera comment utiliser le langage PHP pour implémenter les fonctions liées au panier. 1. Contexte technique Le panier d'achat est une fonction courante sur les sites d'achat en ligne. Lorsque les utilisateurs parcourent certains produits sur un site Web, ils peuvent ajouter ces articles à un panier virtuel pour faciliter la sélection et la gestion lors du processus de commande ultérieur. Un panier comprend généralement les fonctions de base suivantes : Ajouter des articles :
Compétences en développement de centres commerciaux PHP : conception de fonctions de panier d'achat et de synchronisation des commandes
Jul 30, 2023 pm 07:22 PM
Compétences en développement de centre commercial PHP : Concevoir des fonctions de panier d'achat et de synchronisation des commandes Dans un site Web de centre commercial, le panier d'achat et les commandes sont des fonctions indispensables. Le panier est utilisé par les utilisateurs pour acheter des produits et les enregistrer dans un panier temporaire, tandis que la commande est un enregistrement généré après que l'utilisateur a confirmé l'achat du produit. Afin d'améliorer l'expérience utilisateur et de réduire les erreurs, il est très important de concevoir une fonction de synchronisation du panier et des commandes. 1. Le concept de panier et de commande Un panier est généralement un conteneur temporaire utilisé pour stocker les articles achetés par les utilisateurs. Les utilisateurs peuvent ajouter des produits au panier pour faciliter la navigation et la gestion.
Tutoriel pratique : Explication détaillée de la fonction panier avec PHP et MySQL
Mar 15, 2024 pm 12:27 PM
Tutoriel pratique : Explication détaillée de la fonction de panier d'achat en utilisant PHP et MySQL La fonction de panier d'achat est l'une des fonctions courantes dans le développement de sites Web. Grâce au panier d'achat, les utilisateurs peuvent facilement ajouter les articles qu'ils souhaitent acheter au panier. puis procédez au règlement et au paiement. Dans cet article, nous détaillerons comment implémenter une fonction de panier simple à l'aide de PHP et MySQL et fournirons des exemples de code spécifiques. Pour créer une base de données et une table de données, vous devez d'abord créer une table de données dans la base de données MySQL pour stocker les informations sur le produit. Ce qui suit est un simple tableau de données
Comment implémenter la fonction de panier d'achat à l'aide de Redis et JavaScript
Sep 21, 2023 pm 01:27 PM
Comment utiliser Redis et JavaScript pour implémenter la fonction de panier d'achat. Le panier d'achat est l'une des fonctions les plus courantes sur les sites Web de commerce électronique. Il permet aux utilisateurs d'ajouter des articles d'intérêt au panier, ce qui facilite leur visualisation et leur visualisation. gérer les articles achetés à tout moment. Dans cet article, nous présenterons comment implémenter la fonction de panier d'achat à l'aide de Redis et JavaScript, et fournirons des exemples de code spécifiques. 1. Préparation Avant de commencer, nous devons nous assurer que Redis a été installé et configuré, ce qui peut être fait via le site officiel [https:/
Comment concevoir la structure de la table du panier du centre commercial dans MySQL ?
Oct 30, 2023 pm 02:12 PM
Comment concevoir la structure de la table du panier du centre commercial dans MySQL ? Avec le développement rapide du commerce électronique, les paniers d’achat sont devenus un élément important des centres commerciaux en ligne. Le panier est utilisé pour enregistrer les produits achetés par les utilisateurs et les informations associées, offrant ainsi aux utilisateurs une expérience d'achat pratique et rapide. Concevoir une structure de table de panier raisonnable dans MySQL peut aider les développeurs à stocker et à gérer efficacement les données du panier. Cet article expliquera comment concevoir la structure de la table du panier d'achat du centre commercial dans MySQL et fournira quelques exemples de code spécifiques. Premièrement, le tableau du panier doit contenir
Comment implémenter une fonction simple de panier d'achat en utilisant PHP
Sep 24, 2023 am 09:13 AM
Comment utiliser PHP pour implémenter une fonction de panier d'achat simple La fonction de panier d'achat est une partie essentielle d'un site Web de commerce électronique. Elle permet aux utilisateurs d'ajouter des articles qui les intéressent au panier, puis de procéder au paiement ou de continuer à naviguer et à ajouter des articles. . Cet article explique comment utiliser PHP pour implémenter une fonction de panier d'achat simple et fournit des exemples de code spécifiques. Création de la base de données et des tables Tout d'abord, nous devons créer une base de données et une table pour stocker les données du panier. CREATEDATABASEshopping_ca
Comment mettre en œuvre le système d'épicerie Java Switch avec la fonction de rappel de la quantité du panier
Nov 04, 2023 am 09:03 AM
Comment réaliser le système d'achat d'épicerie Java Switch avec la fonction de rappel de la quantité du panier Avec le développement rapide d'Internet, le commerce électronique devient de plus en plus populaire. De plus en plus de personnes commencent à faire leurs achats via des téléphones mobiles ou des pages Web sur ordinateur, bénéficiant ainsi d'une expérience d'achat pratique et efficace. Dans le processus d'achat, le panier est un outil indispensable. Il permet aux utilisateurs de mettre leurs produits préférés dans un « panier » temporaire et de procéder ensuite au règlement lorsque la commande est confirmée. Cependant, lors d’achats en ligne, les utilisateurs oublient parfois qu’il y a déjà plusieurs articles dans le panier. Ainsi, lors de la conception d'un panier
