<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function(){ var aIn=document.querySelectorAll('input'); var aEm=document.querySelectorAll('em'); var aI=document.querySelectorAll('i'); for(var i=0;i<aIn.length;i++){ (function(index){ if(aIn[index].value=='0'){ delete localStorage['a'+index]; } aIn[i].oninput=function(){ aI[index].innerHTML=parseFloat(aEm[index].innerHTML)*parseFloat(aIn[index].value); localStorage['a'+index]=parseFloat(aEm[index].innerHTML)*parseFloat(aIn[index].value); getStorage(); }; })(i); } //获取后台存取的信息。 function getStorage(){ var arr=[]; function findArr(){ for(var name in localStorage){ var reg=/^[a]d+$/g; if(reg.test(name)){ arr.push(localStorage[name]); } } return arr; } var d=findArr(); var p=0; for(var i=0;i<d.length;i++){ var p=Number(d[i])+p; div1.innerHTML='总价：'+p; } } }; </script> </head> <body> <div> <p>商品名称：碧血剑谱</p> <input type="number" min="0" value="0"> <em>30$</em><br><br> <i></i> </div> <div> <p>商品名称:九阴真经</p> <input type="number" min="0" value="0"> <em>60$</em><br><br> <i></i> </div> <div> <p>商品名称：太极拳谱</p> <input type="number" min="0" value="0"> <em>90$</em><br><br> <i></i> </div> <div id="div1">0</div> </body> </html>