JavaScript实现简单计算器

Posted perfect*

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript实现简单计算器相关的知识，希望对你有一定的参考价值。

<!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实现简单计算器的主要内容，如果未能解决你的问题，请参考以下文章

10个JavaScript代码片段，使你更加容易前端开发。

简单的 Javascript http 请求片段但不起作用

html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

JavaScript - 代码片段，Snippets，Gist

几个有用的JavaScript/jQuery代码片段（转）

golang代码片段（摘抄）