js加入购物车动画效果,用js做一个购物车
本文操作环境：windows7系统、javascript1.8.5版，戴尔自交第三代电脑
javascript怎么实现购物车效果？
用javascript实现的购物车实例
基于爪哇岛描述语言实现的购物车实例：
首先是效果和功能，如下图所示，具有购物车的基本功能。
包括1、选中和全选商品；2、商品数量的增减；3、单个商品价格的计算；4、总价的计算；5、删除商品。
一、界面布局
使用的是桌子来进行布局，由于用射流研究…来获取tr和任务描述节点的时候，可以获取带下标的元素集合，操作起来较为便利。
熟悉的代码如下：
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
标题购物车/标题
风格
* { margin:0px；填充：0px}
td，td{
边框：1px固体# 000000
字体大小：10px
}
表格{
显示：块；
}
img{
浮动：左；
}
tr{
文本对齐：居中；
}
#框{
宽度：900像素
}
#购物车{
浮动：左；
边框-塌陷：塌陷；
}
#头{
背景：# F0FFFF
}
#结算{
边距-顶部：20px
宽度：805像素
高度：30px
边框：1px solid # EBEBEB
浮动：左；
背景：# EBEBEB
字体大小：10px
行高：30px
}
#结算部门{
浮动：左；
}
#addupto{
颜色：# ff0000
字体粗细：700;
}
#NumofGoods{
颜色：# ff0000
字体粗细：700;
}。商品{
填充：5px
文本对齐：左对齐；
}。号码{
位置：相对；
左：19px
宽度：60px
高度：10px
边框：1px实心# cccccc
}。acc{
宽度：40px
高度：10px
border-left:0px solid # cccccc；
border-right:0px solid # cccccc；
行高：10px
浮动：左；
}。去符号{
宽度：10px
高度：10px
行高：10px
背景：# ccc
浮动：左；
光标：指针；
}。广告符号{
宽度：10px
高度：10px
行高：10px
背景：# ccc
浮动：对；
光标：指针；
}
/*.dele{
光标：指针；
}*/。总计{
颜色：# ff0000
字体粗细：700;
}
/风格
/头
身体
div id=box
表id=购物车
tr id=head
td宽度=50px 输入类型=复选框全选/td
td宽度= 400像素商品/td
任务描述宽度= 100像素单价/td
任务描述宽度= 100像素数量/td
任务描述宽度= 100像素小计/td
任务描述宽度=50px 操作/td
/tr
tr
tdinput type=checkbox/td
tdimg src=img/goods1.jpg 外星人笔记本电脑17 R4 15R3 13寸17寸外星人今晚吃鸡游戏本/td
td12888.00/td
任务描述
差异
分区-/分区
div1/div
分区/分区
/div
/td
td/td
任务描述删除/td
/tr
tr
tdinput type=checkbox/td
tdimg src=img/goods2.jpg 任天堂（任天堂)开关家用游戏机掌机纳秒智能体感游戏主机/td
td2258.00/td
任务描述
差异
分区-/分区
div1/div
分区/分区
/div
/td
td/td
任务描述删除/td
/tr
tr
tdinput type=checkbox/td
tdimg src= img/goods 3。jpg 微软/微软Surface Pro i5 8G 256G笔记本平板电脑二合一/td
td4999.00/td
任务描述
差异
分区-/分区
div1/div
分区/分区
/div
/td
td/td
任务描述删除/td
/tr
tr
tdinput type=checkbox/td
tdimg src= img/goods 4。jpg 苹果/苹果10.5 英寸iPad Pro/td
td3666.00/td
任务描述
差异
分区-/分区
div1/div
分区/分区
/div
/td
td/td
任务描述删除/td
/tr
/表格
div id=结算
div style=width:550px 输入类型=复选框全选/div
div style=width:120px 全选商品span id=NumofGoods/spanspan件^/span/div
div style=width:80px 合计：span id=addupto/span/div
div style= width:50px；文本对齐：居中；左边框：1px solid # 000000结算/div
/div
/div
脚本src=cart.js/script
/body
/html
二、javascript代码
自行封装了getClasses()函数，避免兼容性问题。
定义变量价格=getClasses(价格),
购物车=文档。getelementbyid(“cart”)；
acc=getClasses(acc )，
totals=getClasses(total )，
贬损=获取类( dessymbol )，
adds=getClasses(adsymbol )，
NumofGoods=文档。getelementbyid( NumofGoods )，
addupto=document。getelementbyid( addupto )，
all select=get class( all select )，
select=getClasses(select )，
dele=获取类( dele )；
count()；
count all()；
for(var I=0；iallSelect.lengthi ){
全选[我].onclick=function(){
for(var j=0；jselect.lengthj ){
选择[j]的缩写.已检查=这个.检查过了
}
for(j=0；jallSelect.lengthj ){
allSelect[j].已检查=这个.检查过了
}
//每次点击选框就计算一次总价
count all()；
}
}
for(I=0；iselect.lengthi ){
选择[我].onclick=function(){
if(ifAllSelected()){
for(j=0；jallSelect.lengthj ){
allSelect[j].选中=真；
}
}
if(ifNotAllSelected()){
for(j=0；jallSelect.lengthj ){
allSelect[j].选中=假；
}
}
count all()；
}
}
for(I=0；iadds.lengthi ){
添加[我].onclick=function(){
控制台。日志(这个。父节点。子节点[3]).innerHTML)；
var num=parse int(this。父节点。子节点[3]).innerHTML)；
num=1；
this.parentNode.childNodes[3].innerHTML=num
count()；
count all()；
}
贬低[我]。onclick=function(){
var num=parse int(this。父节点。子节点[3]).innerHTML)；
num-=1；
if(num1){
num=1；
}
this.parentNode.childNodes[3].innerHTML=num
count()；
count all()；
}
//删除时也应该重新计算总价，或者先判断商品是否被选中，有选中则重新计算
删除，删除.onclick=function(){
cart.childNodes[1].移除子代(this。父节点)；
count all()；
}
}
//避免兼容性问题，自行封装类名
函数getClasses(类名){
var arr=[]，
节点=文档。getelementsbytagname( * )；
for(var I=0；索引节点。长度；i ){
如果(节点【我】。className==className)
由…改编push(nodes[I])；
}
}
返回arrive）
}
//进行单价的计算，保留两位小数
函数计数(){
for(var I=0；iprices.lengthi ){
总计[我].innerHTML=(prices[i].innerHTML*acc[i].innerHTML).toFixed(2)；
}
}
//计算总价的函数
函数countAll(){
var num 1=0；
var num 2=0；
//注意，每次计算总价应该重新取得一次选择，附件和总计，因为执行删除操作时，会让这几个值发生变化
var select=getClasses(select )，
acc=getClasses(acc )，
totals=get classes( total )；
for(var I=0；iselect.lengthi ){
如果（选择[我].checked==true){
num1=parseInt(acc[i]).innerHTML)；
num2=parseFloat(totals[i]).innerHTML)；
}
}
NumofGoods.innerHTML=num1
addupto.innerHTML=num2
}
//判断是否全部选中或者全部没有选中的函数
函数ifAllSelected(){
var allSelected=true
for(var I=0；iselect.lengthi ){
如果（选择[我].checked==false){
allSelected=false
}
}
返回全部选定
}
函数ifNotAllSelected(){
var notAllSelected=false
for(var I=0；iselect.lengthi ){
如果（选择[我].checked==false){
notAllSelected=true
}
}
返回未全部选择
} 推荐学习： 《javascript基础教程》 以上就是爪哇岛描述语言怎么实现购物车效果的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。