<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js-10-php-计算器实现</title>
<!--
js简易计算器
1.布局
2.获取用户输入内容
3.用户输入内容进行计算
4.把计算结果显示在文本框中
-->
<script language="javascript" type="text/javascript">
//获取输入的内容
var clearFlag=false;//是否清楚清楚文本框中计算的结果
function getNum(num){
//首先获取文本框中的对象
var objresult = document.getElementById("result");
//alert(num);
//判断是否清楚上次计算的结果
/*
一次计算完毕之后,下次计算清除清空文本框中的内容
怎么清空?
*/
if(clearFlag){
//清空文本框的计算结果
objresult.value="";
//将clearFlag的结果返回初始值
clearFlag=false;
}
objresult.value+=num;
// alert(objresult.value);
}
//计算结果
function getResult(){
var objr2 = document.getElementById("result");
objr2.value = objr2.value +"="+eval(objr2.value);
clearFlag=true;//将clearFlag的初始值改掉,作为执行过一次的标记,将于下次执行的时候作判断是否执
}
</script>
</head>
<body>
<table width="284" border="1">
<caption></caption>
<tr>
<td colspan="4"><input type="text" id="result" size="34"></td>
</tr>
<tr>
<td width="65"><input type="button" value=" 1 " οnclick="getNum(1)"></td>
<td width="65"><input type="button" value=" 2 " οnclick="getNum(2)"></td>
<td width="65"><input type="button" value=" 3 " οnclick="getNum(3)"></td>
<td width="65"><input type="button" value=" 0 " οnclick="getNum(0)"></td>
</tr>
<tr>
<td width="65"><input type="button" value=" 4 " οnclick="getNum(4)"></td>
<td width="65"><input type="button" value=" 5 " οnclick="getNum(5)"></td>
<td width="65"><input type="button" value=" 6 " οnclick="getNum(6)"></td>
<td width="65"><input type="button" value=" . " οnclick="getNum('.')"></td>
</tr>
<tr>
<td width="65"><input type="button" value=" 7 " οnclick="getNum(7)"></td>
<td width="65"><input type="button" value=" 8 " οnclick="getNum(8)"></td>
<td width="65"><input type="button" value=" 9 " οnclick="getNum(9)"></td>
<td width="65"><input type="button" value=" = " οnclick="getResult()"></td>
</tr>
<tr>
<td width="65"><input type="button" value=" + " οnclick="getNum('+')"></td>
<td width="65"><input type="button" value=" - " οnclick="getNum('-')"></td>
<td width="65"><input type="button" value=" * " οnclick="getNum('*')"></td>
<td width="65"><input type="button" value=" / " οnclick="getNum('/')"></td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js-10-php-计算器实现</title>
<!--
js简易计算器
1.布局
2.获取用户输入内容
3.用户输入内容进行计算
4.把计算结果显示在文本框中
-->
<script language="javascript" type="text/javascript">
//获取输入的内容
var clearFlag=false;//是否清楚清楚文本框中计算的结果
function getNum(num){
//首先获取文本框中的对象
var objresult = document.getElementById("result");
//alert(num);
//判断是否清楚上次计算的结果
/*
一次计算完毕之后,下次计算清除清空文本框中的内容
怎么清空?
*/
if(clearFlag){
//清空文本框的计算结果
objresult.value="";
//将clearFlag的结果返回初始值
clearFlag=false;
}
objresult.value+=num;
// alert(objresult.value);
}
//计算结果
function getResult(){
var objr2 = document.getElementById("result");
objr2.value = objr2.value +"="+eval(objr2.value);
clearFlag=true;//将clearFlag的初始值改掉,作为执行过一次的标记,将于下次执行的时候作判断是否执
}
</script>
</head>
<body>
<table width="284" border="1">
<caption></caption>
<tr>
<td colspan="4"><input type="text" id="result" size="34"></td>
</tr>
<tr>
<td width="65"><input type="button" value=" 1 " οnclick="getNum(1)"></td>
<td width="65"><input type="button" value=" 2 " οnclick="getNum(2)"></td>
<td width="65"><input type="button" value=" 3 " οnclick="getNum(3)"></td>
<td width="65"><input type="button" value=" 0 " οnclick="getNum(0)"></td>
</tr>
<tr>
<td width="65"><input type="button" value=" 4 " οnclick="getNum(4)"></td>
<td width="65"><input type="button" value=" 5 " οnclick="getNum(5)"></td>
<td width="65"><input type="button" value=" 6 " οnclick="getNum(6)"></td>
<td width="65"><input type="button" value=" . " οnclick="getNum('.')"></td>
</tr>
<tr>
<td width="65"><input type="button" value=" 7 " οnclick="getNum(7)"></td>
<td width="65"><input type="button" value=" 8 " οnclick="getNum(8)"></td>
<td width="65"><input type="button" value=" 9 " οnclick="getNum(9)"></td>
<td width="65"><input type="button" value=" = " οnclick="getResult()"></td>
</tr>
<tr>
<td width="65"><input type="button" value=" + " οnclick="getNum('+')"></td>
<td width="65"><input type="button" value=" - " οnclick="getNum('-')"></td>
<td width="65"><input type="button" value=" * " οnclick="getNum('*')"></td>
<td width="65"><input type="button" value=" / " οnclick="getNum('/')"></td>
</tr>
</table>
</body>
</html>