南强小屋 Design By 杰米
复制代码 代码如下:
<%@ 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="/UploadFiles/2021-04-02/jquery.min.js"><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="/UploadFiles/2021-04-02/fan4.png"><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>
<%@ 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="/UploadFiles/2021-04-02/jquery.min.js"><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="/UploadFiles/2021-04-02/fan4.png"><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,购物车
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无js购物车实现思路及代码(个人感觉不错)的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。