Home > Article > Web Front-end > js shopping cart implementation ideas and code
js shopping cart implementation ideas and code
- 高洛峰Original
- 2017-02-04 13:52:382264browse
<%@ 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>
For more js shopping cart implementation ideas and code-related articles, please pay attention to the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JS implements a simple shopping cart with pictures and codeNext article：JS implements a simple shopping cart with pictures and code
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills