前言
相信大家都很熟悉商品購物車這一功能,每當我們在某寶某東上購買商品的時候,看中了哪件商品,就會加入購物車中,最后結算。購物車這一功能,方便消費者對商品進行管理,可以添加商品,刪除商品,選中購物車中的某一項或幾項商品,最后商品總價也會隨著消費者的操作隨著變化。本文介紹的是通過Javascript實現類似于淘寶的購物車效果,包括商品的單選、全選、刪除、修改數量、價格計算、數目計算、預覽等功能。
功能如下
1. 實現兼容低版本IE的getElementsByClassName()
方法
2. JS表格操作
3. 通過parseInt()
,parseFloat()
把字符串轉換成數字
4. 通過toFixed()
把數字格式化成指定位數的小數
5. 事件代理的運用
效果圖:
border-collapse有兩個值可以選擇,分別是collapse和separate,就是合并邊框和分離邊框,分離邊框之下又可以設置間距和邊框樣式
border-spacing:2em 4em;(設置右間距和下間距)
border-style:none solid dashed dotted;(分別設置上右下左的樣式)
html結構:
<table id="cartTable"> <thead> <tr> <th><label><input class="check-all check" type="checkbox"/> 全選</label></th> <th>商品</th> <th>單價</th> <th>數量</th> <th>小計</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> <p 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:;" rel="external nofollow" >刪除</a> <p class="fr closing">結 算</p> <p class="fr total">合計:¥<span id="priceTotal">0.00</span></p> <p class="fr select" id="selected">已選商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></p> <p class="selected-view"> <p id="selectedViewList" class="clearfix"> <p><img src="images/1.jpg"><span>取消選擇</span></p> </p> <span class="arrow">◆<span>◆</span></span> </p> </p>
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-left: -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; margin-right: 10px; float: left; } .foot{ width: 935px; margin-top: 10px; color: #666; height: 48px; border: 1px solid #c8c8c8; background-image: linear-gradient(RGB(241,241,241),RGB(226,226,226)); position: relative; z-index: 8; } .foot p, .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: "微軟雅黑"; font-weight: bold; } .foot .select{ cursor: pointer; } .foot .select .arrow{ position: relative; top: -3px; margin-left: 3px; } .foot .select .down{ position: relative; top: 3px; display: none; } .show .select .down{ display: inline; } .show .select .up{ display: none; } .foot .select:hover .arrow{ color: red; } .foot .selected-view{ width: 935px; border: 1px solid #c8c8c8; position: absolute; height: auto; background: #fff; z-index: 9; bottom: 48px; left: -1px; display: none; } .show .selected-view{display: block;} .foot .selected-view p{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: #fff; position: absolute; left: 0; bottom: 1px; } #selectedViewList{ padding: 20px; margin-bottom: -20px; } #selectedViewList p{ display: inline-block; position: relative; width: 100px; height: 80px; border: 1px solid #ccc; margin: 10px; } #selectedViewList p span{ display: none; color: #fff; font-size: 12px; position: absolute; top: 0; right: 0; width: 60px; height: 18px; line-height: 18px; text-align: center; background: RGBA(0,0,0,.5); cursor: pointer; } #selectedViewList p:hover span{ display: block; }
js部分:
1)實現商品的全選功能及數量和價格的計算
2)點擊已選商品實現商品預覽浮層的功能
點擊已選商品時會顯示出已選擇商品的列表
同時在getTotal()
函數中增加新創建的p
js代碼:
3)商品列表中的取消選擇與事件代理
已選商品列表中沒有appendChild的時候p和span都不存在,所以要使用事件代理。
4)實現增減商品數量及小計價格的計算
5)實現刪除商品功能
學會用for循環刪除數組中的一些數據時要回置下標 i 。
總結
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com