一. 实现页面样式
<!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。
时间： 2024-11-05 14:57:33