zoukankan      html  css  js  c++  java
  • JavaScript仿计算器案例源代码

    效果图

    index.html

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
      <link rel="stylesheet" type="text/css" href="calc.css">
      <script type="text/javascript" src="calc.js"></script>
    </head>
    <body onload="init()">
         <div id="div1">    
             <div id="div2">
                 <input type="text" name="num" id="num" />
             </div>
             <div id="div3">
                 <input type="button" value="c" name="" id=""/>
                 <input type="button" value="←" name="" id=""/>
                 <input type="button" value="+/-" name="" id=""/>
                 <input type="button" value="/" name="" id=""/>
                 <input type="button" value="1" name="" id="n1"/>
                 <input type="button" value="2" name="" id=""/>
                 <input type="button" value="3" name="" id=""/>
                 <input type="button" value="*" name="" id=""/>    
                 <input type="button" value="4" name="" id=""/>
                 <input type="button" value="5" name="" id=""/>
                 <input type="button" value="6" name="" id=""/>
                 <input type="button" value="-" name="" id=""/>
                 <input type="button" value="7" name="" id=""/>
                 <input type="button" value="8" name="" id=""/>
                 <input type="button" value="9" name="" id=""/>
                 <input type="button" value="+" name="" id=""/>
                 <input type="button" value="0" name="" id=""/>
                 <input type="button" value="." name="" id=""/>
                 <input type="button" value="=" name="" id=""/>
                 <input type="button" value="m" name="" id="imooc"/>
             </div>
         </div>
    </body>
    </html>

    calc.css

    *{
        margin:0px;
        padding:0px;
    }
    div{
        width: 170px;
    }
    #div1{
        top:60px;
        left: 100px;
        position: absolute;
    }
    input[type="button"]{
        width: 30px;
        margin-right: 5px;
    
    }
    input[type="text"]{
        width: 152px;
        text-align: right;
        background-color: #fff;
        border: 1px solid;
        padding-right: 5px;
        box-sizing: border-box;
    }
    
    input[type="button"]:hover{
        background-color: yellow;
        border: 1px solid;
    }

    calc.js

    function init(){
        var num=document.getElementById("num");
        num.value=0;
        num.disabled="disabled";
    
        var oButton=document.getElementsByTagName("input");
        var btn_num1;
        var fh;
        for(var i=0;i<oButton.length;i++){
            oButton[i].onclick=function(){
                if(isNumber(this.value)){
                    if(isNull(num.value)){
                        num.value=this.value;
                    }else{
                        num.value=num.value+this.value;
                    }
                }else{
                    var btn_num=this.value;
                    
                    switch(btn_num){
                        case "+":
                            btn_num1=Number(num.value);
                            num.value=0;
                            fh="+";
                            break;
                        case "-":
                            btn_num1=Number(num.value);
                            num.value=0;
                            fh="-";
                            break;
                        case "*":
                            btn_num1=Number(num.value);
                            num.value=0;
                            fh="*";
                            break;
                        case "/":
                            btn_num1=Number(num.value);
                            num.value=0;
                            fh="/";
                            break;
                        case ".":
                            num.value=dec_number(num.value);
                            break;
                        case "←":
                            num.value=back(num.value);
                            break;
                        case "c":
                            num.value="0";
                            break;
                        case "+/-":
                            num.value=sign(num.value);
                            break;
                        case "=":
                            switch(fh){
                                case "+":
                                  num.value=btn_num1+Number(num.value);
                                  break;
                                case "-":
                                   num.value=btn_num1-Number(num.value);
                                   break;
                                case "*":
                                   num.value=btn_num1*Number(num.value);
                                   break;
                                case "/":
                                   if(Number(num.value)==0){
                                           alert("除数不能是0");
                                         num.value=0;
                                   }else{
                                         num.value=btn_num1/Number(num.value);
                                   }
                                   
                                   break;
                            }
                            break;
                    }
                }
            }
        }
    }
    /*正负号*/
    function sign(n){
       n=Number(n)*-1;
       return n;
    }
    /*退位键*/
    function back(n){
       n=n.substr(0,n.length-1);
       if(isNull(n)){
             n="0";
       }
       return n;
    }
    /*小数点*/
    function dec_number(n){
       if(n.indexOf(".")==-1){
          n=n+".";
       }
       return n;
    }
    /*验证文本框是否为空或者0*/
    function isNull(n){
       if(n=="0" || n.length==0){
           return true;
       }else{
              return false;
       }
    }
    
    function isNumber(n){
      return  !isNaN(n);
    }
  • 相关阅读:
    【开卷故意】JAVA正則表達式模版
    CSS控制显示超出部分,用省略号显示
    1星《微信软文营销实战技巧》:标题党,作者没有实战经验
    3星|《强势谈判》:有趣的绑匪谈判故事
    3星|《赢者的诅咒》:新晋诺奖得主92年作品,博弈论在拍卖、薪酬、股市、彩票、赛马、汇市等领域的应用,偏专业
    4星|《OKR实践指南》:老司机经验谈
    3星|《华为管理变革》:华为有史以来为了变革而开展的项目的概述。
    3星|《信号》:全球经济的坏消息
    2星|《麦肯锡图表工作法》:用图表做商业分析的入门演示
    2星|《麦肯锡与贝恩的团队管理智慧》:从投入、产出两个维度把下属分到4个象限
  • 原文地址:https://www.cnblogs.com/chenyingying0/p/12179018.html
Copyright © 2011-2022 走看看