原生js 实现购物车价格和总价 统计
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js 实现购物车价格和总价 统计相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload=function(){ 8 var aIn=document.querySelectorAll(‘input‘); 9 var aEm=document.querySelectorAll(‘em‘); 10 var aI=document.querySelectorAll(‘i‘); 11 for(var i=0;i<aIn.length;i++){ 12 13 (function(index){ 14 if(aIn[index].value==‘0‘){ 15 delete localStorage[‘a‘+index]; 16 } 17 aIn[i].oninput=function(){ 18 aI[index].innerHTML=parseFloat(aEm[index].innerHTML)*parseFloat(aIn[index].value); 19 localStorage[‘a‘+index]=parseFloat(aEm[index].innerHTML)*parseFloat(aIn[index].value); 20 21 storage(); 22 }; 23 24 })(i); 25 26 } 27 function storage(){ 28 var arr=[]; 29 function findArr(){ 30 for(var name in localStorage){ 31 arr.push(localStorage[name]); 32 33 } 34 return arr; 35 } 36 var d=findArr(); 37 var p=0; 38 for(var i=0;i<d.length;i++){ 39 var p=Number(d[i])+p; 40 div1.innerHTML=‘总价：‘+p; 41 } 42 } 43 44 }; 45 </script> 46 </head> 47 <body> 48 <div> 49 <p>商品名称：碧血剑谱</p> 50 <input type="number" min="0" value="0"> 51 <em>30$</em><br><br> 52 <i></i> 53 54 </div> 55 <div> 56 <p>商品名称:九阴真经</p> 57 <input type="number" min="0" value="0"> 58 <em>60$</em><br><br> 59 <i></i> 60 61 </div> 62 <div> 63 <p>商品名称：太极拳谱</p> 64 <input type="number" min="0" value="0"> 65 <em>90$</em><br><br> 66 <i></i> 67 68 </div> 69 <div id="div1">0</div> 70 </body> 71 </html>
以上是关于原生js 实现购物车价格和总价 统计的主要内容，如果未能解决你的问题，请参考以下文章