[java代码库]-简易计算器(第一种)

简易计算器(效果如图所示)

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

[java代码库]-简易计算器(第一种)

 

<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">

		<!--

		<button type="button" onclick="doCal()">点击这里</button>

		-->

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

		<!--

		<input type="text" name="result" id="result">

		-->

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

	</body>

</html>

  

 

你可能感兴趣的:(java)