欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js中的DOM模拟购物车功能

程序员文章站 2022-06-07 23:39:35
效果图: 代码如下: ...</div> <div class="content"> <p><strong>效果图:</strong></p> <p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="js中的DOM模拟购物车功能" src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA2MTAvYl8wXzIwMTkwNjEwMjExMzIwNjMxMy5wbmc=" title="js中的DOM模拟购物车功能"></p> <p><strong>代码如下:</strong></p> <div class="jb51code"> <pre class="brush: javascript;"> <!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> </pre> </div> <p>以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!</p> </div> <div class="info-pre-next"> <p> 上一篇: <a href="/article/1307558.html"> Bootstrap页面标题Page Header的实现方法 </a> </p> <p> 下一篇: <a href="/article/1307560.html"> Bootstrap超大屏幕的实现代码 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2153512.html" target="_blank" title="学习JS中的DOM节点以及操作"> <h2> 学习JS中的DOM节点以及操作 </h2> </a> </li> <li> <a href="/article/2135574.html" target="_blank" title="使用Angular.js实现简单的购物车功能"> <h2> 使用Angular.js实现简单的购物车功能 </h2> </a> </li> <li> <a href="/article/2079200.html" target="_blank" title="js中的DOM模拟购物车功能"> <h2> js中的DOM模拟购物车功能 </h2> </a> </li> <li> <a href="/article/2040285.html" target="_blank" title="Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地"> <h2> Asp.Net 将HTML中通过dom-to-image.js标签div内的内容转化为图片保存到本地 </h2> </a> </li> <li> <a href="/article/2021539.html" target="_blank" title="node.js中实现kindEditor图片上传功能的方法教程"> <h2> node.js中实现kindEditor图片上传功能的方法教程 </h2> </a> </li> <li> <a href="/article/1986530.html" target="_blank" title="Vue.js实现的购物车功能详解"> <h2> Vue.js实现的购物车功能详解 </h2> </a> </li> <li> <a href="/article/1907859.html" target="_blank" title="模拟jQuery中的ready方法及实现按需加载css,js实例代码"> <h2> 模拟jQuery中的ready方法及实现按需加载css,js实例代码 </h2> </a> </li> <li> <a href="/article/1890999.html" target="_blank" title="JS的框架Polymer中的dom-if和is属性使用说明"> <h2> JS的框架Polymer中的dom-if和is属性使用说明 </h2> </a> </li> <li> <a href="/article/1864607.html" target="_blank" title="JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能"> <h2> JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能 </h2> </a> </li> <li> <a href="/article/1858168.html" target="_blank" title="Vue.js实现开发购物车功能的方法详解"> <h2> Vue.js实现开发购物车功能的方法详解 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益,请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号:<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>