web 简易计算器

来源：互联网发布：数据库体育信息管理编辑：程序博客网时间：2024/06/02 12:31

一、思路

1.定义变量存储按键输入的值2个（num1，num2）、小数点（.）、运算符号（fuhao）、结果（result）。

2.用到indexOf函数和substring函数。indexOf函数和java类似，返回字符中indexof（string）中字串string在父串中首次出现的位置，从0开始。substring函数：

这个函数返回第一个参数中从第二个参数指定的位置开始、第三个参数指定的长度的子字符串。该字符串中的每个字符都被认为具有数字位置：第一个字符的位置是 1，第二个字符的位置是 2，依此类推。

3.结合实际应用的计算器的思路，通过先读取数据，然后判断运算符，进而进行运算，最终输出结果的步骤。

二、代码（很简单，慢慢琢磨就能看懂。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://blog.csdn.net/hpkaifashizu/article/details/48137679">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单计算器</title>
<script>
var num1="";
var num2=""
var d="."
var fuhao="";
var result1="";

function sumResult(num){
num1+=num;
document.getElementById("show").value=num1
}
function dian(){
if(num1.indexOf(".")<0){
num1+=d;
document.getElementById("show").value=num1
}
}
function qiuhe(){
if(num1!=""){
num2=num1;}
fuhao="+";
document.getElementById("show").value=fuhao;
num1="";
}
function qiucha(){
if(num1!=""){
num2=num1;}
fuhao="-";
document.getElementById("show").value=fuhao;
num1=""
}
function qiucheng(){
if(num1!=""){
num2=num1;}
fuhao="*";
document.getElementById("show").value=fuhao;
num1=""
}
function qiushang(){
if(num1!=""){
num2=num1;}
fuhao="/";
document.getElementById("show").value=fuhao;
num1="";
}
function qiuyu(){
if(num1!=""){
num2=num1;
}
fuhao="%";
document.getElementById("show").value=fuhao;
num1="";
}
function jie(){
switch(fuhao){
case"+":
result1=parseFloat(num2)+parseFloat(num1);
document.getElementById("show").value=result1;
num1="";
num2=result1;
break;

case"-":
result1=parseFloat(num2)-parseFloat(num1);
document.getElementById("show").value=result1;
num1="";
num2=result1;
break;

case"*":
result1=parseFloat(num2)*parseFloat(num1);
document.getElementById("show").value=result1;
num1="";
num2=result1;
break;

case"/":
result1=parseFloat(num2)/parseFloat(num1);
document.getElementById("show").value=result1;
num1="";
num2=result1;
break;

case"%":
result1=parseFloat(num2)%parseFloat(num1);
document.getElementById("show").value=result1;
num1="";
num2=result1;
break;
}
}
function reset(){
num1="";
mum2="";
document.getElementById("show").value="0."
}
function bk(){
if(num1!=null&&num1.length>0){
num1=num1.substring(0,num1.length-1);
document.getElementById("show").value=num1;
}
}
function fanhui(){
num1=result1;
document.getElementById("show").value=num1;
}
</script>
</head>
<body>
<table width="334" height="200" border="1">
<tr>
<td height="50" colspan="5" align="center">
<input type="text" name="number" id="show" value="0."></td>
</tr>
<tr>
<td width="60"align="center"><input type="button" name="num7" id="number7" value="7" onClick="sumResult(7)"></td>
<td width="60"align="center"><input type="button" name="8" id="8" value="8" onClick="sumResult(8)"></td>
<td width="60"align="center"><input type="button" name="9" id="9" value="9" onClick="sumResult(9)"></td>
<td align="center"><input type="button" name="reset" id="reset" value="c" onClick="reset()"></td>
<td align="center"><input type="button" name="bk" id="bk" value="ce" onClick="bk()"></td>
</tr>
<tr>
<td align="center"><input type="button" name="4" id="4" value="4" onClick="sumResult(4)"></td>
<td align="center"><input type="button" name="5" id="5" value="5" onClick="sumResult(5)"></td>
<td align="center"><input type="button" name="6" id="6" value="6" onClick="sumResult(6)"></td>
<td align="center"><input type="button" name="sum" id="sum" value="+" onClick="qiuhe()"></td>
<td align="center"><input type="button" name="sub" id="sub" value="-" onClick="qiucha()"></td>
</tr>
<tr>
<td align="center"><input type="button" name="1" id="1" value="1" onClick="sumResult(1)"></td>
<td align="center"><input type="button" name="2" id="2" value="2" onClick="sumResult(2)"></td>
<td align="center"><input type="button" name="3" id="3" value="3" onClick="sumResult(3)"></td>
<td align="center"><input type="button" name="mul" id="mul" value="*" onClick="qiucheng()"></td>
<td align="center"><input type="button" name="div" id="div" value="/" onClick="qiushang()"></td>
</tr>
<tr>
<td align="center">
<input type="button" name="0" id="0" value="0" onClick="sumResult(0)">
</td>
<td align="center"><input type="button" name="10" id="10" value="." onClick="dian()"></td>
<td align="center"><input type="button" name="text" id="return" onClick="fanhui()" value="返回"></td>
<td align="center"><input type="button" name="mod" id="mod" value="%" onClick="qiuyu()"></td>
<td align="center"><input type="button" name="result" id="result" value="=" onClick="jie()"></td>
</tr>
</table>

</body>
</html>

0 0