这篇文章给大家介绍怎么在JavaScript中利用DOM实现一个购物车功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
创新互联公司2013年成立,是专业互联网技术服务公司,拥有项目网站制作、网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元吴江做网站,已为上家服务,为吴江各地企业和个人服务,联系电话:18980820575
代码如下:
<!DOCTYPE html> <html> <head> <title> new document </title> <meta charset="utf-8"> <style> table{ border:1px solid #000; border-collapse:collapse; width:600px; } td{ border:1px solid #000; text-align:center; } </style> </head> <body> <table> <thead> <tr> <td>名称</td> <td>单价</td> <td>数量</td> <td>小计</td> </tr> </thead> <tbody id="tbody"> <tr> <td>iphone6</td> <td>4488</td> <td> <button onclick="btnClick(this)">-</button> <span>1</span> <button onclick="btnClick(this)">+</button> </td> <td>4488</td> </tr> <tr> <td>iphone6</td> <td>5288</td> <td> <button onclick="btnClick(this)">-</button> <span>1</span> <button onclick="btnClick(this)">+</button> </td> <td>5288</td> </tr> <tr> <td>iphone6</td> <td>4288</td> <td> <button onclick="btnClick(this)">-</button> <span>1</span> <button onclick="btnClick(this)">+</button> </td> <td>4288</td> </tr> </tbody> <tfoot> <td colspan="3" align="right">总计:</td> <td id="all_total"></td> </tfoot> </table> <script> function btnClick(btn){ //声明 spanValue 变量,用于保存 span中的数据 var spanValue; //1、更改 span 中的数据 //1.1 判断 btn 是+还是- if(btn.textContent == "+"){ //1.2 根据 btn 找到 span var span=btn.previousElementSibling; //1.3 获取 span里的数据 spanValue=parseInt(span.textContent); //1.4 更新 span中的数据 spanValue+=1; span.textContent=spanValue; }else{ //减法操作 var span = btn.nextElementSibling; //1.3 获取 span里的数据 spanValue=parseInt(span.textContent); //1.4 更新 span中的数据 if(spanValue > 1){ spanValue-=1; span.textContent=spanValue; } } //2.计算 小计 //2.1 先 获取 单价 元素(tdPrice) var tdPrice=btn.parentNode.previousElementSibling; //2.2 获取 单价 元素中的 数值(price) var price=parseInt(tdPrice.textContent); //2.3 计算小计(spanValue*price),保存在 total var total=price*spanValue; //2.4 获取 小计 元素(tdTotal) var tdTotal=btn.parentNode.nextElementSibling; //2.5 将 total 的值 赋值给 tdTotal元素 tdTotal.textContent=total; //调用 计算总计 的函数 calAllTotal(); } /** * 计算总计 */ function calAllTotal(){ //1、获取 id为tbody 中的所有tr var tbody = document.getElementById("tbody"); var trs=tbody.getElementsByTagName("tr"); console.log(trs); //2、循环遍历所有tr,找到每个tr的最后一个td var all_total=0; for(var i=0;i<trs.length;i++){ var tr=trs[i]; //3、累加 每个 td 的值 计算总计 //3.1 获取 tr 中的 最后一个td var lastTd=tr.lastElementChild; var lastTdValue=parseInt(lastTd.textContent); all_total += lastTdValue; } //4、赋值 document.getElementById("all_total").textContent=all_total; } //加载时调用 calAllTotal() 计算现有的总计 calAllTotal(); </script> </body> </html>
关于怎么在JavaScript中利用DOM实现一个购物车功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
本文名称:怎么在JavaScript中利用DOM实现一个购物车功能
文章出自:https://www.cdcxhl.com/article36/gsijsg.html
成都网站建设公司_创新互联,为您提供企业网站制作、用户体验、网站制作、静态网站、服务器托管、域名注册
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联