localStorage实现购物车数量单价和总价实时同步
Posted Jason齐齐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了localStorage实现购物车数量单价和总价实时同步相关的知识，希望对你有一定的参考价值。
利用localStorage实时显示购物车小计和总价页面显示：
和昨天的原理相同，本地存储同时实时循环计算总价之和，注意循环时候的先清空再计算
Success is getting what you want, happiness is wanting what you get.
成功是得其所想，幸福是想其所得！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> document.addEventListener(‘DOMContentLoaded‘,function(){ var aInp=document.querySelectorAll(‘input‘); var oPer=document.getElementsByTagName(‘em‘); var oStotal=document.getElementsByTagName(‘i‘); var oDiv=document.getElementById(‘div1‘); for(var i=0;i<aInp.length;i++){ (function(index){ //当aInp中的数字为0时清除localsotage中的数据 if(aInp[index].value==‘0‘){ delete localStorage[index]; } //当aInp中数字发生变化的时候存储localstorage aInp[index].onchange=function(ev){ localStorage[index]=parseFloat(oPer[index].innerHTML)*aInp[index].value; oStotal[index].innerHTML=‘小计‘+Number(localStorage[index]); //获取localStorage并显示在总价中 var sum=0; for(var name in localStorage){ sum+=Number(localStorage[name]); oDiv.innerHTML=‘总价:‘+sum; } }; })(i); } },false); </script> </head> <body> <div> <p>商品名称：苹果</p> <input type="number" min="0" value="0"> <em>3$</em><br><br> <i></i> </div> <div> <p>商品名称:橘子</p> <input type="number" min="0" value="0"> <em>6$</em><br><br> <i></i> </div> <div> <p>商品名称：香蕉</p> <input type="number" min="0" value="0"> <em>9$</em><br><br> <i></i> </div> <div id="div1">0</div> </body> </html>
以上是关于localStorage实现购物车数量单价和总价实时同步的主要内容，如果未能解决你的问题，请参考以下文章
js 怎么实现，数量*重量*单价=总价？帮忙看一下需要怎么改？