使用JavaScript写一个计算器。（附源码）

最新推荐文章于 2022-06-02 19:35:39 发布

一个技术小菜鸟L_H

最新推荐文章于 2022-06-02 19:35:39 发布

阅读量3k

点赞数 5

CC 4.0 BY-SA版权

文章标签： js 计算器

本文链接：https://blog.youkuaiyun.com/qq_39597371/article/details/82850916

本文介绍了一个使用HTML、CSS和JavaScript实现的简易网页计算器。该计算器具备基本的数学运算功能，包括加、减、乘、除及清零操作。通过按钮输入数字和运算符，可在输入框显示计算过程和结果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
<script type="text/javascript">
/*9.编写一个计算器，实现加，减，乘，除，归0，计算功能。*/
	var temp="";
	function fn(i){
		var num = document.getElementsByName("num")[i].value;
		temp+=num;
		document.getElementById("text").value=temp;
	}
	function zero(){
		document.getElementById("text").value="";
		temp="";
	}
	function calculate(){
		var oper = getOper();
		switch(oper){
			case 1:
				var num = temp.split("+");
				var sum = parseFloat(num[0])+parseFloat(num[1]);
				document.getElementById("text").value=sum;
				temp=sum;
				break;
			case 2:
				var num = temp.split("-");
				var lease = parseFloat(num[0])-parseFloat(num[1])
				document.getElementById("text").value=lease;
				temp=lease;
				break;
			case 3:
				var num = temp.split("*");
				var cheng = parseFloat(num[0])*parseFloat(num[1])
				document.getElementById("text").value=cheng;
				temp=cheng
				break;
			case 4:
				var num = temp.split("/");
				var chu = parseFloat(num[0])/parseFloat(num[1])
				document.getElementById("text").value=chu;
				temp=chu;
				break;
				
			
		}
 		
	}
	function getOper(){
		var op=document.getElementsByClassName("op");
		for(var i=0;i<temp.length;i++){
			if(temp[i]=="+"){
				return 1;
			}else if(temp[i]=="-"){
				return 2;
			}else if(temp[i]=="*"){
				return 3;
			}else if(temp[i]=="/"){
				return 4;
			}
		}
	}

</script>
<style type="text/css">
	td{ text-align:center;}
	table{ background:#0FF;}
	
</style>
</head>

<body>
	<table width="180" border="1" align="center" height="300">
  <tr>
    <td colspan="3">
    <input type="text" style=" width:100px; text-align:right;" id="text"/>
    </td>
    <td>
    <input type="button" value="C" id="zero" onClick="zero()"/>
    </td>
    
  </tr>
  <tr>
    <td><input type="button" value="7" name="num" onClick="fn(0)"/></td>
    <td><input type="button" value="8" name="num" onClick="fn(1)"/></td>
    <td><input type="button" value="9"  name="num" onClick="fn(2)"/></td>
    <td><input type="button" value="+" name="num" class="op" onClick="fn(3)"/></td>
  </tr>
  <tr>
    <td><input type="button" value="4"  name="num" onClick="fn(4)"/></td>
    <td><input type="button" value="5"  name="num" onClick="fn(5)"/></td>
    <td><input type="button" value="6"  name="num" onClick="fn(6)"/></td>
    <td><input type="button" value="-" name="num" class="op"  onClick="fn(7)"/></td>
  </tr>
  <tr>
    <td><input type="button" value="1"  name="num" onClick="fn(8)"/></td>
    <td><input type="button" value="2"  name="num" onClick="fn(9)"/></td>
    <td><input type="button" value="3"  name="num" onClick="fn(10)"/></td>
    <td><input type="button" value="*" name="num" class="op" onClick="fn(11)"/></td>
  </tr>
  <tr>
    <td><input type="button" value="0"  name="num" onClick="fn(12)"/></td>
    <td><input type="button" value="." name="num" onClick="fn(13)"/></td>
    <td><input type="button" value="="  onClick="calculate()"/></td>
    <td><input type="button" value="/" name="num" class="op" onClick="fn(14)"/></td>
  </tr>
</table>

</body>
</html>

示例图如下：