一、知识要点
1、字符串转数字
2、isNaN的使用
3、innerHTML
二、源码参考
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>简单求和</title>
<script>
window.onload = function () {
var oTxt1 = document.getElementById('txt1');
var oTxt2 = document.getElementById('txt2');
var oBtn = document.getElementById('btn1');
var span1 = document.getElementById('span1');
oBtn.onclick = function () {
var n1 = parseInt(oTxt1.value);
var n2 = parseInt(oTxt2.value);
if (isNaN(n1)) { // 判断是否是数字
alert('您输入的第一个数字有误');
} else if (isNaN(n2)) { // 判断是否是数字
alert('您输入的第二个数字有误');
} else {
span1.innerHTML = "=" + (n1 + n2);
}
};
};
</script>
</head>
<body>
<input id="txt1" type="text" />+
<input id="txt2" type="text" /><span id="span1"></span>
<input id="btn1" type="button" value="求和" />
</body>
</html>
三、运行效果
image.png
网友评论