首頁 > web前端 > js教程 > js購物車實作想法及程式碼(個人感覺不錯)_javascript技巧

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

WBOY
發布: 2016-05-16 17:07:42
原創
1282 人瀏覽過
複製程式碼 程式碼如下:

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 "¥
  • "
    ""
    "js購物車實作想法及程式碼(個人感覺不錯)_javascript技巧"
    ""
    "
"
"
";
$(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 = "";
}
}
}













  • 单品

  • 价格

  • 数量

  • 合计

  • 删除


























姓名:
联系方式:
地址:


总计








>





身體>
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板