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

  第一种方案:采用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" >
		<select name="flag" >//注意select-option的用法
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
		</select>
		
		<input type="text" name="value2" >
		<!--
		<button type="button" onclick="doCal()">点击这里</button>
		-->
		<input type="button" value="=" onclick="doCal()">//button的onclick事件
		<!--
		<input type="text" name="result" >
		-->
		<span ></span>//通过span显示结果
	</body>
</html>

  

 

相关文章:

  • 2021-12-30
  • 2022-12-23
  • 2021-11-21
  • 2021-05-27
  • 2022-02-14
  • 2022-02-09
  • 2022-12-23
  • 2021-11-27
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-11-28
  • 2022-01-18
  • 2021-12-24
  • 2022-01-03
  • 2022-12-23
相关资源
相似解决方案