JavaScript实现的简单的计算器

最新推荐文章于 2024-07-30 21:08:25 发布

LGJ1025

最新推荐文章于 2024-07-30 21:08:25 发布

阅读量580

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/LGJ1025/article/details/8207783

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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 " οnclick="doAdd(1)" /></td>
<td><input type="button" value=" 2 " οnclick="doAdd(2)" /></td>
<td><input type="button" value=" 3 " οnclick="doAdd(3)" /></td>
<td><input type="button" value=" + " οnclick="doAdd('+')" /></td>
</tr>

<tr>
<td><input type="button" value=" 4 " οnclick="doAdd(4)" /></td>
<td><input type="button" value=" 5 " οnclick="doAdd(5)" /></td>
<td><input type="button" value=" 6 " οnclick="doAdd(6)" /></td>
<td><input type="button" value=" - " οnclick="doAdd('-')" /></td>
</tr>
<tr>
<td><input type="button" value=" 7 " οnclick="doAdd(7)" /></td>
<td><input type="button" value=" 8 " οnclick="doAdd(8)" /></td>
<td><input type="button" value=" 9 " οnclick="doAdd(9)" /></td>
<td><input type="button" value=" * " οnclick="doAdd('*')" /></td>
</tr>

<strong><tr>
<td><input type="button" value=" 0 " οnclick="doAdd(0)" /></td>
<td><input type="button" value=" . " οnclick="doAdd('.')" /></td>
<td><input type="button" value=" = " οnclick="getResult()" /></td>
<td><input type="button" value=" / " οnclick="doAdd('/')" /></td>
</tr></strong>
</table>

</body>
</html>