首页 > 代码库 > 原生js 实现购物车价格和总价 统计
原生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=http://www.mamicode.com/=‘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=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"0">65 <em>90$</em><br><br>66 <i></i>67 68 </div>69 <div id="div1">0</div>70 </body>71 </html>
原生js 实现购物车价格和总价 统计
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。