JavaScript实现的简单的计算器

来源:互联网 发布:gd32单片机 编辑:程序博客网 时间:2024/05/17 04:23
<!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>
原创粉丝点击