首页
所有分类
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 相关文章推荐
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 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
lua(3) ref(1) 匹配(1) 全表扫描(1) 索引树扫描(1) 绝对定位(1) 相对定位(1) geoserver(1) postcss-px2rem(1) sql模式(1)
You might like
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
jQuery源码分析之Event事件分析
2010/06/07 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
python网络编程之UDP通信实例（含服务器端、客户端、UDP广播例子）
2014/04/25 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
python操作文件的参数整理
2019/06/11 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
Python中的延迟绑定原理详解
2019/10/11 Python
python字符串的拼接方法总结
2019/11/18 Python
python读取Kafka实例
2019/12/23 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
建筑设计师岗位职责
2013/11/18 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
运动会广播稿30字
2014/01/21 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
高一军训的心得体会
2014/09/01 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
详解Python常用的魔法方法
2021/06/03 Python
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
python实现学员管理系统(面向对象版)
2022/06/05 Python