利用JavaScript实现加减乘除运算-优快云博客

一、问题：利用JavaScript写一个加减乘除运算，输入两个数，判断下拉列框的运算符号，进行相应的运算

二、首先，我利用JavaScript实现简单加法运算，代码如下：

<!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>实现加法运算</title>
<style type="text/css">
    body{
	  font-size:12px;
	}
	#one,#two{
	  width:30px;
	  background-color:#CCCCFF;
	}
	#three{
	  border:none;
	  background:#CCCCCC;
	}
	label{
	  font-size:12px;
	  font-weight:bold;
	}
</style>
<script type="text/javascript">
   function addNumber(){
       //第一个加数
      var a = parseInt(document.getElementById("one").value);
      //第二个加数
      var b = parseInt(document.getElementById("two").value);
      //求和
      var c = a + b;
      //将结果赋给button中的Value
      document.getElementById("three").value = c;   
   }
</script>
</head>

<body>
   <input type="text" id="one"/>
   <label> + </label>
   <input type="text" id="two"/>
   <label> = </label>
   <input type="button" value="?" id="three"  οnclick="addNumber()"/>
</body>
</html>

三、显示结果如下图所示：

（1）未输入数字时

（2）输入数字后，点击“？”按钮求和

四、由以上加法运算，我想进一步实现加减乘除运算。这个加号就得根据相应的条件，进行改变，并且由符号判断运算，其实现的源码如下：

<!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>实现加减乘除</title>
<script type="text/javascript">
    function operation(){
	    //第一个数
	    var oneNumber =  parseInt(document.getElementById("one").value);
		alert(oneNumber);
		
		//第二个数
		var twoNumber =  parseInt(document.getElementById("two").value);
		alert(twoNumber);
		
		//运算符
		var calculate = document.getElementById("select").value;
		alert(calculate);
		
		//计算结果
		var result = parseInt(document.getElementById("select").value);
		
		/**
		*计算符号的判断
		*/
		switch(calculate)
		{
		    case'+':result = oneNumber + twoNumber;
			     break;
			
			case'-':result = oneNumber - twoNumber;
			     break;
			
			case'*':result = oneNumber * twoNumber;
			     break;
			
			case'/':result = oneNumber / twoNumber;
			    break;
				
			default:alert("错误");
			    break;
		}
	}
</script>
</head>

<body>
   <input type="text" id="one" size="12" style="width:40px; "/>
    <select id="select">
	   <option value="+">+</option>
	   <option value="-">-</option>
	   <option value="*">*</option>
	   <option value="/">/</option>
	</select>
   <input type="text" id="two" size="12" style="width:40px; "/>=
   <input type="button" id="three" value="?" style="border:none; background-color:#FFFFFF;" οnclick="operation();"/>
</body>
</html>

五、结果如下图：