JavaScript实现简单计算器

最新推荐文章于 2020-03-25 13:22:53 发布

weixin_30319153

最新推荐文章于 2020-03-25 13:22:53 发布

阅读量123

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jiguiyan/p/10343276.html

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>简单计算器</title>
	</head>
	<body>
		<p align="center">简单计算器</p>
		<div align="center">
		<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="twice"></td>
			</tr>
			<tr>
				<td colspan="2">
					  
                 <button style="width:inherit" οnclick="add()">+</button>
                   
                 <button style="width:inherit" οnclick="subtract()">-</button>
                    
                 <button style="width:inherit" οnclick="ride()">*</button>
                     
                 <button style="width:inherit" οnclick="devide()">/</button>
				</td>
			</tr>
			<tr>
			<td colspan="2" rowspan="2">
				<p id="result"></p>
			</td>
			
			</tr>
		</table></div>
		<script type="text/javascript">
			//加法
			function add()
			{
				var a=getFirstNumber();
				var b=getTwiceNumber();
				var re=Number( a) +Number( b);//注意:这里不允许写成a+b;
				sendResult(re);
				
			}
			//减法
			function subtract(){
				var a=getFirstNumber();
				var b=getTwiceNumber();
				var re=a-b;
				sendResult(re);
				
			}
			//乘法
			function ride(){
				var a=getFirstNumber();
				var b=getTwiceNumber();
				var re=a*b;
				sendResult(re);
			}
			//除法
			function devide(){
				var a=getFirstNumber();
				var b=getTwiceNumber();
				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 getTwiceNumber(){
				var twiceNumber=document.getElementById("twice").value;
				return twiceNumber;
			}
			
			
			</script>
		
		
	</body>
</html>

转载于:https://www.cnblogs.com/jiguiyan/p/10343276.html