首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onDecember 23, 2013 
<%@ 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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
JS 有名函数表达式全面解析
Mar 19 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象，回归迭代和循环】
May 07 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
JS原形与原型链深入详解
May 09 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 #Javascript
js写的评论分页(还不错)
Dec 23 #Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 #Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 #Javascript
jquery实现图片翻页效果
Dec 23 #Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 #Javascript
JS判断对象是否存在的10种方法总结
Dec 23 #Javascript
磁盘分区(1) 粒子对撞机(1) 太空(1) .NET Framework(2) 界面设计(1) DNS服务器(2) 对撞机(1) 夸克(1) 国际空间站(1) FTP服务器(1)
You might like
曾在DC漫画界反派角色扮演的演员，谁才是你心目中的小丑之王？
2020/04/09 欧美动漫
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
初识Node.js
2014/09/03 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
理理Vue细节（推荐）
2019/04/16 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python使用Pycharm创建一个Django项目
2018/03/05 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
python中的print()输出
2019/04/12 Python
Python线程指南分享
2019/11/19 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
日本土著品牌，综合型购物网站：Cecile
2016/08/23 全球购物
巴西体育用品商店：Lojão dos Esportes
2018/07/21 全球购物
牵手50香港：专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
俄罗斯苹果优质经销商商店：iPort
2020/05/27 全球购物
C#的几个面试问题
2016/05/22 面试题
《金色的脚印》教后反思
2014/04/23 职场文书
企业介绍信范文
2015/01/30 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
SQL Server2019数据库备份与还原脚本，数据库可批量备份
2021/11/20 SQL Server
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏