代码改变世界

简易计算器

2018-04-16 22:31  yelena  阅读(128)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0 auto;
                padding: 0;
            }
            #waikuang{
                width: 315px;
                height: 400px;
                background-color: lightblue;
                border: 1px solid black;
            }
            #inp_div{
                width: 313px;
                height: 30px;
                border: 1px solid black;
            }
            #inp_div input{
                width: 313px;
                height: 30px;
                border: none;
            }
            .tr{
                width: 370px;
                height: 90px;
            }
            .num{
                width: 70px;
                height: 80px;
                float: left;
                background-color: darkgray;
                margin-left: 7px;
                text-align: center;
                line-height: 80px;
                margin-top: 8px;
                border-radius: 5px;
            }
            .num:hover{
                cursor: pointer;
                box-shadow: 0px 2px 2px lightcoral;
            }
        </style>
    </head>
    <body>
        <div id="waikuang">
            <div id="inp_div">
                <input type="text" name="" id="jsinput" value="" />
                
            </div>
            <div class="tr">
                <div class="num">7</div>
                <div class="num">8</div>
                <div class="num">9</div>
                <div class="num">/</div>
                
            </div>
             <div class="tr">
                 <div class="num">4</div>
                 <div class="num">5</div>
                 <div class="num">6</div>
                 <div class="num">*</div>
             </div>    
             <div class="tr">
                 <div class="num">1</div>
                 <div class="num">2</div>
                 <div class="num">3</div>
                 <div class="num">-</div>
             </div>
             <div class="tr">
                 <div class="num">0</div>
                 <div class="num">.</div>
                 <div class="num">+</div>
                 <div class="num">=</div>
             </div>
        </div>
    </body>
</html>
<script type="text/javascript">
     var num = document.getElementsByClassName("num");
     var one = 0;
     var two = 0;
     var fuhao = "";
     var biao = 0;
     for(var i = 0;i<num.length;i++){
         num[i].onclick = function(){
             biao++;
             document.getElementById("jsinput").value=this.innerHTML;
             if(biao==1){
                 one = parseInt(this.innerHTML);
             }
             else if(biao==2){
                 fuhao = this.innerHTML;
             }
             else if(biao==3){
                 two = parseInt(this.innerHTML);
             }
             if(this.innerHTML=="="){
                 switch(fuhao){
                     case"+":
                     document.getElementById("jsinput").value = one + two;
                     break;
                     case"-":
                     document.getElementById("jsinput").value = one - two;
                     break;
                     case"*":
                     document.getElementById("jsinput").value = one * two;
                     break;
                     case"/":
                     document.getElementById("jsinput").value = one / two;
                     break;
                 }
             }
         }
     }
     
</script>