简易计算器

<!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>

相关阅读:
APB协议
 AHB总线协议(一)
C++内存机制中内存溢出、内存泄露、内存越界和栈溢出的区别和联系
 深入理解C++内存管理机制
 c/c++内存机制（一）（转）
与临时对象的斗争（下）
与临时对象的斗争（上）ZZ
C++异常处理解析: 异常的引发(throw), 捕获(try catch)、异常安全
 qt5信息提示框QMessageBox用法
 红黑树
原文地址：https://www.cnblogs.com/yelena-niu/p/8858981.html