JS 를 사용 하여 간이 계산기 실현

5268 단어 js계산기
JS 를 사용 하여 간이 계산 기 를 완성 하 였 으 니 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 아래 와 같 습 니 다.
요구:입력 한 값 은 숫자 일 뿐 정규 표현 식 을 사용 합 니 다.
onchange():값 변경 시 이벤트 실행
onblur():마우스 이동 시 이벤트 실행

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>   </title>
</head>
<body>
    <div style="text-align: center;">
        <input type="text" id="1" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " >
    <select name="select" id="select">
        <option value="null">   </option>
        <option value="0">+</option>
        <option value="1">-</option>
        <option value="2">*</option>
        <option value="3">/</option>
    </select>
    <input type="text" id="2" onkeyup="this.value=this.value.replace(/[^\d]/g,'') ">
    =
    <input type="text" id="3" onkeyup="this.value=this.value.replace(/[^\d]/g,'') "><br><br>
    </div>
    <div style="text-align: center;">
        <input type="button"  id="button"value="  ">
    </div>
    <script>
        
    function accAdd(arg1,arg2){ 
        var r1,r2,m; 
        try{
            r1=arg1.toString().split(".")[1].length
        }catch(e){
            r1=0
        } 
        try{
            r2=arg2.toString().split(".")[1].length
        }catch(e){
            r2=0
        } 
        m=Math.pow(10,Math.max(r1,r2)) 
        return (arg1*m+arg2*m)/m 
        } 
        Number.prototype.add = function (arg){ 
        return accAdd(arg,this); 
        }


    function Subtr(arg1,arg2){
        var r1,r2,m,n;
 
        try{
            r1=arg1.toString().split(".")[1].length
        }catch(e){
            r1=0
        }
 
        try{
            r2=arg2.toString().split(".")[1].length
        }catch(e){
            r2=0
        }
        m=Math.pow(10,Math.max(r1,r2));
 
     // last modify by deeka
     //         
        n=(r1>=r2)?r1:r2;
        return ((arg1*m-arg2*m)/m).toFixed(n);
    }
    function accMul(arg1,arg2)  //  
    { 
        var m=0,s1=arg1.toString(),s2=arg2.toString(); 
        try{
            m+=s1.split(".")[1].length
        }catch(e){} 
        try{
            m+=s2.split(".")[1].length
        }catch(e){} 
        return Number(s1.replace(".",""))*Number(s2.replace(".","")) / Math.pow(10,m) 
        } 
 
    // Number      mul  ,        。 
    Number.prototype.mul = function (arg){ 
    return accMul(arg, this); 
    } 

    function accDiv(arg1,arg2){ 
    var t1=0,t2=0,r1,r2; 
    try{
        t1=arg1.toString().split(".")[1].length
    }catch(e){} 
    try{
        t2=arg2.toString().split(".")[1].length
    }catch(e){} 
     with(Math){ 
        r1=Number(arg1.toString().replace(".","")) 
        r2=Number(arg2.toString().replace(".","")) 
        return (r1/r2)*pow(10,t2-t1); 
        } 
    } 
        Number.prototype.div = function (arg){ 
        return accDiv(this, arg); 
    }


        document.getElementById('button').onclick=function(){
            var num1 =document.getElementById('1').value;
            var num2 =document.getElementById('2').value;
            var num3;
            var op =document.getElementById('select').value;
            switch(op){
                case '0':
                    num3= accAdd(num1,num2);
                    break;
                case '1':
                    num3= Subtr(num1,num2) ;
                    break;
                case '2':
                    num3=accMul(num1,num2) ;
                    break;
                case '3':
                    num3=accDiv(num1,num2) ;
                    break;
            }
            document.getElementById('3').value=num3;
        }
       
    </script>

</body>
</html>
효과 그림:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기