HTML代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/01.css" rel="stylesheet" type="text/css"
media="all" />
<title>淘宝购物车</title>
<script>
//对商品进行增加或者减少
//对商品进行增加
function plusNum(name1){
var Name = document.getElementsByName(name1);
//获取当前商品的的信息
var Num = Name[1].value;
if(Num>=100){
alert("库存不足！");
Num--;
}
Num++;
Name[1].value = Num;
}
//对商品数量进行降低
function lowNum(name1){
var Name = document.getElementsByName(name1);
var Num = Name[1].value;
if(Num<=1){
alert("宝贝不能减少了呢");
Num++;
}
Num--;
Name[1].value = Num;
}
//对商品进行删除命令
//根据当前表格的索引号进行商品的删除
function deleteRow(rowId){
var Index=document.getElementById(rowId).rowIndex;
//获取当前行的索引号
document.getElementById("tab1").deleteRow(Index);
alert("宝贝不能减少了呢");
}
function deleteRow(rowId){
var Index=document.getElementById(rowId).rowIndex;
document.getElementById("tab1").deleteRow(Index);
}
function disp_alert()
{
alert("")
}
</script>
<script type="text/javascript"
src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
//checkbox 全选/取消全选
var isCheckAll = false;
function swapCheck() {
if (isCheckAll) {
$("input[type='checkbox']").each(function() {
this.checked = false;
});
isCheckAll = false;
} else {
$("input[type='checkbox']").each(function() {
this.checked = true;
});
isCheckAll = true;
}
}
</script>
</head>
<body>
<div>
<img src="img/4.png"/>
<td width="350px"><font size="5" color="">购物车</font></td>
<td width="60px"> </td>
                       
                               
                               
                               
     
<input width="10px" id="box" style="width: 350px; height: 30px; color:blanchedalmond; border: 2px solid red;" type="text" name="search" placeholder="请输入关键字">
<input width="350px" style="width: 80px; height: 35px; color:blanchedalmond;border: none;" class="footer" id="search" type="button" value="搜索">
</div>
<table border="0">
<td width="125px"> <input type="checkbox" id="check" onclick="swapCheck()">全选</td>
<td width="330px">商品信息</td>
<td width="250px">价格</td>
<td width="280px">数量</td>
<td width="200px">操作</td>
<td> 加入收藏夹</td>
</tr>
</table>
<table>
<tr>
<td > <input type="checkbox"><img src="img/5.png"/>
<a href="https://adidas.tmall.com/?spm=a220o.1000855.1997427721.d4918089.6bed1b60PGORGK" target="_blank">店铺：阿迪达斯旗舰店</a></td>
</tr>
</table>
<table id="tab1">
<!-- 第一件商品 -->
<tr id="shop1">
<td width="85px"><input type="checkbox" name="shopName" onClick="swapCheck()"/></td>
<td width="380px"><img class="s1"src="img/6.jpg" height="50" width="50"/>
<a href="https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.4.69997484m5j4Mn&id=596106537576" target="_blank">阿迪达斯官网三叶草 女子经典运动鞋 39码</a>
<br/>
<img src="img/1.png"/><img src="img/2.png"/><img src="img/3.png"/>
</td>
<td width="220px" ><font size="3" color="red">999</font></td>
<td width="300px"><input type="button" value="-" name="三叶草" onClick="lowNum('三叶草');allNum();allPrice();">
<input type="text" value="1" size="3" name="三叶草" onClick="allNum();" onChange="allPrice();">
<input type="button" value="+" name="三叶草" onClick="plusNum('三叶草');allNum();allPrice();"></td>
<td width="220px"><input type="button" value="删除" class="delete" onClick="deleteRow('shop1');allNum();allPrice();"></td>
<td width="300px"><input type="button" value="收藏" ></td>
</tr>
<!-- 第二件商品 -->
<tr id="shop2">
<td width="85px"><input type="checkbox" name="shopName" onClick="swapCheck()"/></td>
<td width="380px"> <img class="s1"src="img/7.jpg" height="50" width="50"/>
<a href="https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.13.69997484m5j4Mn&id=584192872965" target="_blank">阿迪达斯官网 ULTRABOOST 20</a><br/>
<img src="img/1.png"/><img src="img/2.png"/><img src="img/3.png"/></td>
<td width="220px"><font size="3" color="red">899</font></td>
<td width="300px"><input type="button" value="-" name="TRABOOST" onClick="lowNum('TRABOOST');allNum();allPrice();">
<input type="text" value="1" size="3" name="TRABOOST" onClick="allNum();">
<input type="button" value="+" name="TRABOOST" onClick="plusNum('TRABOOST');allNum();allPrice();"></td>
<td width="220px"><input type="button" value="删除" class="delete" onClick="deleteRow('shop2');allNum();allPrice();"></td>
<td width="60px"><input type="button" value="收藏" ></td>
</tr>
<!-- 第三件商品 -->
<tr id="shop3">
<td width="85px"><input type="checkbox" name="shopName" onClick="swapCheck()"/></td>
<td width="380px"> <img class="s1"src="img/8.jpg" height="50" width="50"/>
<a href="https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.22.69997484m5j4Mn&id=613075008444" target="_blank">阿迪达斯官网UltraBOOST男女跑步运动鞋</a><br/>
<img src="img/1.png"/><img src="img/2.png"/><img src="img/3.png"/></td>
<td width="220px"><font size="3" color="red">699</font></td>
<td width="300px"><input type="button" value="-" name="UltraBOOST" onClick="lowNum('UltraBOOST');allNum();allPrice();">
<input type="text" value="1" size="3" name="UltraBOOST" onClick="allNum();">
<input type="button" value="+" name="UltraBOOST" onClick="plusNum('UltraBOOST');allNum();allPrice();"></td>
<td width="220px"><input type="button" value="删除" class="delete" onClick="deleteRow('shop3');allNum();allPrice();"></td>
<td width="4px"><input type="button" value="收藏" ></td>
</tr>
</table>
</table>
<!-- 结算商品 -->
<table type="checkbox" id="check"border="0">
<tr>
<td width="60px"> </td>
<td width="60px"> </td>
<td width="60px"> </td>
<td width="60px"> </td>
<td width="60px"> </td>
<td width="60px"> </td>
<td width="60px"> </td>
<td>                            
                             
                             
                              合计（不含运费）：0元</td>
<td width="80px"><input type="button" class="footer"color="black" style="width: 80px; height: 35px; color:blanchedalmond;border: none;" value="结算" ></td>
</tr>
</table>
</body>
</html>
</html>
支付页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>支付页面</title>
</head>
<body>
<td width="200px">选择支付方式：</td>
<td width="380px"><img class="s1"src="img/9.png" height="50" width="50"/>
<td width="80px"><a href="http://127.0.0.1:8848/%E8%B4%AD%E7%89%A9%E8%BD%A602/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F%E9%A1%B5%E9%9D%A2.html" target="_blank">
<input type="button" class="footer"color="red" style="width: 80px; height: 35px; color:black;border: none;" value="支付宝支付" ></a>
<td width="380px"><img class="s1"src="img/10.png" height="50" width="50"/>
<td width="80px"><a href="http://127.0.0.1:8848/%E8%B4%AD%E7%89%A9%E8%BD%A602/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F%E9%A1%B5%E9%9D%A2.html" target="_blank">
<input type="button" class="footer"color="red" style="width: 80px; height: 35px; color:black;border: none;" value="微信支付" ></a>
<td width="380px"><img class="s1"src="img/11.jpg" height="50" width="50"/>
<td width="80px"><a href="http://127.0.0.1:8848/%E8%B4%AD%E7%89%A9%E8%BD%A602/%E6%94%AF%E4%BB%98%E6%88%90%E5%8A%9F%E9%A1%B5%E9%9D%A2.html" target="_blank">
<input type="button" class="footer"color="red" style="width: 80px; height: 35px; color:black;border: none;" value="云闪付" ></a>
</body>
</html>
支付成功跳转页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>支付成功页面</title>
</head>
<body>
支付成功！三秒后跳转到购物车界面...
<span style="font-size:18px;"> </span><span style="font-size:24px;"><meta http-equiv="refresh" content="3;URL=http://127.0.0.1:8848/%E8%B4%AD%E7%89%A9%E8%BD%A602/%E8%B4%AD%E7%89%A9%E8%BD%A6%E9%A1%B5%E9%9D%A2.html"> </span>
<span style="font-size:24px;">
</body>
</html>
css代码块
.s1{
max-width: 80px;
float: left;
}
.delete{
border: none;
color: blue;
background-color: white;
width: 60px;
}
.footer{
padding: 0;
background: red;
}
1.png
2.png
3.png
4.png
5.png
6.jpg
7.jpg
8.jpg
9.png
10.png
11.jpg
原创文章 4
获赞 3
访问量 642