js购物车实现思路及代码(个人感觉不错)

前端技术 2023/09/03 JavaScript
复制代码 代码如下:

<%@ 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 != \'\') {
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>

本文地址：https://www.stayed.cn/item/6745

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案