利用JavaScript实现加减乘除运算

Posted odejsjhshw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用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"  onclick="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;" onclick="operation();"/>
</body>
</html>

五、结果如下图:

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow



以上是关于利用JavaScript实现加减乘除运算的主要内容,如果未能解决你的问题,请参考以下文章

加减乘除求余 利用 位运算实现(详细)

Javascript实现运算符重载

Code Kata:大整数比较大小&大整数四则运算---加减法 javascript实现

大数运算(加减乘除)

利用c语言设计开发一个简单计算器,可进行加减乘除运算。

四则运算2