HTML实现淘宝图书购物车管理
1.HTML程序
结算清单
序号
商品
书籍名称
分类
出版日期
价格
数量
小计
操作
1
jQuery实战jQuery实战
技术
2015-11-19
35.00
-
+
35.00
删除
2
jQuery实战2
jQuery实战2
技术
2015-11-19
35.00
-+
35.00
删除
3
红楼梦红楼梦
文学
2015-11-19
35.00
-+
35.00
删除
4
红楼梦2
红楼梦2
文学
2015-11-19
35.00
-+
35.00
删除
5
生活的书生活的书
生活
2015-11-19
35.00
-+
35.00
删除
6
生活的书2
生活的书2
生活
2015-11-19
35.00
-+
35.00
删除
结 算
合计：￥0.00
已选商品
0件
2.JavaScript程序如下：
window.onload = function() {
var oSelect = document.getElementById("selectAll");
var aItems = document.getElementsByClassName("check-one");
var oSum = document.getElementById("priceTotal");
var oGoods = document.getElementById("selectedTotal");
// 全选
oSelect.onclick = function() {
if (oSelect.checked) {
for (var i = 0; i < aItems.length; i++) {
if (aItems[i].checked) {
} else {
oSelect.checked = true;
aItems[i].checked = true;
getStart();
}
}
} else {
//全消
for (var i = 0; i < aItems.length; i++) {
if (aItems[i].checked) {
aItems[i].checked = false;
oSum.innerText = 0;
oGoods.innerText = 0;
} else {}
}
}
}
}
function getStart() {
var oSelect = document.getElementById("selectAll");
var aItems = document.getElementsByClassName("check-one");
var oSum = document.getElementById("priceTotal");
var oGoods = document.getElementById("selectedTotal");
var aSubtotal = document.getElementsByClassName("subtotal");
var aCountInput = document.getElementsByClassName("count-input");
var a = 0;
for (var i = 0; i < aItems.length; i++) {
if (aItems[i].checked) {
chooseIt(i);
a++;
if (a == 3) {
oSelect.checked = true; //当所有选项都选到时,全选按钮自动勾选
}
} else {
oSelect.checked = false; //任意一个选项没勾选,全选按钮不选
chooseIt(i);
}
}
}
function getSum() {
var temp = 0;
var oSum = document.getElementById("priceTotal");
var aItems = document.getElementsByClassName("check-one");
var aSubtotal = document.getElementsByClassName("subtotal");
//循环,计算选中的商品的总价格
for (var j = 0; j < aItems.length; j++) {
if (aItems[j].checked) {
temp += parseInt(aSubtotal[j].innerText);
} else {
temp += 0;
}
}
oSum.innerText = temp;
}
function getGoods() {
var num = 0;
var oGoods = document.getElementById("selectedTotal");
var aItems = document.getElementsByClassName("check-one");
var aCountInput = document.getElementsByClassName("count-input");
//循环,计算选中的商品的总数量
for (var i = 0; i < aItems.length; i++) {
if (aItems[i].checked) {
num += parseInt(aCountInput[i].value);
} else {
num += 0;
}
}
oGoods.innerText = num;
}
function getTotal(n) {
var aPrice = document.getElementsByClassName("price");
var aCountInput = document.getElementsByClassName("count-input");
var aSubtotal = document.getElementsByClassName("subtotal");
//计算单件商品的总价
var oMoney = parseInt(aPrice[n].innerText) * parseInt(aCountInput[n].value);
aSubtotal[n].innerText = oMoney;
}
function getPlus(n) {
var aCountInput = document.getElementsByClassName("count-input");
//增加单件商品的数量
var temp = parseInt(aCountInput[n].value) + 1;
aCountInput[n].value = temp;
}
function getReduce(n) {
var aCountInput = document.getElementsByClassName("count-input");
//减少单件商品的数量
var temp = parseInt(aCountInput[n].value) - 1;
aCountInput[n].value = temp;
//当剪到数量为1件时,停止减
if (aCountInput[n].value < 1) {
aCountInput[n].value = 1;
}
}
function showTotal() {
var money = document.getElementById("priceTotal").innerText;
alert("你总共花了" + money + "money");
}
function chooseIt(i) {
var aAdd = document.getElementsByClassName("add");
var aReduce = document.getElementsByClassName("reduce")
var aDel = document.getElementsByClassName("delete");
var oTab = document.getElementById("cartTable");
aAdd[i].onclick = function() {
getPlus(i); //增加单件商品数量
getTotal(i); //计算单间商品总价
getSum(); //计算总商品价格
getGoods(); //计算总商品数量
}
aReduce[i].onclick = function() {
getReduce(i); //减少单件商品数量
getTotal(i);
getSum();
getGoods();
}
aDel[i].onclick = function() {
var oDialog = confirm("确定要删除吗?");
if (oDialog) {
oTab.tBodies[0].removeChild(aDel[i].parentNode.parentNode);
getGoods();
getSum();
}
getStart(); //更新表格中行的数量
}
getGoods(); //显示初始总商品数量(在勾选了该商品,但未增加数量时,显示默认数量1)
getSum(); //显示初始商品总价(在勾选了该商品,但未增加数量时,显示默认总价为1件商品的金额)
}3.css程序如下：
* {
margin: 0;
padding: 0;
}
a {
color: #666;
text-decoration: none;
}
body {
padding: 20px;
color: #666;
}
.fl{
float: left;
}
.fr {
float: right;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 0;
text-align: center;
width: 1400px;
}
th, td {
border: 1px solid #CADEFF;
}
th {
background: #e2f2ff;
border-top: 3px solid #a7cbff;
height: 30px;
}
td {
padding: 10px;
color: #444;
}
tbody tr:hover {
background: RGB(238,246,255);
}
.checkbox {
width: 60px;
}
.goods {
width: 80px;
/* background-color: red; */
text-align: center;
}
.sm {
width: 120px;
/* background-color: red; */
text-align: center;
}
.sj {
width: 150px;
/* background-color: red; */
text-align: center;
}
.goods img{
margin-left: 70px;
width: 80px;
/* border: #A7CBFF 2px solid; */
display: inline-block;
/* float: left; */
text-align:center;
}
.goods span {
display: block;
width: 80px;
margin-top: 20px;
text-align: center;
margin-left: 70px;
/* float: left; */
}
.price {
width: 80px;
}
.count {
width: 90px;
}
.count .add, .count input, .count .reduce {
float: left;
margin-right: -1px;
position: relative;
z-index: 0;
}
.count .add, .count .reduce {
height: 23px;
width: 17px;
border: 1px solid #e5e5e5;
background: #f0f0f0;
text-align: center;
line-height: 23px;
color: #444;
}
.count .add:hover, .count .reduce:hover {
color: #f50;
z-index: 3;
border-color: #f60;
cursor: pointer;
}
.count input {
width: 50px;
height: 15px;
line-height: 15px;
border: 1px solid #aaa;
color: #343434;
text-align: center;
padding: 4px 0;
background-color: #fff;
z-index: 2;
}
.subtotal {
width: 80px;
color: red;
font-weight: bold;
}
.operation {
width: 80px;
}
.operation span:hover, a:hover {
cursor: pointer;
color: red;
text-decoration: underline;
}
img {
width: 100px;
height: 80px;
/*border: 1px solid #ccc;*/
margin-right: 10px;
float: left;
}
.foot {
width: 1400px;
margin-top: 10px;
color: #666;
height: 48px;
border: 1px solid #c8c8c8;
background-color: #eaeaea;
background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));
position: relative;
z-index: 8;
}
.foot div, .foot a {
line-height: 48px;
height: 48px;
}
.foot .select-all {
width: 100px;
height: 48px;
line-height: 48px;
padding-left: 5px;
color: #666;
}
.foot .closing {
border-left: 1px solid #c8c8c8;
width: 100px;
text-align: center;
color: #000;
font-weight: bold;
background: RGB(238,238,238);
cursor: pointer;
}
.foot .total{
margin: 0 20px;
cursor: pointer;
}
.foot #priceTotal, .foot #selectedTotal {
color: red;
font-family: "Microsoft Yahei";
font-weight: bold;
}
.foot .selected {
cursor: pointer;
}
.foot .selected .arrow {
position: relative;
top:-3px;
margin-left: 3px;
}
.foot .selected .down {
position: relative;
top:3px;
display: none;
}
.show .selected .down {
display: inline;
}
.show .selected .up {
display: none;
}
.foot .selected:hover .arrow {
color: red;
}
.foot .selected-view {
width: 935px;
border: 1px solid #c8c8c8;
position: absolute;
height: auto;
background: #ffffff;
z-index: 9;
bottom: 48px;
left: -1px;
display:none;
}
.show .selected-view {
display: block;
}
.foot .selected-view div{
height: auto;
}
.foot .selected-view .arrow {
font-size: 16px;
line-height: 100%;
color:#c8c8c8;
position: absolute;
right: 330px;
bottom: -9px;
}
.foot .selected-view .arrow span {
color: #ffffff;
position: absolute;
left: 0px;
bottom: 1px;
}
#selectedViewList {
padding: 20px;
margin-bottom: -20px;
}
#selectedViewList div{
display: inline-block;
position: relative;
width: 100px;
height: 80px;
border: 1px solid #ccc;
margin: 10px;
}
#selectedViewList div span {
display: none;
color: #ffffff;
font-size: 12px;
position: absolute;
top: 0px;
right: 0px;
width: 60px;
height: 18px;
line-height: 18px;
text-align: center;
background: RGBA(0,0,0,.5);
cursor: pointer;
}
#selectedViewList div:hover span {
display: block;
}4.导入图片到文件包images
5.程序运行结果如下：
