집 >웹 프론트엔드 >JS 튜토리얼 >계산기 작업을 구현하는 간단한 js 코드

계산기 작업을 구현하는 간단한 js 코드

高洛峰원래의: 2017-02-04 14:02:16907검색

<html>
<head>
<title>JS版计算器</title>
<link rel="stylesheet" type="text/css" href="">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--js代码可以放置在任意位置，按照先后顺序依次执行 一般放在head标签之间-->
<script type="text/javascript">
    /* 定义一个Calculator类*/
    function Calculator(){
        
        this.jisuan=function(num1,num2,oper){
            var res=0;
            switch(oper){
                case "+":
                    res=num1+num2;
                    break;
                case "-":
                    res=num1-num2;
                    break;
                case "*":
                    res=num1*num2;
                    break;
                case "/":
                    res=num1/num2;
                    break;
            }
            return res;
        }
    }
    //创建对象
    var calculator=new Calculator();
    /*定义全局变量*/
    var val=0; //放置输入的值
    var xval=0;//保存转换Number类型的值
    var temp=0; //保存第一次输入的值    
    var oper="";//保存输入的操作符
    /*获取输入数字*/
    function inputEvent(e){
    
        val=e.value
        var xsval=document.getElementById("inp1");        
        xsval.value+=val; //连续输入数字(String类型)
        //转换Number类型
        xval=parseFloat(xsval.value);
        
    }
    /*获取第一行的数据*/
    function inputPCB(e){
        //window.alert(e.value);
        var xsval=document.getElementById("inp1");
        if(e.value=="Clear"){
            xsval.value="";
        }else if(e.value=="Back"){
            /*这个功能还没有实现，有兴趣的朋友可以自己做一做*/
        }else if(e.value=="POWER"){
            //计算平方
            xsval.value=Math.pow(xsval.value,2);            
        }
    }
    /*输入操作符*/
    function inputOper(e){
        oper=e.value;
        //window.alert(typeof oper);
        //oper=oper.substr(0);
        if (e.value=="+"){
            var xsval=document.getElementById("inp1");
            //保存上次计算结果，并对字符串进行转换Number类型
            temp=parseFloat(xsval.value);
            //第一次输入的值设置为空
            xsval.value="";                        
        }else if(e.value=="-"){
            var xsval=document.getElementById("inp1");
            temp=parseFloat(xsval.value);
            xsval.value="";
        }else if(e.value=="*"){
            var xsval=document.getElementById("inp1");
            temp=parseFloat(xsval.value);
            xsval.value="";
        }else if(e.value=="/"){
            var xsval=document.getElementById("inp1");
            temp=parseFloat(xsval.value);
            xsval.value="";
        }
    }
    /*计算结果*/
    function inputEquel(e){
        var xsval=document.getElementById("inp1");        
        if(e.value=="="){
            //window.alert(xval);
            //调用对象方法
            xsval.value=calculator.jisuan(temp,xval,oper);
        }
    }
</script>
<!--css 样式-->
<style>
    input{
        width:60px;
    }
    #inp1{
        width:280px;
        text-align:right;
    }
</style>
</head>
<body>
    <table border="1">
        <!--显示结果行-->
        <tr><td colspan="4"><input id="inp1" type="text" value="" name="xianshi"/></td></tr>
        
        <!--第一行-->
        <tr><td><input type="button" value="POWER" onclick="inputPCB(this)"/></td><td><input type="button" value="Clear" onclick="inputPCB(this)"/></td><td><input type="button" value="Back"onclick="inputPCB(this)"/></td><td></td></tr>
        <!--第二行-->
        <tr><td><input type="button" value="1" onclick="inputEvent(this)"/></td><td><input type="button" value="2" onclick="inputEvent(this)"/></td><td><input type="button"value="3" onclick="inputEvent(this)"/></td><td><input type="button" value="4" onclick="inputEvent(this)"/></td></tr>
        <!--第三行-->
        <tr><td><input type="button" value="5" onclick="inputEvent(this)"/></td><td><input type="button" value="6" onclick="inputEvent(this)"/></td><td><input type="button"value="7" onclick="inputEvent(this)"/></td><td><input type="button" value="8" onclick="inputEvent(this)"/></td></tr>    
        <!--第四行-->
        <tr><td><input type="button" value="9" onclick="inputEvent(this)"/></td><td><input type="button" value="0" onclick="inputEvent(this)"/></td><td><input type="button"value="." onclick="inputEvent(this)"/></td><td><input type="button" value="=" onclick="inputEquel(this)"/></td></tr>
        <!--第五行-->
        <tr><td><input type="button" value="+" onclick="inputOper(this)"/></td><td><input type="button" value="-" onclick="inputOper(this)"/></td><td><input type="button"value="*" onclick="inputOper(this)"/></td><td><input type="button" value="/" onclick="inputOper(this)"/></td></tr>    
    
    </table>
</body>
</html>

계산기 연산을 구현하기 위한 간단한 js 코드와 관련된 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!

성명：

이전 기사：자바스크립트로 작성된 간단한 계산기다음 기사：자바스크립트로 작성된 간단한 계산기

계산기 작업을 구현하는 간단한 js 코드

관련 기사