用javascript实现一个简单计算器

<!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-10-php-计算器实现</title>


<!--

js简易计算器
1.布局
2.获取用户输入内容
3.用户输入内容进行计算
4.把计算结果显示在文本框中
-->
<script language="javascript" type="text/javascript">
//获取输入的内容
var clearFlag=false;//是否清楚清楚文本框中计算的结果

function getNum(num){
    
    //首先获取文本框中的对象
    var objresult = document.getElementById("result");
    //alert(num);
    //判断是否清楚上次计算的结果
    /*
    一次计算完毕之后,下次计算清除清空文本框中的内容
    怎么清空?
    
    */
    if(clearFlag){
    //清空文本框的计算结果
        objresult.value="";
        
        //将clearFlag的结果返回初始值
        clearFlag=false;
        }
    objresult.value+=num;
//    alert(objresult.value);
    }
    
//计算结果

function getResult(){
    
    var objr2 = document.getElementById("result");
    objr2.value = objr2.value +"="+eval(objr2.value);
    clearFlag=true;//将clearFlag的初始值改掉,作为执行过一次的标记,将于下次执行的时候作判断是否执
    }
</script>


</head>

<body>



<table width="284" border="1">
<caption></caption>
  <tr>
    <td colspan="4"><input type="text" id="result" size="34"></td>
  </tr>
  <tr>
    <td width="65"><input type="button" value="   1   " οnclick="getNum(1)"></td>
    <td width="65"><input type="button" value="   2   " οnclick="getNum(2)"></td>
    <td width="65"><input type="button" value="   3   " οnclick="getNum(3)"></td>
    <td width="65"><input type="button" value="   0  " οnclick="getNum(0)"></td>
  </tr>
  <tr>
    <td width="65"><input type="button" value="   4   " οnclick="getNum(4)"></td>
    <td width="65"><input type="button" value="   5   " οnclick="getNum(5)"></td>
    <td width="65"><input type="button" value="   6   " οnclick="getNum(6)"></td>
    <td width="65"><input type="button" value="   .   " οnclick="getNum('.')"></td>
  </tr>
  <tr>
     <td width="65"><input type="button" value="   7   " οnclick="getNum(7)"></td>
    <td width="65"><input type="button" value="   8   " οnclick="getNum(8)"></td>
    <td width="65"><input type="button" value="   9   " οnclick="getNum(9)"></td>
    <td width="65"><input type="button" value="   =  " οnclick="getResult()"></td>
  </tr>
  <tr>
     <td width="65"><input type="button" value="   +   " οnclick="getNum('+')"></td>
    <td width="65"><input type="button" value="   -   " οnclick="getNum('-')"></td>
    <td width="65"><input type="button" value="   *   " οnclick="getNum('*')"></td>
    <td width="65"><input type="button" value="   /   " οnclick="getNum('/')"></td>
  </tr>
</table>

</body>
</html>


  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值