说明：代码来自网络。注释为笔者学习时添加。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>数组求和</title> <style> body{ color:#999;/*浅黑色*/ font:12px/1.5 Tahoma;/*行高18*/ } #outer{ width:500px; margin:0 auto;/*左右置中*/ } #outer input{ padding:3px; border:1px solid #ccc;/*边框灰色*/ font-family:inherit; width:220px; margin-right:10px;/*右外边距*/ } .sum{ font-size:30px;/*字号*/ color:red;/*文字颜色*/ } </style> <script> window.onload = function () { var oBtn = document.getElementsByTagName("button")[0]; //获取button中的第一个 var oInput = document.getElementsByTagName("input")[0];//获取input中的第一个 var oStrong = document.getElementsByTagName("strong")[0];//获取strong中的第一个 oInput.onkeyup = function () {//注册keyup事件 this.value = this.value.replace(/[^(d)|(,)]/, "");//调用replace方法去除开头的空格或逗号 } oBtn.onclick = function () { var sum = 0; var oInput = document.getElementsByTagName("input")[0].value.split(",");//获取input输入值，调用split以逗号为分隔符，返回一数组 for (var i in oInput) { sum += parseInt(oInput[i]);//循环把数组元素传递给parseInt解析为数字相加 } oStrong.innerHTML = sum;//把结果赋值给strong元素 } } </script> </head> <body> <!--div包裹,strong元素用来显示结果--> <div id="outer"> <label><input type="text" value="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15" /><span>输入数字求和，数字之间用半角","号分隔</span></label> <p><button>求和</button></p> <strong class="sum"></strong> </div> </body> </html>