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

js简单实现计算器

2012-02-27 20:33 441 查看
<!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-计算器</title>

</head>

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

var clearmsg=false;

//获取点击获得的参数

function getNum(num){

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

if(clearmsg){

objResult.value ="";

clearmsg=false;

}

//将获得的值进行累加

objResult.value += num;

}

//进行计算

function getResult(){

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

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

clearmsg=true;

}

</script>

<body>

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

<caption>js-计算器</caption>

<tr>

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

</tr>

<tr>

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

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

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

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

</tr>

<tr>

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

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

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

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

</tr>

<tr>

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

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

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

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

</tr>

<tr>

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

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

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

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

</tr>

</table>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航