<style> body{font-size: 12px;} .outer{ width: 500px; margin: 0 auto; } span{ color: #999; } input{ width: 220px; line-height: 20px; border: 1px solid #ccc; margin-bottom: 12px; } p{ font-size: 20px; color: red; font-weight: bold; } </style> <script> window.onload = function() { var oBtn = document.getElementsByTagName('button')[0]; var oTxt = document.getElementsByTagName('input')[0]; // 在这里获取元素，在点击之后再获取元素的值。不能直接在这获取value，因为输入框的数字是变动的，不能以初始值为准。 var oP = document.getElementsByTagName("p")[0]; var oResult = 0; // 在鼠标 keyup 输入框的时候，判断输入的内容，除了数字和,逗号，其他的字符不能输入。 oTxt.onkeyup = function () { this.value = this.value.replace(/[^(d)|(,)]/,"") // 这里用的正则还不熟悉！ }; oBtn.onclick = function() { // var aNum = parseInt(oTxt.value.split(",")) ; // 不能直接把数组parseInt var aNum = oTxt.value.split(","); for(var i=0; i<aNum.length; i++) { oResult += parseInt (aNum[i]); }; oP.innerHTML = oResult; // 这里必须先有对象，innerHTML是DOM用法。 oResult的值是赋给对象的！ } }; </script> </head> <body> <div class="outer"> <input type="text" value="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15"> <span>输入数字求和，数字之间用半角","号分隔</span> <br> <button>求和</button> <p></p> </div> </body>