JvavScript简易计算器_jvavscript 四阶-CSDN博客

本文链接：https://blog.csdn.net/ningjie420/article/details/108847901

简单计算器

<!DOCTYPE html>
<html lang="en">	
	<head>    
		<meta charset="UTF-8">   
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
     		<title>Document</title>
     	</head>
     	<body>
     	<p>简单计算器:</p>
     	<table border="1" style="position:center;">
       		<tr>    
       			<td>第一个数：</td>
           		<td><input type="text" id="first"/></td>
             	</tr>  
             	<tr>    
             		<td>第二个数：</td>    
             		<td><input type="text" id="second"/></td>  
             	</tr> 
             	 <tr>   
               		<td colspan="2" >    
                 	&nbsp;<button style="width:inherit" onclick="add()">+</button>  
                 	&nbsp;<button style="width:inherit" onclick="subtract()">-</button>
                 	&nbsp;<button style="width:inherit" onclick="ride()">*</button>
                 	&nbsp;<button style="width:inherit" onclick="devide()">/</button>
                 	</td> 
                 </tr> 
                 <tr>  
                     	<td colspan="2" rowspan="2">  
                         <p id="result"></p>   
                         </td>  
                  </tr>
          </table>
	  <script>    
		var result_1;    
 		//加法   
 		function add() {     
   			var a = getFirstNumber();       
     			var b = getSecondNumber();        
     			var re =Number( a) +Number( b);//转换数据类型        
     			sendResult(re);    }   
      		//减法   
       		function subtract() {       
        		var a = getFirstNumber();        
        		var b = getSecondNumber();        
        		var re = a - b;        
        		sendResult(re);    }
    		//乘法   
     		function ride() {        
     			var a = getFirstNumber();        
     			var b = getSecondNumber();        
     			var re = a * b;       
      			sendResult(re);    }
    		//除法    
    		function devide() {        
    			var a = getFirstNumber();        
   			 var b = getSecondNumber();        
    			var re = a / b;        
    			sendResult(re);    }
    		//给p标签传值   
     		function sendResult(result_1) {    
         		var num = document.getElementById("result")  
               		num.innerHTML = result_1;    }
    		//获取第一位数字   
     		function getFirstNumber() { 
            		var firstNumber = document.getElementById("first").value;   
                 	return firstNumber;    }
   		 //获取第二位数字   
   		 function getSecondNumber() {   
         		var secondNumber = document.getElementById("second").value;    
             		return secondNumber;    }      
          </script>     
</body>
</html>