jQuery는 장바구니 자동 정산 효과를 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jQuery는 장바구니 자동 정산 효과를 구현합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:46 PM

jquery형태장바구니

본 글의 예시에서는 장바구니 양식에 jQuery를 적용해 자동 결제하는 효과를 설명하고 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

여기서 jQuery는 장바구니 양식의 자동 정산을 구현합니다. 사용자가 구매한 상품의 수량만 입력하면 타오바오의 장바구니와 마찬가지로 상품의 총 금액과 배송 금액이 적시에 계산됩니다. 정산 기능은 jquery를 사용하여 적시에 계산됩니다. 웹 페이지를 새로 고치지 않고 Ajax 계산하는 기능이 구현되었습니다. 쇼핑 웹 사이트를 구축하는 사람들은 이 예를 사용할 수 있습니다.

런닝 효과 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery购物车表单自动结算</title>
<style>
*{margin:0;padding:0;}
body{font:12px "Lucida Grande", Helvetica, Sans-Serif;padding:50px;}
table{border-collapse:collapse;}
#order-table{width:100%;}
#order-table td{padding:5px;}
#order-table th{padding:5px;background:black;color:white;text-align:left;}
#order-table td.row-total{text-align:right;}
#order-table td input{width:75px;text-align:center;}
#order-table tr.even td{background:#eee;}
#order-table td .total-box,.total-box{border:3px solid green;width:70px;padding:3px;margin:5px 0 5px 0;text-align:center;font-size:14px;}
#shipping-subtotal{margin:0;}
#shipping-table{width:350px;float:right;}
#shipping-table td{padding:5px;}
#shipping-table th{padding:5px;background:black;color:white;text-align:left;}
#shipping-table td input{width:69px;text-align:center;}
#order-total{font-weight:bold;font-size:21px;width:110px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function IsNumeric(sText)
{
 var ValidChars = "0123456789.";
 var IsNumber=true;
 var Char;
 for (i = 0; i < sText.length && IsNumber == true; i++)
 {
 Char = sText.charAt(i);
 if (ValidChars.indexOf(Char) == -1)
  {
  IsNumber = false;
  }
 }
 return IsNumber;
};
function calcProdSubTotal() {
 var prodSubTotal = 0;
 $(".row-total-input").each(function(){
 var valString = $(this).val() || 0;
 prodSubTotal += parseInt(valString);
 });
 $("#product-subtotal").val(prodSubTotal);
};
function calcTotalPallets() {
 var totalPallets = 0;
 $(".num-pallets-input").each(function() {
 var thisValue = $(this).val();
 if ( (IsNumeric(thisValue)) && (thisValue != '') ) {
  totalPallets += parseInt(thisValue);
 };
 });
 $("#total-pallets-input").val(totalPallets);
};
function calcShippingTotal() {
 var totalPallets = $("#total-pallets-input").val() || 0;
 var shippingRate = $("#shipping-rate").text() || 0;
 var shippingTotal = totalPallets * shippingRate;
 $("#shipping-subtotal").val(shippingTotal);
};
function calcOrderTotal() {
 var orderTotal = 0;
 var productSubtotal = $("#product-subtotal").val() || 0;
 var shippingSubtotal = $("#shipping-subtotal").val() || 0;
 var orderTotal = parseInt(productSubtotal) + parseInt(shippingSubtotal);
 var orderTotalNice = "$" + orderTotal;
 $("#order-total").val(orderTotalNice);
};
$(function(){
 $('.num-pallets-input').blur(function(){
 var $this = $(this);
 var numPallets = $this.val();
 var multiplier = $this
    .parent().parent()
    .find("td.price-per-pallet span")
    .text();
 if ( (IsNumeric(numPallets)) && (numPallets != '') ) {
  var rowTotal = numPallets * multiplier;
  $this
  .css("background-color", "white")
  .parent().parent()
  .find("td.row-total input")
  .val(rowTotal);
 } else {
  $this.css("background-color", "#ffdcdc");
 };
 calcProdSubTotal();
 calcTotalPallets();
 calcShippingTotal();
 calcOrderTotal();
 });
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<h1 id="jQuery购物车自动计算表单金额">jQuery购物车自动计算表单金额</h1>
<table id="order-table">
 <tr>
  <th>商品名称</th>
  <th>数量</th>
  <th>X</th>
  <th>单价</th>
  <th>=</th>
  <th style="text-align: right;">总计</th>
 </tr>
 <tr class="odd">
  <td class="product-title">裤子</td>
  <td class="num-pallets">
   <input type="text" class="num-pallets-input" id="turface-pro-league-num-pallets" ></input>
  </td>
  <td class="times">X</td>
  <td class="price-per-pallet">$<span>340</span></td>
  <td class="equals">=</td>
  <td class="row-total">
   <input type="text" class="row-total-input" id="turface-pro-league-row-total" disabled="disabled"></input>
  </td>
 </tr>
 <tr class="even">
  <td class="product-title">袜子</td>
  <td class="num-pallets">
   <input type="text" class="num-pallets-input" id="turface-pro-league-red-num-pallets"></input>
  </td>
  <td class="times">X</td>
  <td class="price-per-pallet">$<span>455</span></td>
  <td class="equals">=</td>
  <td class="row-total">
   <input type="text" class="row-total-input" id="turface-pro-league-red-row-total" disabled="disabled"></input>
  </td>
 </tr>
 <tr class="odd">
  <td class="product-title">婴儿用品</td>
  <td class="num-pallets">
   <input type="text" class="num-pallets-input" id="turface-quick-dry-num-pallets" ></input>
  </td>
  <td class="times">X</td>
  <td class="price-per-pallet">$<span>300</span></td>
  <td class="equals">=</td>
  <td class="row-total">
   <input type="text" class="row-total-input" id="turface-quick-dry-row-total" disabled="disabled"></input>
  </td>
 </tr>
 <tr class="even">
  <td class="product-title">电脑用品</td>
  <td class="num-pallets">
   <input type="text" class="num-pallets-input" id="turface-mound-clay-red-num-pallets"></input>
  </td>
  <td class="times">X</td>
  <td class="price-per-pallet">$<span>410</span></td>
  <td class="equals">=</td>
  <td class="row-total">
   <input type="text" class="row-total-input" id="turface-mound-clay-red-row-total" disabled="disabled"></input>
  </td>
 </tr>
 <tr class="odd">
  <td class="product-title">汽车装饰用品</td>
  <td class="num-pallets">
   <input type="text" class="num-pallets-input" id="diamond-pro-red-num-pallets" ></input>
  </td>
  <td class="times">X</td>
  <td class="price-per-pallet">$<span>365</span></td>
  <td class="equals">=</td>
  <td class="row-total">
   <input type="text" class="row-total-input" id="diamond-pro-red-row-total" disabled="disabled"></input>
  </td>
 </tr>
 <tr class="even">
  <td class="product-title">家居装饰用品</em></td>
  <td class="num-pallets">
   <input type="text" class="num-pallets-input" id="diamond-pro-drying-agent-num-pallets"></input>
  </td>
  <td class="times">X</td>
  <td class="price-per-pallet">$<span>340</span></td>
  <td class="equals">=</td>
  <td class="row-total">
   <input type="text" class="row-total-input" id="diamond-pro-drying-agent-row-total" disabled="disabled"></input>
  </td>
 </tr>
 <tr class="odd">
  <td class="product-title">生活用品</td>
  <td class="num-pallets">
   <input type="text" class="num-pallets-input" id="diamond-pro-professional-num-pallets" ></input>
  </td>
  <td class="times">X</td>
  <td class="price-per-pallet">$<span>375</span></td>
  <td class="equals">=</td>
  <td class="row-total">
   <input type="text" class="row-total-input" id="diamond-pro-professional-row-total" disabled="disabled"></input>
  </td>
 </tr>
 <tr class="even">
  <td class="product-title">建材用品</td>
  <td class="num-pallets">
   <input type="text" class="num-pallets-input" id="diamond-pro-top-dressing-num-pallets"></input>
  </td>
  <td class="times">X</td>
  <td class="price-per-pallet">$<span>340</span></td>
  <td class="equals">=</td>
  <td class="row-total">
   <input type="text" class="row-total-input" id="diamond-pro-top-dressing-row-total" disabled="disabled"></input>
  </td>
 </tr>
 <tr>
  <td colspan="6" style="text-align: right;">产品小计:
   <input type="text" class="total-box" id="product-subtotal" disabled="disabled"></input>
  </td>
 </tr>
</table>
<table id="shipping-table">
 <tr>
  <th>总数量.</th>
  <th>X</th>
  <th>运费</th>
  <th>=</th>
  <th style="text-align: right;">总运费</th>
 </tr>
 <tr>
  <td id="total-pallets">
   <input id="total-pallets-input" type="text" disabled="disabled"></input>
  </td>
  <td>X</td>
  <td id="shipping-rate">10.00</td>
  <td>=</td>
  <td style="text-align: right;">
  <input type="text" class="total-box" id="shipping-subtotal" disabled="disabled"></input>
  </td>
 </tr>
</table>
<div class="clear"></div>
<div style="text-align:right;">
 <span>订单总额: </span>
 <input type="text" class="total-box" id="order-total" disabled="disabled"></input>
 <br /><br />
 <input type="submit" value="提交结账" class="submit" />
</div>
</body>
</html>

이 기사가 모든 사람의 jquery 프로그래밍 설계에 도움이 되기를 바랍니다.

성명

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

관련 기사

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

JavaScript를 어떻게 설치합니까?Apr 05, 2025 am 12:16 AM

JavaScript는 이미 최신 브라우저에 내장되어 있기 때문에 설치가 필요하지 않습니다. 시작하려면 텍스트 편집기와 브라우저 만 있으면됩니다. 1) 브라우저 환경에서 태그를 통해 HTML 파일을 포함하여 실행하십시오. 2) Node.js 환경에서 Node.js를 다운로드하고 설치 한 후 명령 줄을 통해 JavaScript 파일을 실행하십시오.