淘宝购物车项目原JS模拟

本文介绍了原来的JS代码实现模拟淘宝购物车。分享给你供你参考。以下是如下：

类似淘宝的购物车的实现效果的Javaｓｃｒｉｐｔ，包括商业电台，实现全选，删除，修改数量、价格计算、数值计算、预览等功能实现的效果图：
相应的代码：

shoppingcart.html
购物车项目实战的javaｓｃｒｉｐｔ实现

选择
商品
单价
数
小计
操作

iPhone 6s
五千零九十九点八八

—

+

五千零九十九点八八
删除
苹果笔记本电脑MacBook Air
一千零九十九点九九

—

+

一千零九十九点九九
删除
iPad mini2银色的16G wlan7.9英寸
六千五百九十九

—

+

六千五百九十九
删除
iWatch Extensins min
九千九百九十八点六八

—

+

九千九百九十八点六八
删除

取消-->
。
选择
删除
结算
共计：0美元
购买商品
零
+ + +
—

shoppingcart.js

在window.onload =函数（）{
/ /低版本的IE浏览器不支持getelementbyclassname方法，考虑到兼容性和重写的方法。
如果（！文件。getelementbyclassname）{
document.getelementbyclassname =功能（CLS）{
var = { }；
无功clselments = document.getelementsbytagname（*）；
对于（var i = 0，len = clselments.length；我< len；i++）{
考虑一个带有多个类的标签，正则表达式会稍微好一点。
如果（clselments {我} classname = =华彩。
| |（clselments {我}。classname.indexof（CLS + ）> = 0）
| |（clselments {我}。classname.indexof（+ + CLS）> = 0）
| |（clselments {我}。classname.indexof（+ CLS）> = 0））
{
Ret.push（clselments {我}）；
}
}
返回页首；
}

}

var carttable = document.getelementbyid（carttable ）；
VaR TR = carttable。孩子{ 1 }。行；属性 / /表的行标签，可以得到所有的表格元素的TR线。
无功checkinput = document.getelementbyclassname（‘选中'）； / /得到所有单选按钮
无功checkallinput = document.getelementbyclassname（'check_all '）； / /得到所有单选按钮
无功pricetotle = document.getelementbyid（pricetotle ）； / /总
无功selecttotle = document.getelementbyid（selecttotle ） / /选货；
VaR选择= document.getelementbyid（选择）；
VaR页脚= document.getelementbyid（页脚）； / /标签
无功selectedviewlist = document.getelementbyid（selectedviewlist ）； / /标签
VaR deleteAll = document.getelementbyid（deleteAll ）；
计算总价格和数量
功能gettotle（）{
无功selectnum = 0； / /数量
无功pricenum = 0； / /价格
var =htmlstr ； / /字符串串联的缩略图
对于（var i = 0，len = tr.length；我< len；i++）{
如果（TR {我}。getElementsByTagName（输入）{ 0 }，{检查）
TR {我}。类名= ；
selectnum = parseInt（TR {我}。getElementsByTagName（输入）{ 1 }。值）；
pricenum = parseFloat（TR {我}。细胞{ 4 }。innerHTML）；
字符串显示选定的商品马赛克
htmlstr + =取消选择；

}
别的{
TR {我} classname = ；
}
}
selecttotle.innerhtml = selectnum；
pricetotle.innerhtml = pricenum.tofixed（2）； / /两位小数
selectedviewlist.innerhtml = htmlstr；
}

价格/小计
功能getsubtotle（TR）{
VaR TDS = tr.cells；
无功价格= parseFloat（TDS { 2 }。innerHTML）；
VaR Num = parseInt（tr.getelementsbytagname（输入）{ 1 }。值）；
var = parseFloat（胃大部价格* Num），ToFixed（2）；
TDS { 4 } .innerHTML =胃大部；
}

复选框绑定单击事件
对于（var i = 0，len = checkinput.length；我< len；i++）{
我checkinput { }。onclick =函数（）{
判断/选择所有按钮，更改
如果（this.classname = =check_all检查）{
对于（var j＝0；j；<；j + +）{
checkinput { }检查= this.checked J；
}
}
如果（this.checked = = false）{
对于（var k = 0，= checkallinput.length len2个；K＜len2个；K+）{
checkallinput {K }。检查= false；
}
}
GetTotle（）；
}
}
在显示控件/标签的底部
Selected.onclick =函数（）{
如果（footer.classname = =页脚）{
footer.classname = =页脚显示；
{人}
footer.classname = =页脚；
}
}
取消图片缩略图选择按钮功能，E用于事件对象
SelectedViewList.onclick =功能（e）{
兼容IE的低版本
如果（e）{
e = e；
其他{ }
E = window.event；
**
VaR E = e window.event | |；
var el = e.srcelement；
如果（el.classname = =德尔）{
VaR指标= el.getattribute（指数）；
无功输入= TR {指数}。getElementsByTagName（输入）{ 0 }；
input.checked = false；
Input.onclick（）；
}
}

可以添加或删除事件代理的相同方法
对于（var i = 0，len3 = tr.length；i < len3；i++）{
TR {我}。onclick=功能（e）{
VaR E = e window.event | |；
var el = e.srcelement；
无功clsname = el.classname；
无功输入= this.getelementsbytagname（输入）{ 1 }；
VaR的输入值= parseInt（输入值）；
VaR降低= this.getelementsbytagname（跨）{ 1 }；
开关（clsname）{
案例添加：
/ * parseInt（输入值）+ *；
input.value =输入值+ 1；
reduce.innerhtml = ；
GetSubTotle（本）；
打破；
案例减少：
如果（输入值> = 1）{
input.value =输入值1；
其他{ }
reduce.innerhtml = ；
}
GetSubTotle（本）；
打破；
案例删除：
VaR conf =确认（确保这项被删除；
如果（conf）{
this.parentnode.removechild（本）；
}
打破；
违约:
打破；
}
GetTotle（）；
}
从手工输入商品的数量
TR {我}。getElementsByTagName（输入）{ 1 }。onkeyup =函数（）{
VaR值= this.value；
VaR TR = this.parentnode.parentnode；
如果（isnan（Val）| | val < 0）{
瓦尔= 1；
}
this.value = val；
GetSubTotle（TR）；
}
}

选择/删除
deleteall.onclick =函数（）{
如果（selecttotle.innerhtml！= 0 ）{
VaR conf =确认（确定删除这些商品吗；
如果（conf）{
对于（var i = 0，len = tr.length；我< len；i++）{
无功输入= TR {我}。getElementsByTagName（输入）{ 0 }；
如果（输入。检查）{
TR {我}。parentnode.removechild（TR {我}）；
}
}
}
}
}
}

取消选择-使用事件到父元素-代理。

shoppingcart.css

count_input {。
宽度：39px；
身高：15px；
行高：15px；
边境：1px solid # AAA；
颜色：# 343434；
文本对齐：中心；
填料：4px 0；
背景颜色：# FFF；
}

span.add，跨度，减少{
身高：23px；
宽度：27px；
边境：1px solid # e5e5e5；
背景：# f0f0f0；
行高：23px；
颜色：# 444；
}
关闭{。
显示：内联块；
宽度：120px；
身高：50px；
行高：50px；
背景：# F40；
文本对齐：中心；
'microsoft雅黑字体；
字体大小：20px；
WebKit的边界半径：2px；
-moz边界半径：2px；
MS：2px边界半径；
边界半径：2px；
文字装饰：无；
光标：指针；
}
FR {。
浮子：右边；
}
。selected_totle，。SelectAll。select_all，delete_all {。
边距：15px；
}
页脚{。
身高：50px；
背景：# e5e5e5；
'microsoft雅黑字体；
}
# selecttotle，# pricetotle，前路{。
颜色：# F40；
字体重量：700；
字体大小：18px；
字体家庭：tohoma，Arial；
填料：5px；

}
以上是淘宝购物车中所有项目代码js模拟，欢迎从学习学习，从中收获。