javaScript实现简易的计算器

最新推荐文章于 2022-07-02 23:58:02 发布

回_憶

最新推荐文章于 2022-07-02 23:58:02 发布

阅读量775

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/angjunqiang/article/details/41965613

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
    <title>计算器</title>
<script>
window.οnlοad=function(){
  var oScreen=document.getElementById('screen');
  var oResult=document.getElementById("result");
  var oBtns=document.getElementById('btns');
  var oA=oBtns.getElementsByTagName('a');
  oResult.innerHTML=0;
  var reg=/[\d-\+*\/.]/;//正则表达式判断数字和运算符号
  var rex=/[-\+*\/]/;//正则表达式判断运算符号
   for(var i=0;i<oA.length;i++){
     oA[i].οnclick=function(){
        var oper=this.innerHTML;
        if(oper == 'C'){//清空
           oResult.innerHTML=0;
        }else if(oper == 'DEL'){//实现退格操作
             var cur=oResult.innerHTML;
             if(cur.length>1){
               cur=cur.substring(0,cur.length-1);
               oResult.innerHTML=cur;
             }else{
                 oResult.innerHTML=0;
             }
        }else if(reg.test(oper)){
          if(oResult.innerHTML != '0'){
             if(rex.test(oResult.innerHTML[oResult.innerHTML.length-1]) && rex.test(oper)){
                  oResult.innerHTML=oResult.innerHTML.substring(0,oResult.innerHTML.length-1)+oper;
                  //oResult.innerHTML=oResult.innerHTML.replace(rex,oper);
             }else{
                  oResult.innerHTML+=oper;
             }
 
           }else{
 
              if(rex.test(oper)){
                   oResult.innerHTML+=oper;
              }else{    
                  oResult.innerHTML=oper;
              }
           }
 
        }else if(oper == '='){
           var val=oResult.innerHTML;
           var arith=val.match(rex);//返回运算符号
           var spli=val.split(rex);
           var num1=parseFloat(spli[0]);
           var num2=parseFloat(spli[1]);
           if(arith == '+'){
                oResult.innerHTML=num1+num2;
           }else if(arith == '-'){
                oResult.innerHTML=num1-num2;
           }else if(arith == '*'){
                oResult.innerHTML=num1*num2;
           }else if(arith == '/'){
                oResult.innerHTML=num1/num2;
           }
 
 
        }
 
     }
   }
 
}
</script>
<style type="text/css">
*{ margin: 0px; padding:0px;}
#frame{width: 300px;height: 450px;border: 1px solid green;margin: 30px 400px auto; position: absolute;}
#frame #screen{height: 120px; width:260px; border: 2px solid black;position: relative;margin:18px 18px auto;}
#frame #screen #result{margin-top:79px;   font-size: 20px;color: #00BFFF;font-weight: bold;height: 40px;text-align: right;line-height: 40px;padding-right: 10px;}
#frame #btns{border-top:2px solid green;width: 300px;height:280px; position: relative;margin: 10px auto;}
#frame #btns ul{margin-left: 18px;width: 264px;}
#frame #btns ul li{display: inline-block; border: 1px solid black;text-align: center;line-height: 50px;font-size: 25px;font-weight: bold;margin-top: 5px;margin-left:8px; }
#frame #btns ul li a{text-decoration: none;background: gray;display: inline-block;width: 50px;height: 50px;}
</style>
</head>
<body>
   <div id="frame">
      <div id="screen">
          <div id="result"></div>
      </div>
      <div id="btns">
          <ul>
            <li><a href="javascript:;">C</a></li>
            <li><a href="javascript:;">DEL</a></li>
            <li><a href="javascript:;">/</a></li>
            <li><a href="javascript:;">*</a></li>
            <li><a href="javascript:;">7</a></li>
            <li><a href="javascript:;">8</a></li>
            <li><a href="javascript:;">9</a></li>
            <li><a href="javascript:;">-</a></li>
            <li><a href="javascript:;">4</a></li>
            <li><a href="javascript:;">5</a></li>
            <li><a href="javascript:;">6</a></li>
            <li><a href="javascript:;">+</a></li>
            <li><a href="javascript:;">1</a></li>
            <li><a href="javascript:;">2</a></li>
            <li><a href="javascript:;">3</a></li>
            <li style="height:107px;position: absolute;left: 222px"><a href="javascript:;" style="height:107px;line-height:107px;">=</a></li><!-- 使用绝对布局会有top  left等属性。这些属性是相对于父元素的顶点 -->
            <li><a href="javascript:;" style="width:118px;">0</a></li>
            <li><a href="javascript:;">.</a></li>
          </ul>
      </div>
   </div>
</body>
</html>

实现的效果如图：

由于这里面没有使用栈来处理运算，所以只能两两运算，欢迎大家补充。

回_憶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript实现简易的计算器

计算器window.onload=function(){ var oScreen=document.getElementById('screen'); var oResult=document.getElementById("result"); var oBtns=document.getElementById('btns'); var oA=oBtns.getElements
复制链接

扫一扫