[java代码库]-简易计算器（第一种）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

简易计算器（效果如图所示）

第一种方案：采用Javascript+html完成计算器，支持+-*/，结果显示不允许使用input输入域（可以考虑使用《span》）

<html>
<head>
<title>简易计算器</title>
<script language="javascript">//易错：不是"text/javascript"
function doCal(){
//alert(document.getElementByName("value1").length);//易错：getElementByName,首字母大写，不是byName
//alert(document.getElementByName("value1")[0].value);//易错：getElementByName，返回一个集合，应该用[0]表示需要获得第几个元素var value1=parseInt(document.getElementById("value1").value);//易错：易错：getElementById首字母大写，不是byId
var flag=document.getElementById("flag").value;
var value2=parseInt(document.getElementById("value2").value);//易错：getElementBy返回是String类型，应该通过parseInt转换为Int类型
//alert(value1+","+flag+","+value2);//多打印东西出来，用于检验
var s=0;
switch(flag){
case "+"://易错：语法，别忘记加冒号
s=value1+value2;
break;//易错：语法，别忘记加break；跳出选择
case "-":
s=value1-value2;
break;
case "*":
s=value1*value2;
break;
case "/":
s=value1/value2;
}
//使运算结果显示在浏览器中，注意=右侧为string类型
document.getElementById("span_result").innerHTML="<font size='16' color='red'>"+s+"</font>"
}//alert(document.getElementByName(value1).value);</script>
</head>
<body>
<h1>简易计算器</h1>
<hr>
<input type="text" name="value1" id="value1">
<select name="flag" id="flag">//注意select-option的用法
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select><input type="text" name="value2" id="value2">

<input type="button" value="=" onclick="doCal()">//button的onclick事件

<span id="span_result"></span>//通过span显示结果
</body>
</html>