js購物車實作想法及程式碼(個人感覺不錯)_javascript技巧

複製程式碼 程式碼如下:

pageEncoding="utf-8"%>
字串路徑= request.getContextPath();
String basePath = request.getScheme() "://"
request.getServerName() ":" request.getServerPort()
路徑"/";
%>








正文{
背景：#fefbe6;
文字對齊：居中；
保證金：0;
填充：0;
顏色：#500f60;
}
li{
列表樣式🎜>列表樣式類型：無；
}
a:link{
列表樣式類型：無;
}
img{
寬度：100%;
高度：120px；
寬度：100%;
高度：120px；
寬度：100%;
高度：120px；
寬度：100%;
高度：120px； >}
#static{
邊距：0 自動；
文字對齊：左；
}
#main{
寬度：100%；
保證金：0 自動;
顏色：#530a4a;
位置：絕對；
上：110px;
}
#main ul{
}
#main ul li{
寬度🎜>寬度：20%;
浮動：左；
}
#main_t{
位置：絕對；
上方：140px;
顏色：#530a4a；
寬度：100%>寬度：100% ;
保證金：0;
填充：0;
字體大小：0.8em；
}
#main_t_l,#main_t_a{
顏色：#3f1262
;
寬度： 100%;
字型：0.8em;
}
#main_t_l ul li{
寬度：20%;
浮動：左；
}
#zon{
浮動：左；
}
#zon{
背景：#dbfff1;
顏色：#f8cd66;
}
.bot_in{
背景：#f1fcc4;
邊框：3px #f1fcc4 實心半徑； 6px 6px 6px;
-moz-border-radius: 6px;
}
#ji{
寬度：130px;
高度：30px;
寬度：130px;
高度：30px； 100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType= 0);
-ms-🎜>-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*/
背景:紅色;
背景：-moz-線性漸變(上, 紅色, rgba(0, 0, 255, 0.5));
背景:-webkit-gradient(線性, 0 0, 0 底部, from(#0dc613), to(rgba(111, 246, 116, 0.5)));
背景：-o-線性漸變(上, 紅色, rgba(0, 0, 255 , 0.5));
顏色：#fff;
保證金上限：6%;
邊框：無;
}
.ji {
寬度：130px;
高度：30px；
濾鏡：alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolor=strstr= 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*/
背景:紅色;
背景：-moz-線性漸變(上, 紅色, rgba(0, 0, 255, 0.5) );
背景:-webkit-gradient(線性, 0 0, 0 底部, from(#0dc613), to(rgba(111, 246, 116, 0.5)));
背景：-o-線性漸層(上, 紅, rgba(0, 0, 255, 0.5));
顏色：#fff;
保證金上限：6%;
邊框：無;
}


$(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();
vartotalprice = parseFloat($("#totalprice").text()) ;
varprice = parseFloat($(this).closest( "ul").find("#price").text());
if (!isNaN(num)) {
num ; if (num > 99) {
num = 99;
isAdd = false;
}
if(isAdd) {
totalprice = 總價價;
}
var總計= num * 價格; >$(this).closest("li").find("#num").text(num);
$(this).closest("ul").find(" #total").text (總計);
$.post("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();
vartotalprice = parseFloat($("#totalprice ").text());
var Price = parseFloat($(this).closest("ul").find("#price").text());
if (!isNaN(num )) {
num--;
if (num num = 1;
isReduce = false; } if(isReduce){ 總價格= 總價- 價格; } }
var 總計 = num * 價格；
$(this).closest("li").find("#num").text(num);
$(this).closest("ul").find("#total").text(total);
$.post("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("deleteFromShopCart.action","productId="productId,function(data){
if(data.success==true){
getShopCartInfo () ;
}
});
function getShopCartInfo(){
$.ajax({
type : "POST",
url : "findShopCart.動作",
成功：函數（資料）{
var row = "";
var list = data.list
$("#main_t_l").empty();
var總計= 0; (list!=null&&list.length!=0){
for(var i=0;i總計= 總計list[i].price * list[ i].num ;
row = "

"
"
• " list[i].productname "
"
"
• " list[i].price "￥
"
""
""
「” list[i].num " "
"-"
" "
「」
"
• " list[i].totalprice "￥
"
""
""
""
"

"
"

---

";
$(row).appendTo($("#main_t_l"));
$("#totalprice").find("span").text(total);
}
}else {
$("#main_t_l").append("

• 您的購物車為空，快去購物吧！

");
$("#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 = "";
}
}
}

• 单品


• 价格


• 数量


• 合计


• 删除

---

姓名:
联系方式:
地址:

总计
￥

>

身體>