js ショッピングカートの実装アイデアとコード-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

js ショッピングカートの実装アイデアとコード

高洛峰

Feb 04, 2017 pm 01:52 PM

<%@ page language="java" contentType="text/html; charset=utf-8" 
pageEncoding="utf-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme() + "://" 
+ request.getServerName() + ":" + request.getServerPort() 
+ path + "/"; 
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<title>购物车</title> 
<style type="text/css"> 
body{ 
background: #fefbe6; 
text-align: center; 
margin: 0; 
padding: 0; 
color: #500f60; 
} 
li{ 
list-style-type: none; 
} 
a:link{ 
list-style-type: none; 
} 
img{ 
width: 100%; 
height: 120px; 
} 
#static{ 
margin: 0 auto; 
text-align: left; 
} 
#main{ 
width: 100%; 
margin: 0 auto; 
color: #530a4a; 
position: absolute; 
top:110px; 
} 
#main ul{ 
} 
#main ul li{ 
width: 20%; 
float: left; 
} 
#main_t{ 
position: absolute; 
top:140px; 
color: #530a4a; 
width: 100%; 
margin: 0; 
padding: 0; 
font-size: 0.8em; 
} 
#main_t_l,#main_t_a{ 
color: #3f1262; 
width: 100%; 
font-size: 0.8em; 
} 
#main_t_l ul li{ 
width: 20%; 
float: left; 
} 
#zon{ 
background: #dbfff1; 
color: #f8cd66; 
} 
.bot_in{ 
background: #f1fcc4; 
border: 3px #f1fcc4 solid; 
border-radius: 6px 6px 6px 6px; 
-moz-border-radius: 6px; 
} 
#ji{ 
width:130px; 
height:30px; 
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); 
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/ 
background:red; 
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#0dc613), to(rgba(111, 246, 116, 0.5))); 
background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 
color: #fff; 
margin-top:6%; 
border: none; 
} 
.ji { 
width:130px; 
height:30px; 
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0); 
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/ 
background:red; 
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#0dc613), to(rgba(111, 246, 116, 0.5))); 
background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 
color: #fff; 
margin-top:6%; 
border: none; 
} 
</style> 
<script type="text/javascript"> 
$(function() { 
//点击加号购物车数量增加1 
$(".add").live("click",function(){ 
var isAdd = true; 
var num = parseInt($(this).closest("li").find("#num").text()); 
var productId = $(this).closest("li").find("#productId").val(); 
var totalprice = parseFloat($("#totalprice").text()); 
var price = parseFloat($(this).closest("ul").find("#price").text()); 
if (!isNaN(num)) { 
num++; 
if (num > 99) { 
num = 99; 
isAdd = false; 
} 
if(isAdd) { 
totalprice = totalprice + price; 
} 
} 
var total = num * price; 
$(this).closest("li").find("#num").text(num); 
$(this).closest("ul").find("#total").text(total); 
$.post("<%=basePath%>updateShopCart.action","productId="+productId+"&num="+num,function(data){ 
if(data.success==true){ 
$("#totalprice").text(totalprice); 
} 
}); 
}); 
//点击加号购物车数量减少1 
$(".delete").live("click",function(){ 
var isReduce = true; 
var num = parseInt($(this).closest("li").find("#num").text()); 
var productId = $(this).closest("li").find("#productId").val(); 
var totalprice = parseFloat($("#totalprice").text()); 
var price = parseFloat($(this).closest("ul").find("#price").text()); 
if (!isNaN(num)) { 
num--; 
if (num < 1) { 
num = 1; 
isReduce = false; 
} 
if(isReduce){ 
totalprice = totalprice - price; 
} 
} 
var total = num * price; 
$(this).closest("li").find("#num").text(num); 
$(this).closest("ul").find("#total").text(total); 
$.post("<%=basePath%>updateShopCart.action","productId="+productId+"&num="+num,function(data){ 
if(data.success==true){ 
$("#totalprice").text(totalprice); 
} 
}); 
}); 
$("#cha").live("click",function() { 
var productId = $(this).closest("ul").find("#productId").val(); 
$.post("<%=basePath%>deleteFromShopCart.action","productId="+productId,function(data){ 
if(data.success==true){ 
getShopCartInfo(); 
} 
}); 
}); 
function getShopCartInfo(){ 
$.ajax({ 
type : "POST", 
url : "<%=basePath%>findShopCart.action", 
success : function(data) { 
var row = ""; 
var list = data.list; 
$("#main_t_l").empty(); 
var total = 0; 
if(list!=null&&list.length!=0){ 
for(var i=0;i<list.length;i++){ 
total = total + list[i].price * list[i].num; 
row = "<ul>"+ 
"<li style=\"width: 17%;text-align: center;\">"+list[i].productname+"</li>"+ 
"<li style=\"width: 17%;text-align: center;\" id=\"price\">"+list[i].price+"￥</li>"+ 
"<li style=\"width: 30%;text-align: center;\">"+ 
"<input type=\"hidden\" id=\"productId\" value="+list[i].id+">"+ 
"<button style=\"background: #dbddd4;border-top: none;border: 1px #dbddd4 solid; border-radius: 1px 1px 1px 1px;-moz-border-radius: 1px;\" id=\"num\">"+list[i].num+"</button>"+ 
"<button style=\"background: #f5e3d5;border-top: none;border: 1px #f5e3d5 solid; border-radius: 1px 1px 1px 1px;-moz-border-radius: 1px; color: #c19268;\" class=\"delete\">-</button>"+ 
"<button style=\"background: #f5e3d5;border-top: none;border: 1px #f5e3d5 solid; border-radius: 1px 1px 1px 1px;-moz-border-radius: 1px; color: #c19268;\" class=\"add\">+</button>"+ 
"</li>"+ 
"<li style=\"width: 18%;text-align: center;\"><span id=\"total\">"+list[i].totalprice+"￥</span></li>"+ 
"<li style=\"width: 18%;text-align: center;\">"+ 
"<img src=\"<%=basePath%>image/cha.png\" style=\"width: 25px;height: 25px\" id=\"cha\">"+ 
"</li>"+ 
"</ul>"+ 
"<hr size=\"3px;\" color=\"#c1c1c1\" style=\"width: 100%;\">"; 
$(row).appendTo($("#main_t_l")); 
$("#totalprice").find("span").text(total); 
} 
}else { 
$("#main_t_l").append("<ul><li style=\"width: 100%;text-align: center;\">您的购物车为空,快去购物吧！</li></ul>"); 
$("#totalprice").find("span").text(0); 
} 
} 
}); 
} 
//提交订单 
$("#ji").click(function(){ 
var name = $("#name").val(); 
var tele = $("#tele").val(); 
var address = $("#address").val(); 
var totalprice = $("#totalprice").find("span").text(); 
if(totalprice == 0){ 
alert("购物车为空，不能提交订单!"); 
return; 
} 
if(name==""){ 
alert("姓名不能为空!"); 
return; 
} 
if(tele==""){ 
alert("电话不能为空!"); 
return; 
} 
if(address==""){ 
alert("地址不能为空!"); 
return; 
} 
$("#ji").attr("disabled","disabled"); 
$("#ji").css("background","#808080"); 
document.getElementById("bgDiv").style.visibility = "visibility"; 
document.getElementById("myspin").style.visibility = "visibility"; 
$.post("<%=basePath%>addShopCart.action","name="+name+"&telephone="+tele+"&address="+address,function(data){ 
if(data.success == true) { 
getShopCartInfo(); 
alert("提交成功"); 
}else { 
alert("提交失败,请重新提交!"); 
$("#ji").addClass("ji"); 
$("#ji").attr("disabled",""); 
} 
}); 
}); 
window.onload = getShopCartInfo(); 
window.onload = function() { 
document.getElementById("bgDiv").style.visibility = "hidden"; 
document.getElementById("myspin").style.visibility = "hidden"; 
}; 
}); 
//验证联系方式 
function validTeleNum() { 
var tel = /(^[0-9]{3,4}[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^[0-9]{3,4}\-[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/; 
if (document.getElementById("tele").value != &#39;&#39;) { 
if (!tel.test(document.getElementById("tele").value)) { 
alert("联系电话格式不正确,请重新输入!"); 
document.getElementById("tele").value = ""; 
} 
} 
} 
</script> 
</head> 
<body> 
<jsp:include page="../jsp/progress.jsp"></jsp:include> 
<div id="static"> 
<div style="text-align: left;"> 
<a href="javascript:history.go(-1)"><img src="<%=basePath %>pic/fan4.png" style="width: 15%;height:50px;position: absolute; top:50px;"></a> 
<img src="<%=basePath %>pic/top5.jpg"> 
</div> 
<div> 
<div id="main"> 
<div> 
<ul> 
<li style="width: 17%;text-align: center;">单品</li> 
<li style="width: 17%;text-align: center;">价格</li> 
<li style="width: 30%;text-align: center;">数量</li> 
<li style="width: 18%;text-align: center;">合计</li> 
<li style="width: 18%;text-align: center;">删除</li> 
</ul> 
</div> 
</div> 
<div id="main_t"> 
<div id="main_t_l" style="margin-top: 20px;"> 
</div> 
<div id="main_t_a" style="margin-top: 20px;"> 
<hr size="3px;" color="#c1c1c1" style=" width: 100%; margin-top: 50px;"> 
<div id="zon"><br> 
</div> 
<table align="center"> 
<tr> 
<td>姓名:</td> 
<td><input type="text" class="bot_in" id="name"/></td> 
</tr> 
<tr> 
<td>联系方式:</td> 
<td><input type="text" class="bot_in" id="tele" onblur="validTeleNum()"/></td> 
</tr> 
<tr> 
<td>地址:</td> 
<td><input type="text" class="bot_in" id="address"/></td> 
</tr> 
</table> 
<div style="margin-left:60%;"> 
<span style="font-size: 1.2em; color: #f8cd66;">总计</span> 
<button style="background: #f1fcc4; margin-left:5px;border: 3px #f1fcc4 solid; border-radius: 3px 3px 3px 3px;-moz-border-radius: 3px; color: #000;" id="totalprice"><span></span>￥</button> 
<br><br> 
</div> 
<div style="background: #f1fcc4 ;" align="center"> 
<input type="button" id="ji" value="提交订单"></input><br> 
<span style="font-size: 2em; color: #a6ae87; margin-left: 93%;">></span> 
</div> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html>

ログイン後にコピー

その他の js ショッピングカートの実装アイデアやコード関連の記事については、PHP 中国語 Web サイトに注目してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7690

Java チュートリアル

1639

CakePHP チュートリアル

1393

Laravel チュートリアル

1287

PHP チュートリアル

1229

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。