标签：style blog http color io os ar java for
一. 实现页面样式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>求出数组中所有数字的和</title> <style> body{ color:#999; font:12px/1.5 Tahoma; } #outer{ width:500px; margin:0 auto; } #outer input{ padding:3px; border:1px solid #ccc; font-family:inherit; width:22opx; margin-right:10px; } .sum{ font-size:30px; color:red; } </style> </head> <body> <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>
二.实现计算功能
<script> window.onload = function () { var oBtn = document.getElementsByTagName("button")[0]; var oInput = document.getElementsByTagName("input")[0] var oStrong = document.getElementsByTagName("strong")[0]; oInput.onkeyup = function () { this.value = this.value.replace(/[^(\d)|(,)]/,"") } oBtn.onclick = function () { var sum = 0; var oInput = document.getElementsByTagName("input")[0].value.split(","); for (var i in oInput) { sum += parseInt(oInput[i]) } oStrong.innerHTML = sum } } </script>
小结：
一.
Event 对象：
onkeydown 事件会在用户按下一个键盘按键时发生。
onkeyup 事件会在键盘按键被松开时发生。
JavaScript 全局对象：
parseInt() 函数可解析一个字符串，并返回一个整数。
JavaScript String 对象：
split() 方法用于把一个字符串分割成字符串数组。
HTML DOM Tablerow 对象：
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
标签：style blog http color io os ar java for
原文地址：http://www.cnblogs.com/code-charmer/p/4031680.html
