JavaWebhtml+js创建购物车表单以及连接数据库部分代码提⽰因为⼤作业需要设置购物车，并能从⽤户所在数据库表中导出，所以到了⼀个购物车模版，运⾏之后状态如下：
**
index.html：
**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>购物车</title>
<link rel="stylesheet"href="css/style.css"/>
<script type="text/javascript"src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript"src="js/js.js"></script>
</head>
<body>
<div id="box">
<div id="content_box">
<div class="imfor_top"><!--头⾏-->
<div class="check_top">
<input type="checkbox"id="all"/>全选
</div>
<div class="pudc_top">商品</div>
<div class="pices_top">单价</div>
<div class="num_top">数量</div>
<div class="totle_top">⼩计</div>
<div class="del_top">操作</div>
</div>
<div class="imfor"><!--每⼀⾏，在导⼊数据库后可将此模块循环输出，下⾯有介绍-->
<div class="check">
<input type="checkbox"class="Each"/>
</div>
<div class="pudc"><img src="img/1.jpg"/>Casio/卡西欧 EX-TR350</span>
</div>
<div class="pices">5999.8</div>
<div class="num"><span class="reduc"> - </span><input type="text"value="1"/><span class="add"> +</span></div> <div class="totle">5999.8</div>
<div class="del">删除</div>
</div>
<div class="imfor"><!--每⼀⾏-->
<div class="check">
<input type="checkbox"class="Each"/>
</div>
<div class="pudc"><img src="img/2.jpg"/><span>Canon/佳能 PowerShot SX50 HS</span></div>
<div class="pices"> 3888.5</div>
<div class="num"><span class="reduc"> - </span><input type="text"value="1"/><span class="add"> +</span></div> <div class="totle">3888.5</div>
<div class="del">删除</div>
</div>
<div class="imfor"><!--每⼀⾏-->
<div class="check">
<input type="checkbox"class="Each"/>
</div>
<div class="pudc"><img src="img/3.jpg"/><span>Sony/索尼 DSC-WX300</span></div>
<div class="pices">1428.5</div>
<div class="num"><span class="reduc"> - </span><input type="text"value="1"/><span class="add"> +</span></div> <div class="totle">1428.5</div>
<div class="del">删除</div>
</div>
</div>
<div class="imfor"><!--每⼀⾏-->
<div class="check">
<input type="checkbox"class="Each"/>
</div>
<div class="pudc"><img src="img/4.jpg"/><span>Fujifilm/富⼠ instax mini 25</span></div>
<div class="pices">640.6</div>
<div class="num"><span class="reduc"> - </span><input type="text"value="1"/><span class="add"> +</span></div> <div class="totle">640.6</div>
<div class="del">删除</div>
</div>
</div>
<div class="foot"><!--最后-->
<div class="foot_add">添加⼀⾏</div>
<div class="foot_del">全部删除</div>
<div class="foot_cash">结算</div>
<div class="foot_tol"><span>合计：￥</span><span id="susum">0</span></div>
</div>
</div>
</body>
</html>
**
style.css
**
*{
font-size: 14px;
font-family:"微软雅⿊";
vertical-align: middle;
margin: 0;
padding: 0;
}
img{
width: 160px;
height: 120px;
}
/*span{display: inline-block;}*/
.imfor_top div{
height: 40px;
background-color: deepskyblue;
font-weight: bold;
}
.imfor div{
height: 140px;
line-height: 120px;
}
.imfor:hover{
background:RGB(238, 246, 255);
}
.check,
.check_top{
width: 70px;
}
.pudc,
.pudc,
.
pudc_top{
width: 400px;
}
.pices,
.pices_top{
width: 60px;
}
.totle{
color: red;
}
.num,
.
num_top{
width: 90px;
}
.num input{
width: 40px;
}
.num span{
height: 23px;
width: 17px;
border: 1px solid #e5e5e5; background: #f0f0f0;
text-align: center;
line-height: 23px;
color: #444;
cursor: pointer;
}
.totle,
.totle_top{
width: 60px;
}
.del,
.del_top{
width: 60px;
cursor: pointer;
}
.imfor_top div,
.imfor div{
float: left;
border: 1px solid deepskyblue; text-align: center;
}
.imfor_top,
.imfor{
width: 800px;
}
.
foot{
float: inherit;
}
#box,
#content_box{
width: 800px;
margin: 0 auto;
}
.foot_add,
.foot_del{
float: left;
cursor: pointer;
margin-left: 10px;
margin-top: 14px;
}
.foot{
width: 800px;
background-color: #eaeaea;
}
.foot_tol,
.foot_cash{
float: right;
cursor: pointer;
width: 80px;
margin-top: 14px;
margin-left: 100px;
}
#susum{
color: red;
}
js.js:
$(function(){
totl();
adddel()
//全选
$("#all").click(function(){
all =$(this).prop("checked")
$(".Each").each(function(){
$(this).prop("checked", all);
})
})
//删除当前⾏
$(".del").each(function(){
$(this).click(function(){
$(this).parent().remove();
if($(".imfor").length ==0){
$("#susum").text(0);
}
totl();
})
})
//添加⼀⾏
$(".foot_add").click(function(){
var str ='<div class="imfor">'+
'<div class="check">'+
'<input type="checkbox" class="Each" />'+
'</div>'+
'<div class="pudc"><img src="img/5.jpg" /><span>Fujifilm/富⼠ instax mini 25</span></div>'+
'<div class="pices">640.6</div>'+
'<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>'+ '<div class="totle">640.6</div>'+
'<div class="del">删除</div>'+
'</div>';
$(this).parent().prev().append(str);
totl();
adddel()
$(".del").each(function(){
$(this).click(function(){
$(this).parent().remove();
totl();
})
})
})
//全选删除
$(".foot_del").click(function(){
$(".Each").each(function(){
if($(this).prop('checked')){
$(this).parents(".imfor").remove();
totl();
if($(".imfor").length ==0){
$("#susum").text(0);
}
}
})
})
})
//合计
function totl(){
var sum =0;
$(".totle").each(function(){
sum +=parseFloat($(this).text());
$("#susum").text(sum);
})
}
function adddel(){
//⼩计和加减
//加
$(".add").each(function(){
$(this).click(function(){
var $multi =0;
var vall =$(this).prev().val();
vall++;
$(this).prev().val(vall);
$multi =parseFloat(vall)*parseFloat($(this).parent().prev().text());
$(this).parent().next().und($multi));
totl();
})
})
//减
$(".reduc").each(function(){
$(this).click(function(){
var $multi1 =0;
var vall1 =$(this).next().val();
vall1--;
if(vall1 <=0){
vall1 =1;
}
$(this).next().val(vall1);
$multi1 =parseFloat(vall1)*parseFloat($(this).parent().prev().text());
$(this).parent().next().und($multi1));
totl();
网页购物车代码})
})
}
上⾯三个是未调⽤数据库时的模版，需要运⽤jquery。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论