淘宝购物车界面的js实现

发布网友发布时间：2022-04-26 23:54

我来回答

共4个回答

懂视网时间：2022-05-14 22:53

这篇文章主要向大家推荐了一个原生js模拟淘宝购物车项目实战，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现，感兴趣的小伙伴们可以参考一下

本文实例讲述了原生js模拟淘宝购物车实现代码。分享给大家供大家参考。具体如下：

通过JavaScript实现类似与淘宝的购物车效果，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现。实现的效果图：

相应的代码：

shoppingCart.html

<!DOCTYPE html>
<html>
<head>
 <meta charset = "UTF-8">
 <title>JavaScript实现购物车项目实战</title>
 <link rel="stylesheet" type="text/css" href="./css/shoppingCart.css">
 <script type="text/javascript" src="./js/shoppingCart.js"></script>
</head>
<body>
 <table id="cartTable">
 <thead>
 <tr class="order_content">
 <th><input class="check_all check" type="checkbox"></input> 全选</th>
 <th>商品</th>
 <th>单价</th>
 <th>数量</th>
 <th>小计</th>
 <th>操作</th>
 </tr>

 </thead>
 <tbody>
 <tr class="order_content">
 <td class="check"><input class = "check_one check" type="checkbox"></input></td>
 <td class="goods"><img src="./imgs/apple6s.png"><span>Iphone 6S</span></td>
 <td class="price">5099.88</td>
 <td class="count">
 <span class="reduce">-</span>
 <input class="count_input" type="text" value="1"></input>
 <span class="add">+</span>
 </td>
 <td class="subtotle">5099.88</td>
 <td class="operation"><span class="delete">删除<span></td>
 </tr>
 <tr class="order_content">
 <td class="check"><input class = "check_one check" type="checkbox"></input></td>
 <td class="goods"><img src="./imgs/macbook.png"><span>MacBook Air</span></td>
 <td class="price">1099.99</td>
 <td class="count">
 <span class="reduce">-</span>
 <input class="count_input" type="text" value="1"></input>
 <span class="add">+</span>
 </td>
 <td class="subtotle">1099.99</td>
 <td class="operation"><span class="delete">删除<span></td>
 </tr>
 <tr class="order_content">
 <td class="check"><input class = "check_one check" type="checkbox"></input></td>
 <td class="goods"><img src="./imgs/ipadmini.png"><span>Ipad mini2 银16g WLAN7.9英寸</span></td>
 <td class="price">6599.00</td>
 <td class="count">
 <span class="reduce">-</span>
 <input class="count_input" type="text" value="1"></input>
 <span class="add">+</span>
 </td>
 <td class="subtotle">6599.00</td>
 <td class="operation"><span class="delete">删除<span></td>
 </tr>
 <tr>
 <td class="check"><input class = "check_one check" type="checkbox"></input></td>
 <td class="goods"><img src="./imgs/applewatch.png"><span>IWatch EXTS Min</span></td>
 <td class="price">9998.68</td>
 <td class="count">
 <span class="reduce">-</span>
 <input class="count_input" type="text" value="1"></input>
 <span class="add">+</span>
 </td>
 <td class="subtotle">9998.68</td>
 <td class="operation"><span class="delete">删除<span></td>
 </tr>
 </tbody>

 </table>
 <p class="slected view">
 <p id="selectedViewList" class="clearfix">
 <!-- <p><img src="./imgs/applewatch.png"><span>取消选择</span></p> -->
 </p>

 <span class="arrow">.<span>.</span></span>

 </p>
 <p id = "footer" class="footer"> 
 <label class="fl select_all" ><input class="check_all check" type="checkbox"> 全选</input></label>
 <a class="fl delete_all" id="deleteAll" href="javascript:;">删除</a>
 <p class="fr closing">结算</p>
 <p class="fr selected_totle">合计：￥ <span id="priceTotle">0.00</span> </p>
 <p class="fr selectAll" id="selected">已购商品
 <span id = "selectTotle">0</span>件
 <span class="arow up">+++</span>
 <span class="arow down">---</span>
 </p>


 </p>

</body>
</html>

shoppingCart.js

window.onload = function(){
 //低版本的IE浏览器不支持getElementByClassName方法，考虑兼容性,重写方法。
 if (!document.getElementByClassName) {
 document.getElementByClassName =function(cls){
 var ret = [];
 var clsElments = document.getElementsByTagName('*');
 for (var i = 0, len = clsElments.length; i < len; i++) {
 //考虑一个标签有多个class的情况,这里用正则表达式会好一点
 if (clsElments[i].className == cls 
 || (clsElments[i].className.indexOf(cls + " ") >= 0)
 || (clsElments[i].className.indexOf(" " + cls + " ") >= 0)
 || (clsElments[i].className.indexOf(" " + cls) >= 0)) 
 {
 ret.push(clsElments[i]);
 }
 }
 return ret;
 }

 }

 var cartTable = document.getElementById("cartTable");
 var tr = cartTable.children[1].rows; //table标签特有的属性，rows可以获得表格元素的所有tr行。
 var checkInput = document.getElementByClassName('check');//获得所有的单选框
 var checkAllInput = document.getElementByClassName('check_all');//获得所有的单选框
 var priceTotle = document.getElementById("priceTotle");//总价
 var selectTotle = document.getElementById("selectTotle");//已选商品
 var selected = document.getElementById("selected");
 var footer = document.getElementById("footer");//底部标签
 var selectedViewList = document.getElementById("selectedViewList");//底部标签
 var deleteAll = document.getElementById("deleteAll");



 //计算总价格和数量
 function getTotle(){
 var selectNum = 0;//数量
 var priceNum = 0;//价格
 var HTMLstr = ""; //缩略图的字符串拼接
 for (var i = 0,len = tr.length; i < len; i++) {
 if (tr[i].getElementsByTagName("input")[0].checked) {
 tr[i].className ="on";
 selectNum += parseInt(tr[i].getElementsByTagName("input")[1].value);
 priceNum += parseFloat(tr[i].cells[4].innerHTML);


 //拼接字符串显示已经选择的商品 
 HTMLstr += '<p><img src="'+ tr[i].getElementsByTagName('img')[0].src +'"><span class ="del" index ="'+ i +'">取消选择</span></p>';

 }
 else{
 tr[i].className = "";
 }
 }
 selectTotle.innerHTML = selectNum;
 priceTotle.innerHTML = priceNum.toFixed(2);//保留两位小数
 selectedViewList.innerHTML = HTMLstr;
 }

 //计算小计价格
 function getSubTotle(tr){
 var tds = tr.cells;
 var price = parseFloat(tds[2].innerHTML);
 var num = parseInt(tr.getElementsByTagName("input")[1].value);
 var subTotle = parseFloat(price * num).toFixed(2);
 tds[4].innerHTML = subTotle;
 }

 //复选框绑定单击事件
 for (var i = 0, len = checkInput.length; i < len; i++){
 checkInput[i].onclick =function (){
 //判断全选按钮，变更
 if (this.className == "check_all check") {
 for (var j = 0; j < len; j++){
 checkInput[j].checked = this.checked;
 }
 }
 if (this.checked == false) {
 for (var k = 0,len2 = checkAllInput.length; k < len2; k++){
 checkAllInput[k].checked = false;
 }
 }
 getTotle();
 }
 }



 //控制底部标签的显示
 selected.onclick = function(){
 if (footer.className == "footer") {
 footer.className == "footer show";
 } else {
 footer.className == "footer"; 
 }
 }


 //图片缩略图的取消选择按钮功能,e为事件对象
 selectedViewList.onclick = function(e){
 //兼容低版本的IE
/* if (e){
 e = e;
 }else{
 e = window.event;
 } */
 var 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, len3 = tr.length; i < len3; i++){
 tr[i].onclick = function(e){
 var e = e || window.event;
 var el = e.srcElement;
 var clsName = el.className;
 var input = this.getElementsByTagName("input")[1];
 var inputValue = parseInt(input.value);
 var reduce = this.getElementsByTagName("span")[1];
 switch (clsName){
 case "add":
 /*parseInt(inputValue) ++;*/
 input.value = inputValue + 1;
 reduce.innerHTML ="-";
 getSubTotle(this);
 break;
 case "reduce":
 if(inputValue >= 1){
 input.value = inputValue - 1;
 }else{
 reduce.innerHTML ="";
 }
 getSubTotle(this); 
 break;
 case "delete":
 var conf = confirm("确定删除这个商品？");
 if (conf) {
 this.parentNode.removeChild(this);
 }
 break;
 default:
 break;
 }
 getTotle();
 }
 //处理从手动输入商品数量
 tr[i].getElementsByTagName("input")[1].onkeyup = function(){
 var val = this.value;
 var tr = this.parentNode.parentNode;
 if (isNaN(val) || val < 0 ) {
 val = 1;
 }
 this.value = val;
 getSubTotle(tr);
 }
 }

 //全选删除
 deleteAll.onclick = function(){
 if (selectTotle.innerHTML !="0") {
 var conf = confirm("确定删除这些商品？");
 if (conf) {
 for (var i = 0, len = tr.length; i < len; i++) {
 var input = tr[i].getElementsByTagName("input")[0];
 if(input.checked){
 tr[i].parentNode.removeChild(tr[i]);
 }
 }
 }
 } 
 }
}

//取消选择--采用事件代理---放到父元素上。

shoppingCart.css

.count_input{
 width: 39px;
 height: 15px;
 line-height: 15px;
 border: 1px solid #aaa;
 color: #343434;
 text-align: center;
 padding: 4px 0;
 background-color: #fff;
}

span.add, span.reduce{
 height: 23px;
 width: 27px;
 border: 1px solid #e5e5e5;
 background: #f0f0f0;
 line-height: 23px;
 color: #444;
}
.closing{
 display: inline-block;
 width: 120px;
 height: 50px;
 line-height: 50px;
 background: #f40;
 text-align: center;
 font-family: 'Microsoft Yahei';
 font-size: 20px;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 -ms-border-radius: 2px;
 border-radius: 2px;
 text-decoration: none;
 cursor: pointer;
}
.fr{
 float: right;
}
.selected_totle, .selectAll, .select_all, .delete_all{
 margin-top: 15px;
}
.footer{
 height: 50px;
 background: #e5e5e5;
 font-family: 'Microsoft Yahei';
}
#selectTotle, #priceTotle,.subtotle {
 color: #f40;
 font-weight: 700;
 font-size: 18px;
 font-family: tohoma,arial;
 padding: 5px;

}

热心网友时间：2022-05-14 20:01

在网上找找吧
网上又很多源文件的，拿过来用就OK了。
找不到的话再来问吧

热心网友时间：2022-05-14 21:19

购物车不只是js 啊
也包括后台的
不是那么容易做到的啊

热心网友时间：2022-05-14 22:54

谷歌一下就可以了，，