用JavaScript编写一个简易计算器

JS部分

<script>
	var num1;
	var num2;
	var result;
	function jia(){
	num1=parseInt(document.f1.n1.value);
	num2=parseInt(document.f1.n2.value);
	result=num1+num2;
	document.f1.end.value=result;
	};
	function jian(){
	num1=document.f1.n1.value;
	num2=document.f1.n2.value;
	result=num1-num2;
	document.f1.end.value=result;
	};
	function ch(){
	num1=document.f1.n1.value;
	num2=document.f1.n2.value;
	result=num1*num2;
	document.f1.end.value=result;
	};
	function chu(){
	num1=document.f1.n1.value;
	num2=document.f1.n2.value;
	result=num1/num2;
	document.f1.end.value=result;
	};
</script>

body部分：

<body bgcolor="pink">
<center>
<form name="f1">
<h1>简易计算器</h1><br />
第一个数
<input name="n1" type="text" /><br />
第二个数
<input name="n2" type="text" /><br />
<input name="a" type="button" value="+" class="button" onclick="jia()">
<input name="b" type="button" value="-"  class="button" onclick="jian()">
<input name="c" type="button" value="*"  class="button" onclick="ch()">
<input name="d" type="button" value="/"  class="button" onclick="chu()">
<br />
计算结果
<input name="end" type="text" />
</form>
</center>
</body>

用JavaScript编写一个简易计算器最终效果图，可能有些丑，可以自己该样式

另一种方法：用switch循环改写此代码，并增加除数不能为0的提示，实现效果一样，虽然在方法上大同小异，但是用switch方法更简便：

<script>
	function myFunction(c){
		var a,b;
	var result;
	a=parseFloat(document.f1.n1.value);
	b=parseFloat(document.f1.n2.value);
		switch(c){
		case 0:
				result=a+b;
				document.f1.end.value=result;
				break;
		case 1:
				result=a-b;
				document.f1.end.value=result;
				break;
		case 2:
				result=a*b;
				document.f1.end.value=result;
				break;
		case 3:if(b==0){
			document.write("除数不能为0！！！");}
			else{
				result=a/b;
				document.f1.end.value=result;}
				break;
		}
		return document.f1.end.value;
	}
</script>

body部分：
注意在onclick处的更改

<center>
<form name="f1">
第一个数：
<input name="n1" type="text"><br/>
第二个数：
<input name="n2" type="text"><br/>

<input type="button" name="jia" value="+" class="button" onclick="myFunction(0)">
<input type="button" name="jian" value="-" class="button" onclick="myFunction(1)">
<input type="button" name="cheng" value="*" class="button" onclick="myFunction(2)">
<input type="button" name="chu" value="/" class="button" onclick="myFunction(3)">
<br/>
结果：<input name="end" type="text">
</form>
</center>

end。。。。

用JavaScript编写一个简易计算器

相关推荐