js中的数字正射影像图模拟购物车功能

效果图：

代码如下：

！DOCTYPE htmlhtml标题新文档/title meta charset='utf-8 '样式表{ border:1px固体# 000边框塌陷：宽度宽度：600px} td { border:1px固体# 000文本对齐：居中；}/样式/头体表和tr td名称运输署/运输署单价运输署/运输署数量运输署/运输署小计/TD/tr/ad t body id=' t body ' tr TD iphone 6/TD TD TD 4488/TD TD按钮点击=' btnClick(this)'-/按钮span 1/span按钮点击=' btnClick(this)'/按钮/TD TD TD TD TD iphone 6/TD TD TD TD按钮点击=' btnClick(this)'-/按钮span 1/span按钮点击=' btnClick(this)'/按钮/TD TD TD TD 558总计：/TD TD id=' all _ total '/TD/tfoot/table脚本函数btn单击(btn){ //声明spanValue变量，用于保存跨度中的数据var spanValue//1，更改跨度中的数据//1.1 判断btn是还是- if(btn.textContent==' '){ //1.2根据btn找到BTN。previouselementsibling//1.3 获取跨度里的数据span值=ParSeint(span。文本内容)；//1.4 更新跨度中的数据跨度值=1；跨度。文本内容=SPan值；}else{ //减法操作var span=BTN。nextelementsibling//1.3 获取跨度里的数据span值=ParSeint(span。文本内容)；//1.4 更新跨度中的数据if(SPan值1){ SPan值-=1；跨度。文本内容=SPan值；} } //2.计算小计//2.1 先获取单价元素BTN。父节点。previouselementsibling//2.2 获取单价元素中的数值(价格)var price=ParSeint(TDprice。text content)；//2.3 计算小计(spanValue *价格),保存在总定义变量总价格* spanValue//2.4获取小计元素(总)风险值总=BTN。ParentNode。NextElementSibling//2.5 将总数的值赋值给tdTotal元素tdTotal.textContent=total//调用计算总计的函数calallTotaL()；} /** * 计算总计*/函数calAllTotal(){ //1，}获取编号为tbody中的所有正文=文件。getelementbyid(' t body ')；TRS=t体。getelementsbytagname(' tr ')；控制台。原木(TRS)；//2、循环遍历所有tr，找到每个tr的最后一个TD var all _ total=0；for(var I=0；itrs . lengthi){ var tr=TRS[I]；//3、累加每个任务描述的值计算总计//3.1 获取tr中的最后一个TD var LastTD=tr。lasteelementchild；var last value=Parsent(LastTD。text content)；all _ total=lastdvalue }//4、赋值文件。getelementbyid(' all _ total ').textContent=all _ total} //加载时调用calAllTotal()计算现有的总计calallTotaL()；/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！