原生js模拟淘宝购物车项目实战_javascript技巧
程序员文章站
2022-05-01 22:47:02
...
本文实例讲述了原生js模拟淘宝购物车实现代码。分享给大家供大家参考。具体如下：
..
';
}
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 = 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
通过JavaScript实现类似与淘宝的购物车效果，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现。实现的效果图：
相应的代码：
shoppingCart.html
JavaScript实现购物车项目实战
| 全选 | 商品 | 单价 | 数量 | 小计 | 操作 |
|---|---|---|---|---|---|
|
|
5099.88 | - + | 5099.88 | 删除 | |
|
|
1099.99 | - + | 1099.99 | 删除 | |
|
|
6599.00 | - + | 6599.00 | 删除 | |
|
|
9998.68 | - + | 9998.68 | 删除 |
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 = 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 
取消选择