ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptで電卓機能を実装する方法

JavaScriptで電卓機能を実装する方法

php中世界最好的语言
php中世界最好的语言オリジナル
2018-05-23 11:34:4714016ブラウズ


今回はJavaScriptで電卓機能を実装する方法と、JavaScriptで電卓機能を実装する際の注意事項を紹介します。実際の事例を見てみましょう。

このコンピューターは主に 2 次元配列を介して配列に格納し、次に関数によって表示される効果を制御します。最初に、2 つの列は、colspan 関数によってマージされます。主な実装コードとレンダリングは次のとおりです。

JavaScriptで電卓機能を実装する方法


var btns=[
            [
                {text:"AC",id:"btn_C",value:"c",col:1},
                {text:"Del",id:"btn_JJ",value:"✘",col:1},
                {text:"%",id:"btn_BF",value:"%",col:1},
                {text:"÷",id:"btn_CY",value:"/",col:1,cls:"yellow"},
            ],
            [
                {text:"7",id:"btn_C",value:"7",col:1},
                {text:"8",id:"btn_JJ",value:"8",col:1},
                {text:"9",id:"btn_BF",value:"9",col:1},
                {text:"×",id:"btn_CY",value:"*",col:1,cls:"yellow"},
            ],
            [
                {text:"4",id:"btn_C",value:"4",col:1},
                {text:"5",id:"btn_JJ",value:"5",col:1},
                {text:"6",id:"btn_BF",value:"6",col:1},
                {text:"-",id:"btn_CY",value:"-",col:1,cls:"yellow"},
            ],
            [
                {text:"1",id:"btn_C",value:"1",col:1},
                {text:"2",id:"btn_JJ",value:"2",col:1},
                {text:"3",id:"btn_BF",value:"3",col:1},
                {text:"+",id:"btn_CY",value:"+",col:1,cls:"yellow"},
            ],
            [
                {text:"0",id:"btn_C",value:"0",col:2},
                {text:".",id:"btn_JJ",value:".",col:1},
                {text:"=",id:"btn_BF",value:"=",col:1,cls:"gray"},
            ],
            ];
            function creatUI(config){
                var html=[];                
                for(var i=0,len=config.length;i<len;i++){
                    html.push("<tr>");
                    var arry=config[i];                    
                    for(var j=0;j<arry.length;j++)
                    {
                        var obj=arry[j];
                        html.push("<td colspan="+obj.col+" class=&#39;"+obj.cls+"&#39; v=&#39;"+obj.value+"&#39;>"+obj.text+"</td>");
                    }
                    html.push("</tr>");
                }
            var b = document.getElementById("tbody");
                b.innerHTML=html.join("");
            }
            creatUI(btns);

電卓実装全体の主なコードは、電卓の各キーにクリック イベントを追加し、配列に保存して、いくつかの関数の判定 現在入力されている値が計算要件を満たしているかどうか、満たしている場合は、配列の値を eval() 関数に渡し、この関数を通じて結果を計算し、その結果を対応する p に渡して表示し、表示しますそれが実装されている限り、コードは次のとおりです:

function register(){

                var container=document.getElementById("content");
                var tds=document.getElementsByTagName("td");
                var show=document.getElementById("show");                
                for(var i=0,len=tds.length;i<len;i++)
                {
                    var block=tds[i];                    
                    block.onclick=function(){

                        var v=this.getAttribute("v");                        
                        //实现清零功能
                        if(v=="c"){
                            ac();                            
                            show.innerText="0";                            
                            return ;
                        }                        
                        inputs.push(v);                        
                        //实现删除功能
                        if(v=="✘"){                            
                        if(inputs.length==0||inputs.length==1)
                            {                                
                            inputs.length=0;                                
                            show.innerText=&#39;0&#39;;
                            }                           
                             else{                                
                             inputs.length=inputs.length-2;
                            }
                        }                        
                        //检测是不是相邻两个是不是操作符
                        checkNeiber();                        
                        //调用回显的函数
                        echoEcho(show);                        
                        //检测如果已经有两个运算符的话,直接进行计算
                        if(isStartCompute()){
                            var result=eval(inputs.join(""));                            
                            inputs.length=0;
                            inputs[0]=result;                            
                            show.innerText=result;
                            inputs[1]=temp;                            
                            //show.innerText=result;
                        }                        
                        //如果输入等号,直接让其输出结果
                        if(v==&#39;=&#39;)
                        {                            
                        if(inputs.length==1)
                            {                                
                            inputs.length=0;                                
                            show.innerText=0;   
                            }                            
                            else{                                
                            inputs.length=inputs.length-1;
                                var result=eval(inputs.join(""));                                
                                inputs.length=0;
                                inputs[0]=result;                                
                                show.innerText=result;                                
                                inputs.length=0;
                            }
                        }

                    }
                }
            }

関数には多くの落とし穴があるので注意してください。この電卓を使用する効果:

JavaScriptで電卓機能を実装する方法

JavaScriptで電卓機能を実装する方法

電卓実装全体のコードは次のとおりです:

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>简单的计算器</title>
        <style type="text/css">
            *{                
            margin: 0px;                
            padding: 0px;            
            }
            .mytable{                
            border: 1px solid black;                
            border-spacing: 0px;                
            margin: 0 auto; 

            }
            .mytable td{                
            border: 1px solid black;                
            padding: 20px;                
            text-align: center;                
            vertical-align: middle;                
            cursor:pointer !important;            
            }
            td:hover{                
            background-color: lightsteelblue;            
            }
            #content{                
            font-size: 20px;                
            margin: 0 auto; 
                width:262px;                
                background-color:white;            
                }
            .screen{                
            height: 80px;                
            padding-right: 8px;                
            background-color:rgb(112,131,147);                
            opacity: 0.8;                
            text-align: right;                
            line-height:80px;                
            font-size: 40px;                
            overflow: hidden;            
            }
            .yellow{                
            background-color:rgb(255,152,62);            
            }
            .gray{                
            background-color: #808080;           
             }
        </style>
    </head>
    <body>
        <p id="content">
            <p class="screen" id="show">0</p>
            <p class="btns">
                <table class="mytable">
                    <tbody id="tbody">

                    </tbody>
                </table>
            </p>
        </p>
        <script type="text/javascript">
            var btns=[
            [
                {text:"AC",id:"btn_C",value:"c",col:1},
                {text:"Del",id:"btn_JJ",value:"✘",col:1},
                {text:"%",id:"btn_BF",value:"%",col:1},
                {text:"÷",id:"btn_CY",value:"/",col:1,cls:"yellow"},
            ],
            [
                {text:"7",id:"btn_C",value:"7",col:1},
                {text:"8",id:"btn_JJ",value:"8",col:1},
                {text:"9",id:"btn_BF",value:"9",col:1},
                {text:"×",id:"btn_CY",value:"*",col:1,cls:"yellow"},
            ],
            [
                {text:"4",id:"btn_C",value:"4",col:1},
                {text:"5",id:"btn_JJ",value:"5",col:1},
                {text:"6",id:"btn_BF",value:"6",col:1},
                {text:"-",id:"btn_CY",value:"-",col:1,cls:"yellow"},
            ],
            [
                {text:"1",id:"btn_C",value:"1",col:1},
                {text:"2",id:"btn_JJ",value:"2",col:1},
                {text:"3",id:"btn_BF",value:"3",col:1},
                {text:"+",id:"btn_CY",value:"+",col:1,cls:"yellow"},
            ],
            [
                {text:"0",id:"btn_C",value:"0",col:2},
                {text:".",id:"btn_JJ",value:".",col:1},
                {text:"=",id:"btn_BF",value:"=",col:1,cls:"gray"},
            ],
            ];            
            function creatUI(config){
                var html=[];                
                for(var i=0,len=config.length;i<len;i++){
                    html.push("<tr>");                    
                    var arry=config[i];                    
                    for(var j=0;j<arry.length;j++)
                    {                        
                    var obj=arry[j];
                        html.push("<td colspan="+obj.col+" class=&#39;"+obj.cls+"&#39; v=&#39;"+obj.value+"&#39;>"+obj.text+"</td>");
                    }
                    html.push("</tr>");
                }            var b = document.getElementById("tbody");
                b.innerHTML=html.join("");
            }
            creatUI(btns);            //注册点击事件
            var inputs=[];//定义用户输入按钮的数组

            function register(){

                var container=document.getElementById("content");                
                var tds=document.getElementsByTagName("td");                
                var show=document.getElementById("show");                
                for(var i=0,len=tds.length;i<len;i++)
                {                    var block=tds[i];
                    block.onclick=function(){

                        var v=this.getAttribute("v");                        
                        //实现清零功能
                        if(v=="c"){
                            ac();
                            show.innerText="0";                            
                            return ;
                        }
                        inputs.push(v);                        
                        //实现删除功能
                        if(v=="✘"){                            
                        if(inputs.length==0||inputs.length==1)
                            {
                                inputs.length=0;
                                show.innerText=&#39;0&#39;;
                            }                            
                            else{
                                inputs.length=inputs.length-2;
                            }
                        }                        
                        //检测是不是相邻两个是不是操作符
                        checkNeiber();                        
                        //调用回显的函数
                        echoEcho(show);                        
                        //检测如果已经有两个运算符的话,直接进行计算
                        if(isStartCompute()){                            
                        var result=eval(inputs.join(""));
                            inputs.length=0;
                            inputs[0]=result;
                            show.innerText=result;
                            inputs[1]=temp;                            
                            //show.innerText=result;
                        }                        
                        //如果输入等号,直接让其输出结果
                        if(v==&#39;=&#39;)
                        {                            
                        if(inputs.length==1)
                            {
                                inputs.length=0;
                                show.innerText=0;   
                            }                            else{
                                inputs.length=inputs.length-1;                                
                                var result=eval(inputs.join(""));
                                inputs.length=0;
                                inputs[0]=result;
                                show.innerText=result;
                                inputs.length=0;
                            }
                        }

                    }
                }
            }            //检测到两个操作符的时候,就进行计算
            function isStartCompute(){
                var ctn=0;                
                for(var i=0;i<inputs.length;i++){                    
                var ip=inputs[i];                    
                if(ip=="+"||ip=="-"||ip=="*"||ip=="/"||ip=="%")
                    {
                        ctn++;
                    }                    if(ctn>=2)
                    {
                        temp=inputs[i];
                        inputs.length=inputs.length-1;                        return true;
                    }                    if(ip=="=" && checkNumber(inputs[i+1])){                        
                    var num=inputs[i+1];
                        inputs.length=0;
                        inputs[0]=num;                        
                        return true;
                    }
                }
            }            //判断如果是两个相邻的操作符的情况
            function checkNeiber(){
                for(var i=0;i<inputs.length;i++)
                {                    
                if((inputs[i]=="+"||inputs[i]=="-"||inputs[i]=="*"||inputs[i]=="/"||inputs[i]=="%"||inputs[i]=="=")&&(inputs[i+1]=="+"||inputs[i+1]=="-"||inputs[i+1]=="*"||inputs[i+1]=="/"||inputs[i+1]=="%"||inputs[i+1]=="="))
                    {                        
                    var lastKey=inputs[i+1];
                        inputs.length=inputs.length-2;
                        inputs.push(lastKey);                        
                        return ;
                    }
                }
            }   
            function checkNumber(word){
                word=parseInt(word);                
                if(word>0 && word<9){                    
                return true;
                }
            }            //清零功能
            function ac(){
                inputs.length=0;
                echoEcho();
            }            //增加回显功能
            function echoEcho(showl){
                if(!showl){
                    showl=document.getElementById("show");
                }                if(inputs.length==0){
                    showl.innerText="0";        
                }
                showl.innerText =inputs.join("");
            }
            window.onload = function(){
                register();
            }        </script>
    </body></html>

この記事のケースを読んだ後は、この方法を習得したと思います。情報については、PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

JSデザインパターンのコマンドパターンの詳細な説明

JavaScriptのcall、apply、bindの違いは何ですか

以上がJavaScriptで電卓機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。