HTML 实现购物网站

一、程序代码：

1.HTML代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>结算清单</title><script src="js.js"></script><link rel="stylesheet" href="qd.css"></head>
<body>
<table id="cartTable"><thead><tr><th><label><input id="selectAll" class="check-all check" type="checkbox"/>&nbsp;全选</label></th><th>序号</th><th>商品</th><th>书籍名称</th><th>分类</th><th>出版日期</th><th>价格</th><th>数量</th><th>小计</th><th>操作</th></tr></thead><tbody><tr><td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td><td>1</td><td class="goods"><img src="images/phone1.jpg" alt="" /><span>jQuery实战</span></td><td class="sm">jQuery实战</td><td>技术</td><td class="sj">2015-11-19</td><td class="price">35.00</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">35.00</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td><td>2</td><td class="goods"><img src="images/phone1.jpg" alt="" /><span>jQuery实战2</span></td><td class="sm">jQuery实战2</td><td>技术</td><td class="sj">2015-11-19</td><td class="price">35.00</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">35.00</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td><td>3</td><td class="goods"><img src="images/phone2.jpg" alt="" /><span>红楼梦</span></td><td class="sm">红楼梦</td><td>文学</td><td class="sj">2015-11-19</td><td class="price">35.00</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">35.00</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td><td>4</td><td class="goods"><img src="images/phone2.jpg" alt="" /><span>红楼梦2</span></td><td class="sm">红楼梦2</td><td>文学</td><td class="sj">2015-11-19</td><td class="price">35.00</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">35.00</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td><td>5</td><td class="goods"><img src="images/phone3.jpg" alt="" /><span>生活的书</span></td><td class="sm">生活的书</td><td>生活</td><td class="sj">2015-11-19</td><td class="price">35.00</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">35.00</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input id="item" class="check-one" type="checkbox" onclick="getStart()"/></td><td>6</td><td class="goods"><img src="images/phone3.jpg" alt="" /><span>生活的书2</span></td><td class="sm">生活的书2</td><td>生活</td><td class="sj">2015-11-19</td><td class="price">35.00</td><td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">35.00</td><td class="operation"><span class="delete">删除</span></td></tr></tbody>
</table><div class="foot" id="foot"><div class="fr closing" onclick="showTotal()">结 算</div><div class="fr total">合计：￥<span id="priceTotal">0.00</span></div><div class="fr selected">已选商品<span id="selectedTotal">0</span>件</div>
</div>
</body>
</html>

1.2JS代码

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件商品的金额)
}

1.3CSS代码

* {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;
}

二、效果图