js购物车

最新推荐文章于 2016-06-02 14:57:20 发布
最新推荐文章于 2016-06-02 14:57:20 发布
阅读量841 收藏 3
点赞数
分类专栏： jquery 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012635819/article/details/17501071
版权 
<%@ 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" οnblur="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>

angel豆蔻年华
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现购物车动态功能
weixin_30933531的博客
05-25 5705
整理了一下当时学js写的一些案例，觉得购物车功能在一般网站比较常见且基础，现在把它整理出来，需要的小伙伴可以参考一下。 该案例购物车主要功能如下： 1、 商品单选、全选、反选功能 2、 商品添加、删除功能 3、 商品价格自动计算 具体效果： 打开效果 添加商品数量（自动计算价格）： 取消选择： 删除商品： 商品显示与隐藏： 做这个案例呢我用了之前自己封装的框架，所以需要的小伙伴，要到我的...
基于Jquery的简易限时购物导航滚动栏
Aichiwawacai的博客
12-21 220
#原生js的限时购物导航滚动栏 ##效果图 插件名称：LimitTimeNavScroll.js 同时需要下载相应的css文件 下载地址 https://github.com/sanmiaomiao/LimitTimeNavScroll 引入即使用方法参见上面链接其中的index.html 如何对你有用麻烦star一下哟(＾Ｕ＾)ノ~ ...
一个很给力的js购物车程序
热门推荐
apensu的专栏
08-20 1万+
资源：http://simplecartjs.org/ 文档相当齐全：http://simplecartjs.org/documentation/ ①、引入代码： "> "> "> "> simpleCart({ checkout: { type: "SendForm", url: "http://52taoyy.com/module
js实现购物车
Uking201410的博客
06-02 830
getTotal: 获取全选框 获取选择框 用一个for循环判断哪个框被选择了，选择了的话，把单价乘以数量累加到总价格 全选框onclick：效果是全选框被选择了，然后下面的所有选择框都会被选中（for），  同时：总价改变，商品总数改变。如果是取消了全选框则下面的所有选择框都会被取消，  同时：总价改变，商品总数改变。往商品件数div里添加（或删除）该商品的图片 选
JavaScript案例-js购物车
最新发布
02-16
在这个“JavaScript案例-js购物车”中，我们将深入探讨如何使用JavaScript技术来构建一个基本的在线购物车功能。购物车是电商网站不可或缺的一部分，它允许用户选择商品并保存这些选择，直到他们准备结账。 首先，...
js购物车demo.zip
08-11
【JavaScript购物车实现原理】 购物车是Web前端开发中一个重要的功能模块，尤其在电商网站中扮演着核心角色。JS购物车Demo展示了如何利用JavaScript来处理用户选择的商品、数量、价格等信息，以及如何实现商品的...
javascript 购物车 有数据库
11-14
javascript 购物车 数据库 根据用户的登录状态，如果用户没有登录，则用户加入到购物车中的产品，存储到session中；如果用户登录，则将用户购物车中的产品存储到数据库中或者从数据库中读取数据显示购物车列表。
纯JS实现前端购物车案例.rar
04-08
购物车案例功能介绍：1、添加购物车，清单库存数量会对应减少，库存不足会警告；2、从购物车删除，库存将返回清单，总价相应变化；3、点击"-"，数量会返回到清单库存；4、点击"+"，清单中库存会减少，库存不足会警告...
js 购物车
01-08
JavaScript（简称JS）购物车是Web应用程序中一个关键的组件，它允许用户选择商品...以上就是JavaScript购物车功能实现的关键知识点，通过学习和实践这些技术，你可以创建一个功能完备、用户体验良好的在线购物车系统。
jquery实现登录验证
稻香的专栏
11-13 6508
仿着例子  可以实现登录  验证  直接上代码                //<![CDATA[ $(function(){ //文本框失去焦点后 $('form :input').blur(function(){ var $parent = $(this).parent();
PhotoSwipe动态加载图片
稻香的专栏
12-14 3018
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.get
js 订单代码
稻香的专栏
12-23 2749
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getS
js 点击数量加一 操作数据库
稻香的专栏
12-23 1920
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServe
$id=$(".img").find("[imgs==1]").attr("id"); 解释
稻香的专栏
12-02 1260
jquery查找的代码 $(".img") 获取class='img'的元素 返回是个集合 $(".img").find("[imgs==1]") 默认从第一个 class='img'的元素 中，查找子 属性imgs等于1的子元素 返回是个集合 $(".img").find("[imgs==1]").attr("id") 返回子元素集合中的第一个元素的 id属性 但是这个有隐患的。如果 $("
ajax增上改查
稻香的专栏
12-14 685
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getSer
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值