zoukankan      html  css  js  c++  java
  • js计算器

    界面:

    index.html:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js计算器</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <script src="js/a.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="count">
    <textarea readonly="readonly"></textarea>
    <input type="button" value="←">
    <input type="button" value="CE">
    <input type="button" value="C">
    <input type="button" value="±">
    <input type="button" value="√">
    <br />
    <input type="button" value="7">
    <input type="button" value="8">
    <input type="button" value="9">
    <input type="button" value="÷">
    <input type="button" value="%">
    <br />
    <input type="button" value="4">
    <input type="button" value="5">
    <input type="button" value="6">
    <input type="button" value="*">
    <input type="button" value="1/x">
    <br />
    <input type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <input type="button" value="-">
    <input type="button" value="=" class="result">
    <br />
    <input type="button" value="0" style="85px;">
    <input type="button" value=".">
    <input type="button" value="+">
    <br />
    </div>
    </body>
    </html>

    a.js:

    var show="";            /*用于文本域的显示*/
    var x="";               /*输入值*/
    var a=0;                /*数值暂存*/
    var fh="";              /*运算符*/
    var yn=false;           /*文本域是否需要清零*/
    window.onload=dy;
    function dy(){
        var count=document.getElementById("count");
        var count_input=count.getElementsByTagName("input");
        for(var i=0;i<count_input.length;i++){
            count_input[i].onclick=function(){
                press(event);
            }
        }
    }
    function press(e){                  /*主函数*/
        var txt=document.getElementsByTagName("textarea")[0];
        var e=e.target.value;
        if(e>=0&&e<=9) sz(e);
        if(e>=0&&e<=9&&yn==true) sz1(e);
        if(e=="←") bback();
        if(e=="CE") del();
        if(e=="C") ql();
        if(e=="+") sum();
        if(e=="-") subtraction();
        if(e=="*") multiplication();
        if(e=="÷") division();
        if(e=="=") show=results(e);
        if(e==".") decimals();
        if(e=="±") plusMinus();
        if(e=="√") radical();
        if(e=="1/x") reciprocal();
        txt.value=show;
    }
    function sz(e){                     /*字符相连成变量x*/
        x=x+e;
        show=show+e;
    }
    function sz1(e){                    /*输出结果后直接输入数字,显示归零*/
        show=e;
        x=e;
        yn=false;
    }
    function decimals(){                /*小数点相连*/
        if(x.lastIndexOf(".")!==1){
        x=x+".";
        show=show+".";
        }
    }
    function bback(){                   /*后退*/
        show=show.substring(0,show.length-1);
        x=x.substring(0,x.length-1);
    }
    function ql(){                      /*所有归零*/
        x="";
        a="";
        show="";
    }                                   /*删除右操作数*/
    function del(){
        show=show.substring(0,show.length-x.length);
        x="";
    }
    function sum(){                     /*求和*/
        if(a!=""){
            show=results();
            x=Number(a)+Number(x);
            show=x;
            a="";
            yn=true;
        }
        else{
            yn=false;
            a=x;
            x="";
            fh="+";
            show=show+"+";
        }
    }
    function subtraction(){                     /*求减*/
        if(a!=""){
            show=results();
            show=x;
            a="";
            yn=true;
        }
        else{
            yn=false;
            a=x;
            x="";
            fh="-";
            show=show+"-";
        }
    }
    function multiplication(){                      /*乘法*/
        if(a!=""&&x!=""){
            show=results();
            a="";
            yn=true;
        }
        else{
            yn=false;
            a=x;
            x="";
            fh="*";
            show=show+"*";
        }
    }
    function division(){                        /*除法*/
        if(a!=""){
            if(x==0) show="除数不能为0";
            else{
                show=results();
                show=x;
                a="";
                yn=true;
            }
        }
        else{
            yn=false;
            a=x;
            x="";
            fh="÷";
            show=show+"÷";
        }
    }
    function radical(){                     /*根号*/
        if(a!="") show=results();
        show=Math.sqrt(show);
        x=Math.sqrt(x);
    }
    function reciprocal(){                  /*倒数*/
        if(a!=""){
            show=results();
            show=1/x;
            x=1/x;
        }
        else{
            if(x==0) show="除数不能为0";
            else{
            x=1/x;
            show=x;
            yn=true;
            }
        }
    }
    function results(){                 /*输出结果*/
        if(fh=="+") x=Number(a)+Number(x);
        if(fh=="-") x=Number(a)-Number(x);
        if(fh=="*") x=Number(a)*Number(x);
        if(fh=="÷"){
            if(x==0){
                x="除数不能为0";
            }
            else
                x=Number(a)/Number(x);
        } 
        yn=true;
        a="";
        return x;
    }
    function plusMinus(){               /*正负数转换*/
        if(a!="") show=results();
        show=show*-1;
        x=x*-1;
    }

    style.css:

    body{
        text-align:center;
    }
    #count{
        margin:10px auto;
        text-align:center;
        font:12px "微软雅黑";
        225px;
    }
    #count textarea{
        margin:0 auto;
        210px;
        height:50px;
        display:block;
        margin-bottom:5px;
    }
    #count input{
        40px;
        height:25px;
        cursor:pointer;
    }
    #count input.result{
        float:right;
        height:50px;
        margin-right:5px;
    }

    这是我做的第一个javascript dom网页,水平低低、冗余多多,望批评指正。

    在线地址:http://runjs.cn/code/mkvphtez

  • 相关阅读:
    API入门系列之三 那迷惑人的Windows字符和字符指针类型 转载
    laravel中关联模型查询选择性的字段
    【实习】微软PM实习生面经
    【C++学习】String类的基本用法
    sql server cast 和 convert函数使用
    JS,Jquery获取,dropdownlist,checkbox 下拉列表框的值
    Buffer
    SQL Server 2012新增的内置函数尝试
    SQL Server2012新特性WITH RESULT SETS
    ros(8)自定义service数据
  • 原文地址:https://www.cnblogs.com/xjchenhao/p/4014167.html
Copyright © 2011-2022 走看看