码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript实现简单计算器

时间:2019-01-31 20:41:37      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:乘法   分享图片   var   image   数字   lsp   value   cli   alt   

技术分享图片

<!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" onclick="add()">+</button>
                   
                 <button style="width:inherit" onclick="subtract()">-</button>
                    
                 <button style="width:inherit" onclick="ride()">*</button>
                     
                 <button style="width:inherit" onclick="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>

  

JavaScript实现简单计算器

标签:乘法   分享图片   var   image   数字   lsp   value   cli   alt   

原文地址:https://www.cnblogs.com/jiguiyan/p/10343276.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!