簡単な計算機を実装するためのコツを教えます-jsチュートリアル-php.cn

この記事では、JavaScript で簡単な電卓を実装する方法を詳しく紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

簡単な計算機を実装するためのコツを教えます

JS は簡単な計算機を実装します

ページレイアウトデザイン (HTML CSS)

前の理由によりblog html と css については詳しく説明されていますが、ここでも詳細には触れずにコードに直接進みます。 JQuery セレクターは js で使用されるため、JQuery は <script></script> タグを使用して HTML に導入されます。HTML では、電卓イベント cal() が各ボタンのクリックにバインドされ、現在のクリックオブジェクトは次のようになります。これを渡しました。
.html ファイル：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>简单计算器</title>
    <link rel="stylesheet" type="text/css" href="./style.css"> <!-- css样式 -->
   
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> <!-- 引用JQuery库 --></head><body>
    <p>
        <table>
            <tr>
                <td colspan="3"><input type="text" value="0"/></td>
            </tr>
            <tr>
                <td><button id="c11" onclick="cal(this)">+</button></td>
                <td><button id="c12" onclick="cal(this)">-</button></td>
                <td><button id="c13" onclick="cal(this)">×</button></td>
                <td><button id="c14" onclick="cal(this)">/</button></td>
            </tr>
            <tr>
                <td><button id="c21" onclick="cal(this)" value="7">7</button></td>
                <td><button id="c22" onclick="cal(this)" value="8">8</button></td>
                <td><button id="c23" onclick="cal(this)" value="9">9</button></td>
                <td rowspan="2"><button id="c24" onclick="cal(this)">C</button></td>
            </tr>
            <tr>
                <td><button id="c31" onclick="cal(this)" value="4">4</button></td>
                <td><button id="c32" onclick="cal(this)" value="5">5</button></td>
                <td><button id="c33" onclick="cal(this)" value="6">6</button></td>
            </tr>
            <tr>
                <td><button id="c41" onclick="cal(this)" value="1">1</button></td>
                <td><button id="c42" onclick="cal(this)" value="2">2</button></td>
                <td><button id="c43" onclick="cal(this)" value="3">3</button></td>
                <td rowspan="2"><button id="c44" onclick="cal(this)">=</button></td>
            </tr>
            <tr>
                <td colspan="2"><button id="c51" onclick="cal(this)" value="0">0</button></td>
                <td><button id="c53" onclick="cal(this)">.</button></td>
            </tr>
        </table>
    </p>
    <script src = "./calculator.js"></script> <!-- js脚本 --></body></html>

ログイン後にコピー

.css ファイル：

input{
    width: 200px;
    height:50px;
    margin-bottom: 10px;
    padding: 0;
    font:18px bold;}button{
    width: 50px;
    height: 40px;
    margin-bottom: 10px;
    border: 1px dashed black;
    background-color: #ffc4cc;}#c24{
    height: 93px;}#c44{
    height: 93px;}#c51{
    width: 122px;}#c44,#c24,#c14{
    margin-left:10px;}

ログイン後にコピー

図のような静的ページ：
簡単な計算機を実装するためのコツを教えます

計算部分を実装します（ JS)

1. 機能: 数値の簡単な加算、減算、乗除計算を実現し、画面をクリアする機能
2. 操作: 例: 123×29; 1 をクリックし、 2、3、、×記号をクリックし、2、9を順にクリックし、最後に=をクリックすると、結果3567
を計算できます。例を図に示します: 簡単な計算機を実装するためのコツを教えます

3. 欠点:

負の数値計算は実行できず、NaN エラーが発生します;
連続計算は実行できず、一度に 2 つの数値間の演算しか実行できません。 ; 以前の結果で計算を続けたい場合は、演算記号と次の数字を直接押すことができます; 新しい計算を開始するには、最初に画面をクリアする必要があります。

4. アイデア表示:

テキストボックス表示: クリックされたボタンに応じてテキストボックスに表示される内容がリアルタイムに変化するため, 変更を簡単にするために、ここでは JQuery セレクターを使用してテキストボックスを選択し、それをグローバル変数 input に割り当てます。その後、入力の val() メソッドに従ってその値を変更するだけです。

コードは次のとおりです:

var input = $("input");

ログイン後にコピー

ボタン ID の取得: 後で、さまざまなボタンに基づいてさまざまな操作を実行する必要があるため、 cal() 関数の最初のステップは、後の判断に使用されるボタンの ID を取得することです。

コードは次のとおりです:

let btn = e.id;

ログイン後にコピー

数値入力: ボタンの ID に基づいて、数値か小数点かを判断します。その場合は、数値入力操作を行ってください。まず、現在のテキストボックスの値が 0 かどうかを確認します。0 の場合は、入力値を現在の入力で上書きします。0 でない場合は、現在の入力を入力値の後ろに接続します。

コードは次のとおりです:

//若input的值为0
input.val(btn_value);//若input的值非0
input.val(input.val()+btn_value);

ログイン後にコピー

記号入力: ボタンの ID に基づいて算術記号かどうかを判断します。記号入力操作を行ってください。連続操作を考慮しない場合は、まず現在のテキストボックスの値に「入力値の後にシンボリックリンクが続く」が含まれているかどうかを確認します。

コードは次のとおりです:

//若input的值含有+、×、/
 alert("连续运算功能未上线!")//若input的值不含有+、×、/
input.val(input.val()+当前运算符号);

ログイン後にコピー

数値計算: ボタンの ID に基づいて等号かどうかを判断します。したがって、数値計算操作を実行します。選択判定は、indexOf()メソッドで入力値にどの句読点、×、/が含まれているかを判定し、記号の位置を区切ってsubstring()メソッドで値をインターセプトします。シンボルの前で強制的に Float 型に変換してから num1 に代入し、シンボルの後ろの値をインターセプトして強制的に Float 型に変換してから num2 に代入して、対応する計算を実行します。 (除算中は分母を 0 にすることはできないことに注意してください。)

コードは次のとおりです。

if(input_value.indexOf("+")!==-1){
        pos = input_value.indexOf("+");
        num1 = parseFloat(input_value.substring(0,pos));
        num2 = parseFloat(input_value.substring(pos+1,input_value.length));
        input.val(num1+num2);
    }
    else  if(input_value.indexOf("-")!==-1){
        pos = input_value.indexOf("-");
        num1 = parseFloat(input_value.substring(0,pos));
        num2 = parseFloat(input_value.substring(pos+1,input_value.length));
        input.val(num1-num2);
    }
    else  if(input_value.indexOf("×")!==-1){
        pos = input_value.indexOf("×");
        num1 = parseFloat(input_value.substring(0,pos));
        num2 = parseFloat(input_value.substring(pos+1,input_value.length));
        input.val(num1*num2);
    }
    else  if(input_value.indexOf("/")!==-1){
        pos = input_value.indexOf("/");
        num1 = parseFloat(input_value.substring(0,pos));
        num2 = parseFloat(input_value.substring(pos+1,input_value.length));
        if(num2-0 === 0){
            alert("分母不能为0！");
        }
        else{
            input.val(num1/num2);
        }
    }

ログイン後にコピー

Clear screen:ボタンの ID に応じてシンボル C が表示され、その場合は画面をクリアします。

コードは次のとおりです:

input.val(0);

ログイン後にコピー

5. JavaScript ファイルは次のとおりです:

"use strict"var input = $("input");function cal(e){
    let btn = e.id;
    //清零
    if( btn === "c24"){
        input.val(0);
    }
    //数值输入
    else if(btn === "c51"||btn === "c41"||btn === "c42"||btn === "c43"
        ||btn === "c31"||btn === "c32"||btn === "c33"
        ||btn === "c21"||btn === "c22"||btn === "c23"){
        let btn_value = document.getElementById(btn).getAttribute("value");
        if( input.val() === "0" ){
            input.val(btn_value);
        }
        else{
            input.val(input.val()+btn_value);
        }
    }
    else if(btn === "c11"){
        let input_value = input.val();
        if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1
            &&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){
            input.val(input.val()+"+");
        }
        else{
            alert("连续运算功能未上线!")
        }
    }
    else if(btn === "c12"){
        let input_value = input.val();
        if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1
            &&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){
            input.val(input.val()+"-");
        }
        else{
            alert("连续运算功能未上线!")
        }
    }
    else if(btn === "c13"){
        let input_value = input.val();
        if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1
            &&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){
            input.val(input.val()+"×");
        }
        else{
            alert("连续运算功能未上线!")
        }
    }
    else if(btn === "c14"){
        let input_value = input.val();
        if(input_value.indexOf("+") === -1&&input_value.indexOf("-") === -1
            &&input_value.indexOf("×") === -1&&input_value.indexOf("/") === -1){
            input.val(input.val()+"/");
        }
        else{
            alert("连续运算功能未上线!")
        }
    }
    else if(btn === "c53"){
        input.val(input.val()+".");
    }
    else if(btn === "c44"){
        let pos,num1,num2;
        let input_value = input.val();
        if(input_value.indexOf("+")!==-1){
            pos = input_value.indexOf("+");
            num1 = parseFloat(input_value.substring(0,pos));
            num2 = parseFloat(input_value.substring(pos+1,input_value.length));
            input.val(num1+num2);
        }
        else  if(input_value.indexOf("-")!==-1){
            pos = input_value.indexOf("-");
            num1 = parseFloat(input_value.substring(0,pos));
            num2 = parseFloat(input_value.substring(pos+1,input_value.length));
            input.val(num1-num2);
        }
        else  if(input_value.indexOf("×")!==-1){
            pos = input_value.indexOf("×");
            num1 = parseFloat(input_value.substring(0,pos));
            num2 = parseFloat(input_value.substring(pos+1,input_value.length));
            input.val(num1*num2);
        }
        else  if(input_value.indexOf("/")!==-1){
            pos = input_value.indexOf("/");
            num1 = parseFloat(input_value.substring(0,pos));
            num2 = parseFloat(input_value.substring(pos+1,input_value.length));
            if(num2-0 === 0){
                alert("分母不能为0！");
            }
            else{
                input.val(num1/num2);
            }

        }
    }}

ログイン後にコピー

[推奨学習: JavaScript 上級チュートリアル]

以上が簡単な計算機を実装するためのコツを教えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。