您的位置：首页 > Web前端 > JavaScript

js实现简单的计算器代码

2012-02-20 20:26 756 查看

<!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>10级PHP JS计算器的实现</title>

<script language="javascript" type="text/javascript">

/*

js版简易计算器

1、排版布局

2'获取用户输入的数据

3'显示输入的内容计算

4'把文本框的结果显示在文本框内

*/

//是否清除文本框上次计算的结果

var clearFlag=false;

//获取用户输入的内容

function getNum(num){

//首先获取文本框的对象

var objresult= document.getElementById("result");

//判断是否要清除上次计算的结果

/*

什么时候应该清除

一次计算完毕后，下次计算前要清空文本框中的内容

怎样清空

*/

if(clearFlag){

//清空文本框

objresult.value="";

clearFlag=false;

}

//拼接等待计算的表达式

objresult.value+=num;

}

//计算结果

function getResult(){

//首先获取文本框的对象

var objr2= document.getElementById("result");

//4+5 = 9

objr2.value= objr2.value+"="+eval(objr2.value);

//设置要清空

clearFlag=true;

}

</script>

</head>

<body>

<table width="250" border="1">

<caption></caption>

<tr>

<td height="36" colspan="4"><input name="" type="text" id="result" size="40" width="230"></td>

</tr>

<tr>

<td width="54"><input type="button" name="" value=" 1 " onclick="getNum(1)" /> </td>

<td width="60"><input type="button" name="" value=" 2 " onclick="getNum(2)"/></td>

<td width="60">

<input type="button" name="input" value=" 3 " onclick="getNum(3)"/></td>

<td width="50"><input type="button" name="" value=" + " onclick="getNum('+')"/> </td>

</tr>

<tr>

<td><input type="button" name="" value=" 4 " onclick="getNum(4)"/> </td>

<td><input type="button" name="" value=" 5 " onclick="getNum(5)"/> </td>

<td><input type="button" name="" value=" 6 " onclick="getNum(6)"/> </td>

<td><input type="button" name="" value=" - " onclick="getNum('-')"/> </td>

</tr>

<tr>

<td height="38"><input type="button" name="" value=" 7 " onclick="getNum(7)"/> </td>

<td><input type="button" name="" value=" 8 " onclick="getNum(8)"/> </td>

<td><input type="button" name="" value=" 9 " onclick="getNum(9)"/> </td>

<td><input type="button" name="" value=" * " onclick="getNum('*')"/> </td>

</tr>

<tr>

<td height="44"><input type="button" name="" value=" 0 " onclick="getNum(0)"/> </td>

<td><input type="button" name="" value=" . " onclick="getNum('.')"/> </td>

<td><input type="button" name="" value=" = " onclick="getResult('=')"/> </td>

<td><input type="button" name="" value=" / " onclick="getNum('/')"/> </td>

</tr>

</table>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航