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

JavaScript实现的简单的计算器

2012-11-21 14:00 579 查看
<!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>JavaScrpt版计算器</title>

<style>

.button{

height:30px;

width:30px;

border:1px blue solid;

text-align:center;

float:left;

margin:5px;

}

</style>

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

//实现计算器

/*

1、简单的排版布局

2、监听按钮事件，获取按钮信息，显示出来

3、开始计算 “=” 后开始计算

*/

var flag =true;

function doAdd(op){

////获取显示结果的文本

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

if(!flag){

result.value="";

flag =true;

}

//执行字符串的链接

result.value+=op;

}

function getResult(){

//获取显示结果的文本框

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

//result 1+2+3=

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

flag=false;

}

</script>

</head>

<body>

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

<tr>

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

</tr>

<tr>

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

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

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

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

</tr>

<tr>

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

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

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

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

</tr>

<tr>

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

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

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

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

</tr>

<strong><tr>

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

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

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

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

</tr></strong>

</table>

</body>

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