zoukankan      html  css  js  c++  java
  • 利用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{
    	  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="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="40px; "/> =
       <input type="button" id="three" value="?" style="border:none; background-color:#FFFFFF;" οnclick="operation();"/>
    </body>
    </html>
    

    五、结果如下图:

  • 相关阅读:
    Node项目
    Angular模块/服务/MVVM
    Angular介绍1
    Node环境配置及Gulp工具
    Linux及Git介绍
    数据库MySQL
    ReactiveCocoa 监听枚举类型enumerate 或者 NSInteger类型
    ReactiveCocoa 监听布尔(BOOL)类型改变
    python3.7 urlopen请求HTTPS警告'CERTIFICATE_VERIFY_FAILED'解决办法
    Centos yum命令
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315800.html
Copyright © 2011-2022 走看看