javaScript小项目-----计算器

超、凢脫俗 2022-07-17 00:24 167阅读 0赞

用Bootstrap和原生javaScript做的简易计算器；![Center][]

<html>
        <head>
            <meta charset="utf-8">
            <title>制作计算器</title>
            <link rel="stylesheet" type="text/css" href="../h5edu/bootstrap/css/bootstrap.min.css">
    <style type="text/css">
     .sum{
    
     } 
     #box{
        font-size: 20px;
     }
     .mycontent{
        margin-left:auto; 
        margin-right:auto;
        width: 190px;
        height: 208px;
        background-color:rgba(0,0,255,0.6);
        border-radius: 7px;
     }
    </style>
    </head>
    <body>
    <div class="mycontent">
    <input type="button" class="form-control btn btn-success " value="简易计算器">
    <input type="text" id="box" class="form-control">
       <input οnclick="numb(this)" value="1" type="button" class="btn btn-info">
    <input οnclick="numb(this)" value="2" type="button" class="btn btn-info">
    <input οnclick="numb(this)" value="3" type="button" class="btn btn-info">
    <input type="button" value="+"  class="btn btn-danger" id="jia">
    <br>
    <input οnclick="numb(this)" value="4" type="button" class="btn btn-info">
    <input οnclick="numb(this)" value="5" type="button" class="btn btn-info">
    <input οnclick="numb(this)" value="6" type="button" class="btn btn-info">
    <input type="button" value="-"  class="btn btn-danger" id="jian" οnclick="ways('-')">
    <br>
    <input οnclick="numb(this)" value="7" type="button" class="btn btn-info">
    <input οnclick="numb(this)" value="8" type="button" class="btn btn-info">
    <input οnclick="numb(this)" value="9" type="button" class="btn btn-info">
    <input type="button" value="*"  class="btn btn-danger" id="cheng" οnclick="ways('*')">
    <br>
    <input οnclick="numb(this)" value="0" type="button" class="btn btn-info">
    <input type="button" value="="  class="btn btn-warning" id="dengyu">
    <input type="button" value="C" οnclick="cencel()" class="btn btn-warning" >
    <input type="button" value="/"  class="btn btn-danger" id="chu" οnclick="ways('/')">
    <br>
    
    
    
    </div>
    
    
    
    
    
    <div class="sum">
    
    
    
    
    
    <h2>计算数字</h2>
    <input οnclick="numb(this)" value="1" type="button" class="btn btn-primary">
    <input οnclick="numb(this)" value="2" type="button" class="btn btn-primary">
    <input οnclick="numb(this)" value="3" type="button" class="btn btn-primary">
    <input οnclick="numb(this)" value="4" type="button" class="btn btn-primary">
    <input οnclick="numb(this)" value="5" type="button" class="btn btn-primary">
    <input οnclick="numb(this)" value="6" type="button" class="btn btn-primary">
    <input οnclick="numb(this)" value="7" type="button" class="btn btn-primary">
    <input οnclick="numb(this)" value="8" type="button" class="btn btn-primary">
    <input οnclick="numb(this)" value="9" type="button" class="btn btn-primary">
    <input οnclick="numb(this)" value="0" type="button" class="btn btn-primary">
      <br>
    <h2>计算符号</h2>
    <input type="button" value="+"  class="btn btn-success" id="jia">
    <input type="button" value="-"  class="btn btn-success" id="jian" οnclick="ways('-')">
    <input type="button" value="*"  class="btn btn-success" id="cheng" οnclick="ways('*')">
    <input type="button" value="/"  class="btn btn-success" id="chu" οnclick="ways('/')">
    <br>
    <h2>功能键</h2>
    <input type="button" value="="  class="btn btn-warning" id="dengyu">
    <input type="button" value="C" οnclick="cencel()" class="btn btn-warning" >
    <br>
    <h2>计算框</h2>
    <input type="text" id="box" class="form-control">
    <br>
    </div>
    <script type="text/javascript">
    var numbers="";
    var operand="";
    var sum="";
    var way="";
    function numb(num){
      numbers=numbers+num.value;
      document.getElementById("box").value=numbers;
      
    }
    function cencel(){
      document.getElementById('box').value='';
      numbers="";
    }
    var jia=document.getElementById("jia");
    jia.οnclick=function(){
        sum=parseInt(document.getElementById("box").value);
        document.getElementById("box").value="";
        way="+";
        numbers="";
    }
    var dengyu=document.getElementById("dengyu");
    dengyu.οnclick=function(){
        switch (way){
             case '+':
                var box=parseInt(document.getElementById("box").value);
                var sums=sum+box;
                console.log(sums);
                document.getElementById("box").value=sums;
             break;
             case '-':
                var box=parseInt(document.getElementById("box").value);
                var sums=sum-box;
                document.getElementById("box").value=sums;
                console.log("进入减数");
             break;
             case '*':
                var box=parseInt(document.getElementById("box").value);
                var sums=sum*box;
                document.getElementById("box").value=sums;
             break;
             case '/':
                var box=parseInt(document.getElementById("box").value);
                var sums=sum/box;
                document.getElementById("box").value=sums;
                console.log("这是除法");
             break;
             default:
                console.log("输入正确");
        }
      }
    
    
    function ways(){
      console.log("on Here");
      sum=parseInt(document.getElementById("box").value);
      document.getElementById("box").value="";
      way=arguments[0];
      numbers="";
    }
    
    </script>
    </body>
    </html>

[Center]: /images/20220717/1b0b6b564eaa4fcf88c58b9c7f509792.png