네이티브 js 시뮬레이션 Taobao 장바구니 프로젝트 실제 전투-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

네이티브 js 시뮬레이션 Taobao 장바구니 프로젝트 실제 전투

高洛峰

Mar 15, 2017 pm 04:22 PM

네이티브 JS 장바구니

이 기사의 예에서는 기본 JS 시뮬레이션 Taobao 장바구니 구현 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

JavaScript를 사용하여 단일 선택, 전체 선택, 삭제, 수량 수정, 가격 계산, 수량 계산, 미리보기 등의 기능 구현을 포함하여 타오바오와 유사한 장바구니 효과를 구현합니다. , 제품 등. 구현된 렌더링:

네이티브 js 시뮬레이션 Taobao 장바구니 프로젝트 실제 전투

해당 코드:

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="네이티브 js 시뮬레이션 Taobao 장바구니 프로젝트 실제 전투" ><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="네이티브 js 시뮬레이션 Taobao 장바구니 프로젝트 실제 전투" ><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="네이티브 js 시뮬레이션 Taobao 장바구니 프로젝트 실제 전투" ><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="네이티브 js 시뮬레이션 Taobao 장바구니 프로젝트 실제 전투" ><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="네이티브 js 시뮬레이션 Taobao 장바구니 프로젝트 실제 전투" ><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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

window.onload = function(){
 //低版本的IE浏览器不支持getElementByClassName方法，考虑兼容性,重写方法。
 if (!document.getElementByClassName) {
  document.getElementByClassName =function(cls){
   var ret = [];
   var clsElments = document.getElementsByTagName(&#39;*&#39;);
   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(&#39;check&#39;);//获得所有的单选框
 var checkAllInput = document.getElementByClassName(&#39;check_all&#39;);//获得所有的单选框
 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 += &#39;<p><img  src="/static/imghw/default1.png"  data-src="&#39;+ tr[i].getElementsByTagName(&#39;img&#39;)[0].src +&#39;"  class="lazy"   alt="네이티브 js 시뮬레이션 Taobao 장바구니 프로젝트 실제 전투" ><span class ="del" index ="&#39;+ i +&#39;">取消选择</span></p>&#39;;
  
   }
   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: &#39;Microsoft Yahei&#39;;
 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: &#39;Microsoft Yahei&#39;;
}
#selectTotle, #priceTotle,.subtotle {
 color: #f40;
 font-weight: 700;
 font-size: 18px;
 font-family: tohoma,arial;
 padding: 5px;
  
}

로그인 후 복사

위 내용은 모두 Taobao 장바구니를 시뮬레이션하기 위한 js용 프로젝트 코드입니다. 누구나 배우고 감상하며 무언가를 얻을 수 있습니다.

더 많은 네이티브 js 시뮬레이션 Taobao 장바구니 프로젝트 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

PHP 초보 장바구니 구현 원리

JQuery 기반 장바구니 구현 방법과 json 기반 쿠키

js는 그림과 코드가 포함된 간단한 장바구니를 구현합니다

php는 단순함을 구현합니다. 장바구니 그래픽 코드 상세 소개

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

자바 튜토리얼

1671

Cakephp 튜토리얼

1428

라라벨 튜토리얼

1331

PHP 튜토리얼

1276

C# 튜토리얼

1256

Related knowledge

PHP는 장바구니 기능을 구현합니다. Jun 22, 2023 am 09:00 AM

우리 일상생활에서 온라인 쇼핑은 매우 흔한 소비 방식이 되었으며, 장바구니 기능 역시 온라인 쇼핑의 중요한 구성 요소 중 하나입니다. 그래서 이번 글에서는 PHP 언어를 사용하여 장바구니 관련 기능을 구현하는 방법을 소개하겠습니다. 1. 기술적 배경 장바구니는 온라인 쇼핑 웹사이트에서 흔히 사용되는 기능입니다. 사용자가 웹사이트에서 일부 제품을 검색할 때 이러한 항목을 가상 장바구니에 추가하면 후속 결제 과정에서 쉽게 선택하고 관리할 수 있습니다. 장바구니에는 일반적으로 다음과 같은 기본 기능이 포함됩니다. 항목 추가:

Java로 간단한 장바구니 기능을 구현하는 방법은 무엇입니까? Nov 02, 2023 am 11:56 AM

Java로 간단한 장바구니 기능을 구현하는 방법은 무엇입니까? 장바구니는 온라인 상점에서 사용자가 구매하고 싶은 상품을 장바구니에 담고, 상품을 관리할 수 있는 중요한 기능입니다. Java에서는 객체 지향 접근 방식을 사용하여 간단한 장바구니 기능을 구현할 수 있습니다. 먼저 제품 카테고리를 정의해야 합니다. 이 클래스에는 제품 이름, 가격, 수량과 같은 속성과 해당 Getter 및 Setter 메서드가 포함되어 있습니다. 예: publicclassProduct

실용 튜토리얼: PHP 및 MySQL을 사용한 장바구니 기능에 대한 자세한 설명 Mar 15, 2024 pm 12:27 PM

실용 튜토리얼: PHP 및 MySQL을 사용한 장바구니 기능에 대한 자세한 설명 장바구니 기능은 웹사이트 개발에서 흔히 사용되는 기능 중 하나입니다. 장바구니를 통해 사용자는 구매하려는 상품을 장바구니에 쉽게 추가할 수 있습니다. 그 후 정산 및 결제를 진행합니다. 이 기사에서는 PHP와 MySQL을 사용하여 간단한 장바구니 기능을 구현하는 방법을 자세히 설명하고 구체적인 코드 예제를 제공합니다. 데이터베이스와 데이터 테이블을 생성하려면 먼저 MySQL 데이터베이스에 제품 정보를 저장할 데이터 테이블을 생성해야 합니다. 다음은 간단한 데이터 테이블입니다.

PHP를 사용하여 간단한 장바구니 기능을 구현하는 방법 Sep 24, 2023 am 09:13 AM

PHP를 사용하여 간단한 장바구니 기능을 구현하는 방법 장바구니 기능은 전자상거래 웹사이트의 필수 부분입니다. 장바구니 기능을 사용하면 사용자가 관심 있는 항목을 장바구니에 추가한 후 결제를 진행하거나 계속 탐색하고 항목을 추가할 수 있습니다. . 이 기사에서는 PHP를 사용하여 간단한 장바구니 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 데이터베이스 및 테이블 생성 먼저 장바구니 데이터를 저장할 데이터베이스와 테이블을 생성해야 합니다. CREATEDATABASEshopping_ca

Redis와 JavaScript를 사용하여 장바구니 기능을 구현하는 방법 Sep 21, 2023 pm 01:27 PM

장바구니 기능을 구현하기 위해 Redis와 JavaScript를 사용하는 방법 장바구니는 전자상거래 웹사이트에서 매우 일반적인 기능 중 하나입니다. 구매한 상품을 언제든지 관리하세요. 이번 글에서는 Redis와 JavaScript를 이용하여 장바구니 기능을 구현하는 방법을 소개하고 구체적인 코드 예시를 제공하겠습니다. 1. 준비 시작하기 전에 Redis가 설치 및 구성되어 있는지 확인해야 하며, 이는 공식 웹사이트 [https:/

MySQL에서 쇼핑몰의 장바구니 테이블 구조를 어떻게 디자인하나요? Oct 30, 2023 pm 02:12 PM

MySQL에서 쇼핑몰의 장바구니 테이블 구조를 어떻게 디자인하나요? 전자상거래의 급속한 발전으로 장바구니는 온라인 쇼핑몰의 중요한 부분이 되었습니다. 장바구니는 이용자가 구매한 상품과 관련 정보를 저장하는 데 사용되며, 이용자에게 편리하고 빠른 쇼핑 경험을 제공합니다. MySQL에서 합리적인 장바구니 테이블 구조를 설계하면 개발자가 장바구니 데이터를 효과적으로 저장하고 관리하는 데 도움이 될 수 있습니다. 이 기사에서는 MySQL에서 쇼핑몰의 장바구니 테이블 구조를 설계하는 방법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다. 먼저 장바구니 테이블에는 다음이 포함되어야 합니다.

PHP 몰 개발 능력: 장바구니 디자인 및 주문 동기화 기능 Jul 30, 2023 pm 07:22 PM

PHP 쇼핑몰 개발 스킬: 장바구니 디자인 및 주문 동기화 기능 쇼핑몰 웹사이트에서 장바구니와 주문은 없어서는 안되는 기능입니다. 장바구니는 이용자가 상품을 구매하고 임시 장바구니에 저장하기 위해 사용되며, 주문은 이용자가 상품 구매를 확인한 후 생성되는 기록입니다. 사용자 경험을 향상시키고 오류를 줄이기 위해서는 장바구니 및 주문 동기화 기능을 설계하는 것이 매우 중요합니다. 1. 장바구니 및 주문의 개념 장바구니는 일반적으로 사용자가 구매한 상품을 보관하는 데 사용되는 임시 컨테이너입니다. 사용자는 쉽게 탐색하고 관리할 수 있도록 장바구니에 제품을 추가할 수 있습니다.

장바구니 수량 알림 기능을 갖춘 Java 스위치 식료품 쇼핑 시스템을 구현하는 방법 Nov 04, 2023 am 09:03 AM

장바구니 수량 알림 기능을 사용하여 Java 스위치 식료품 쇼핑 시스템을 구현하는 방법 인터넷의 급속한 발전으로 전자상거래가 점점 더 대중화되고 있습니다. 점점 더 많은 사람들이 휴대전화나 컴퓨터 웹페이지를 통해 쇼핑을 시작하여 편리하고 효율적인 쇼핑 경험을 즐기고 있습니다. 쇼핑 과정에서 장바구니는 사용자가 좋아하는 제품을 임시 "장바구니"에 담은 후 주문이 확인되면 결제를 진행할 수 있도록 도와주는 필수 도구입니다. 그러나 온라인 쇼핑 중에 사용자는 장바구니에 이미 여러 품목이 있다는 사실을 잊어버리는 경우가 있습니다. 그래서 장바구니를 디자인할 때

See all articles

네이티브 js 시뮬레이션 Taobao 장바구니 프로젝트 실제 전투

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제