购物车功能实现（HTML学习笔记）
生活随笔
收集整理的這篇文章主要介紹了
购物车功能实现（HTML学习笔记）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章背景
??本文是為了方便初學(xué)者，在學(xué)習(xí)慕課網(wǎng)課程用JS實(shí)現(xiàn)購(gòu)物車特效時(shí)，找到參考代碼。才出此文。
項(xiàng)目截圖
代碼
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>購(gòu)物車</title><link rel="stylesheet" href="css/style.css" /><script type="text/javascript" src="js/demo.js"></script> </head><body><table id="cartTable"><thead><tr><th><label><input class="check-all check" type="checkbox"/> 全選</label></th><th>商品</th><th>單價(jià)</th><th>數(shù)量</th><th>小計(jì)</th><th>操作</th></tr></thead><tbody><tr><td class="checkbox"><input class="check-one check" type="checkbox" /></td><td class="goods"><img src="images/1.jpg" alt="" /><span>Casio/卡西歐 EX-TR350</span></td><td class="price">5999.88</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">5999.88</td><td class="operation"><span class="delete">刪除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox" /></td><td class="goods"><img src="images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td><td class="price">3888.50</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">3888.50</td><td class="operation"><span class="delete">刪除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox" /></td><td class="goods"><img src="images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td><td class="price">1428.50</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">1428.50</td><td class="operation"><span class="delete">刪除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox" /></td><td class="goods"><img src="images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td><td class="price">640.60</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span></td><td class="subtotal">640.60</td><td class="operation"><span class="delete">刪除</span></td></tr></tbody></table><div class="foot" id="foot"><label class="fl select-all"><input type="checkbox" class="check-all check"/> 全選</label><a class="fl delete" id="deleteAll" href="javascript:;">刪除</a><div class="fr closing">結(jié) 算</div><div class="fr total">合計(jì)：￥<span id="priceTotal">0.00</span></div><div class="fr selected" id="selected">已選商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div><div class="selected-view"><div id="selectedViewList" class="clearfix"><!--<div><img src="images/1.jpg"><span>取消選擇</span></div>--></div><span class="arrow">◆<span>◆</span></span></div></div> </body></html>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: 937px; }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: 300px; }.goods span {width: 180px;margin-top: 20px;text-align: left;float: left; }.price {width: 130px; }.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: 150px;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: 935px;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; }JS代碼
window.onload = function() {if (!document.getElementsByClassName) {document.getElementsByClassName = function(cls) {var ret = [];var els = document.getElementsByTagName('*');for (var i = 0, len = els.length; i < len; i++) {if (els[i].className === cls ||els[i].className.indexOf(cls + ' ') >= 0 ||els[i].className.indexOf(' ' + cls + ' ') >= 0 ||els[i].className.indexOf(' ' + cls) >= 0) {ret.push(els[i]);}}return ret;}}var cartTable = document.getElementById('cartTable');var tr = cartTable.children[1].rows;var checkInputs = document.getElementsByClassName('check');var checkAllInputs = document.getElementsByClassName('check-all');var selectedTotal = document.getElementById('selectedTotal');var priceTotal = document.getElementById('priceTotal');var selected = document.getElementById('selected');var foot = document.getElementById('foot');var selectedViewList = document.getElementById('selectedViewList');var deleteAll = document.getElementById('deleteAll');//小計(jì)function getSubTotal(tr) {var tds = tr.cells;var price = parseFloat(tds[2].innerHTML);var count = parseInt(tr.getElementsByTagName('input')[1].value);var SubTotal = parseFloat(price * count);tds[4].innerHTML = SubTotal.toFixed(2);}function getTotal() {var seleted = 0;var price = 0;var HTMLstr = '';for (var i = 0, len = tr.length; i < len; i++) {if (tr[i].getElementsByTagName('input')[0].checked) {tr[i].className = 'on';seleted += parseInt(tr[i].getElementsByTagName('input')[1].value);price += parseFloat(tr[i].cells[4].innerHTML);HTMLstr += '<div><img src="' + tr[i].getElementsByTagName('img')[0].src + '"><span class="del" index="' + i + '">取消選擇</span></div>'} else {tr[i].className = '';}}selectedTotal.innerHTML = seleted;priceTotal.innerHTML = price.toFixed(2);selectedViewList.innerHTML = HTMLstr;if (selected == 0) {foot.className = 'foot';}}for (var i = 0, len = checkInputs.length; i < len; i++) {checkInputs[i].onclick = function() {if (this.className === 'check-all check') {for (var j = 0; j < checkInputs.length; j++) {checkInputs[j].checked = this.checked;}}if (this.checked == false) {for (var k = 0; k < checkAllInputs.length; k++) {checkAllInputs[k].checked = false;}}getTotal();}}selected.onclick = function() {if (foot.className == 'foot') {if (selected.innerHTML != 0) {foot.className = 'foot show';}} else {foot.className = 'foot';}}selectedViewList.onclick = function(e) {e = e || window.event;var el = e.srcElement;if (el.className == 'del') {var index = el.getAttribute('index');var input = tr[index].getElementsByTagName('input')[0];input.checked = false;input.onclick();}}for (var i = 0; i < tr.length; i++) {tr[i].onclick = function(e) {e = e || window.event;var el = e.srcElement;var cls = el.className;var input = this.getElementsByTagName('input')[1];var val = parseInt(input.value);var reduce = this.getElementsByTagName('span')[1];switch (cls) {case 'add':input.value = val + 1;reduce.innerHTML = '-';getSubTotal(this);break;case 'reduce':if (val > 1) {input.value = val - 1;}if (input.value <= 1) {reduce.innerHTML = '';}getSubTotal(this);break;case 'delete':var conf = confirm('確定刪除嗎？');if (conf) {this.parentNode.removeChild(this);}break;default:break;}getTotal();}tr[i].getElementsByTagName('input')[1].onkeyup = function() {var val = parseInt(this.value);var tr = this.parentNode.parentNode;var reduce = tr.getElementsByTagName('span')[1];if (isNaN(val) || val < 1) {val = 1;}this.value = val;if (val <= 1) {reduce.innerHTML = '';} else {reduce.innerHTML = '-';}getSubTotal(tr);getTotal();}}deleteAll.onclick = function() {if (selectedTotal.innerHTML != '0') {var conf = confirm('確定刪除嗎？');if (conf) {for (var i = 0; i < tr.length; i++) {var input = tr[i].getElementsByTagName('input')[0];if (input.checked) {tr[i].parentNode.removeChild(tr[i]);i--;}}}}getTotal();}checkAllInputs[0].checked = true;checkAllInputs[0].onclick(); }項(xiàng)目源碼下載
點(diǎn)擊此段文字，可下載源碼。如果本文有幫助的話，歡迎打賞！
總結(jié)
以上是生活随笔為你收集整理的购物车功能实现（HTML学习笔记）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电脑游戏声音如何录制？
- 下一篇： 监听浏览器刷新/关闭页面