JS实现简易计算器-CSDN博客

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js实现计算器</title>
<script type="text/javascript">
/*
isNaN is not a number? 是否不是一个数字
不是数字 "sdf" true
10 false
*/

//点击事件触发的方法
function js(op){
//得到第一个元素
var yi=document.getElementById("one");

//非空验证
if(yi.value==""||yi.value.length==0){
alert("不能为空！");
yi.focus(); //获得焦点
return;
}

//判断是否是数字
if(isNaN(yi.value)){
alert("输入的内容无效，请输入有效的数字格式.");
yi.focus();
yi.value="";
return;
}

//得到第二个元素
var er=document.getElementById("two");

//非空验证
if(er.value==""||er.value.length==0){
alert("不能为空！");
er.focus(); //获得焦点
return;
}

//判断是否是数字
if(isNaN(er.value)){
alert("输入的内容无效，请输入有效的数字格式.");
er.focus();
er.value="";
return;
}

//为加号的时候一定要强转，不然加号会变成连接符 1+1=11
var r;
switch(op){
case "+":
r=parseFloat(yi.value)+parseFloat(er.value);break;
case "-":
r=yi.value-er.value;break;
case "*":
r=yi.value*er.value;break;
case "/":
r=yi.value/er.value;break;
}
//给结果框赋值
document.getElementById("result").value=r;
}

</script>
</head>

<body>
<form>
第一个数：<input type="text" id="one"/><br/>
第二个数：<input type="text" id="two"/><br/>
<input type="button" value="+" οnclick="js('+')"/>
<input type="button" value="-" οnclick="js('-')"/>
<input type="button" value="*" οnclick="js('*')"/>
<input type="button" value="/" οnclick="js('/')"/><br/>
计算结果：<input type="text" id="result"/>
</form>
</body>
</html>