加减乘除基本运算JS计算器程序

Ellie568

于 2020-05-15 10:38:23 发布

阅读量358

点赞数

分类专栏：编程文章标签： js

本文链接：https://blog.csdn.net/Ellie568/article/details/106136530

版权

编程专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>
     <head>
        <meta charset="utf-8"/>
        <title> 计算器 </title>
       <style>@font-face{
    font-family:"sss";
    src:url("../font/a.ttf");
    }
body{
    font-family:"sss";
    }
 
#jisuanqi{
    width:324px;
    height:555px;
    border:1px solid #999;
    margin:0 auto;
    }
#xianshiping{
    width:324px;
    height:150px;
    background:black;
    position:relative;
    }
#zi{
    position:absolute;
    right:10px;
    bottom:20px;
    //width:60px;
    //border:1px solid #999;
    font-size:45px;
    color:#FFF;
    text-align:right;
    }
.item{
    width:80px;
    height:80px;
    border:1px solid black;
    background:#ccc;
    float:left;
     
    margin-left:-1px;
    margin-top:-1px;
     
    line-height:78px;
    text-align:center;
    font-size:30px;
    }
.chengse{
    background:#C60;
    }
.kuan{
    width:161px;}
/*#test{
    width:200px;
    height:200px;
    border:1px solid black;
    margin:20px auto;
     
    border-radius:50%;
    -webkit-transition:width /*height,all,box-shadow*/1.2s linear/*ease*/;

    }
/*#test:hover{
    width:300px;
    height:300px;
    box-shadow:300px 300px 20px red,50px 50px 100px green inset,-200px 100px 50px blue;
    }
#wenzi{
    width:50px;
    height:30px;
    background:black;
    }*/
    </style>
     </head>
     <body>
        <div id="jisuanqi">
            <div id="xianshiping">
               <div id="zi">1</div>
            </div>
             
            <div class="item" id="">AC</div>
            <div class="item" id="">+/-</div>
            <div class="item" id="">%</div>
            <div class="item chengse" id="">/</div>
            <div class="item" id="n">7</div>
            <div class="item" id="">8</div>
            <div class="item" id="">9</div>
            <div class="item chengse" id="">*</div>
            <div class="item" id="">4</div>
            <div class="item" id="">5</div>
             
            <div class="item" id="">6</div>
            <div class="item chengse" id="">-</div>
            <div class="item" id="">1</div>
            <div class="item" id="">2</div>
            <div class="item" id="">3</div>
            <div class="item chengse" id="">+</div>
            <div class="item kuan" id="">0</div>
            <div class="item" id="">.</div>
            <div class="item chengse" id="">=</div>
         
        </div>
      <!--  <div id="test"></div>
        <div id="wenzi">首页</div>-->
        <script>
var els = document.getElementsByClassName('item');
var ziDiv = document.getElementById('zi');
 
var diyigeshu = '';
var diergeshu = '';
var yunsuanfuhao = '';
 
for (var i = 0; i < 19; i++) {
    els[i].onclick = function() {
        var text = this.textContent;
        if (!window.isNaN(text)) {               
                if (yunsuanfuhao == '') {
                    diyigeshu =diyigeshu*10+parseInt(this.textContent);
                    ziDiv.textContent =diyigeshu;
                } 
                else {
                    diergeshu = diergeshu*10+parseInt(this.textContent);
                    ziDiv.textContent = diergeshu;
                }
            
        }
        if (this.textContent == '/' || this.textContent == '*' || this.textContent == '+' || this.textContent == '-'||this.textContent == 'AC') {
            yunsuanfuhao = this.textContent;
            if (yunsuanfuhao == 'AC') 
            {
                diyigeshu = '';
                diergeshu = '';
                yunsuanfuhao = '';
                jieguo='';
                ziDiv.textContent ='0';
                
            }
        }
        if (this.textContent == '=') {
            if (yunsuanfuhao == '/') {
                var jieguo = (diyigeshu / diergeshu);
                
            }             
            else if (yunsuanfuhao == '*') 
            {
                var jieguo = (diyigeshu * diergeshu);
                 
            } 
            else if (yunsuanfuhao == '+') 
            {
                var jieguo = (diyigeshu + diergeshu);
                
            } else if (yunsuanfuhao == '-') 
            {
                var jieguo = (diyigeshu - diergeshu);
                
            }
             ziDiv.textContent = jieguo;
             diyigeshu = '';
             diergeshu = '';
             yunsuanfuhao = '';
             jieguo='';
 
        }
    }
}
 
</script>
        </body>
</html>

Ellie568

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
加减乘除基本运算JS计算器程序

<html> <head> <meta charset="utf-8"/> <title> 计算器 </title> <style>@font-face{ font-family:"sss"; src:url("../font/a.ttf"); }body{ font-family:"sss"; } #jisuanqi{ wid
复制链接

扫一扫