[JS] CALCULATOR

20896 ワード
JavaScript けいさんき JavaScript calculator テキストリンク
CALCULATOR
jsを使用した計算機の作成
最初のプロジェクトを成功裏に完了しました.
1. preview


2. html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <div id="box">
        <form id="display">
            <input type="text" id="text" type="text" readonly/>
        </form>
        <div id="r1">
            <button id="operator" class="r1-1">%</button>
            <button id="C" class="r1-2">C</button>
        </div>
        <div id="r2">
            <button id="7">7</button>
            <button id="8">8</button>
            <button id="9">9</button>
            <button id="operator">+</button>
        </div>
        <div id="r3">
            <button id="4">4</button>
            <button id="5">5</button>
            <button id="6">6</button>
            <button id="operator">-</button>
        </div>
        <div id="r4">
            <button id="1">1</button>
            <button id="2">2</button>
            <button id="3">3</button>
            <button id="operator">*</button>
        </div>
        <div id="r5">
            <button id="0">0</button>
            <button id=".">.</button>
            <button id="equals">=</button>
            <button id="operator">/</button>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

3. CSS


button{
    width:50px;
    height:50px;
    padding:10px;
    margin:5px;
    font-size:20px;
}
.r1-1,.r1-2{
    width:115px;
    height:50px;
}
#text{
    margin:5px;
    width:240px;
    height:50px;
 }

HTMLとCSSの構成はできるだけ簡単です.


4. JS



ex)要求a+b=c,

item1 = a

ope = '+'

item2 = b

equals = '='

result = c



1)基本構成
function init() {
  btns.forEach(function button(btn){
    btn.addEventListener("click", function btnHandler(){
        switch(btn.id){
            case "operator":
                let ope = btn.innerText;
                operator(ope);
                break;
            case "C":
                clear();
                break;
            case "equals":
                equals();
                break;
            default:
                displayNumber(btn.id);
                break;
        }
    });
  });
}

計算機のボタンをクリックするとhtmlボタンのid値が受信され、switchで区切られます.


2)表示番号(入力受信)
function displayNumber(number){
    if(!item1 || !ope){
        display.value += number;
        item1 += number;
    } else if(item1 && ope){
        display.value += number;
        item2 += number;       
    } else display.value = "error";
}

item 1は1桁ではなく110000

演算子が表示される前に、

という文字列で入力されます.

入力bにはitem 1と演算子が必要です.

「.」もdisplayNumberで処理されます.


3)演算子(演算子)
function operator(oper){
    if(!item1) {
        display.value ="error"
    }else{
        display.value += oper;
        ope = oper;
    }
}

演算子はdisplayに入力された演算子を簡単に出力できます.

入力した演算子を空の文字列opeに置き換えました.


4)equals(計算値出力)
function equals(){
     if(ope){
       switch(ope){
        case "+":
               result = (parseFloat(item1)+parseFloat(item2));
               break;
        case "-":
               result = (parseFloat(item1)-parseFloat(item2));
               break;
        case "/":
               result = (parseFloat(item1) / parseFloat(item2));
               break;
        case "%":
               result = (parseFloat(item1)%parseFloat(item2));
               break;
        case "*":
               result = (parseFloat(item1)*parseFloat(item2));
               break;
        }
    }else display.value ="error";
    display.value = result;
    item1 = result;
    item2 = 0;
    ope ="";
}

equalsはswitch条件を演算子として受け取ったope値,

displayNumberに文字列で入力したアイテムをfloat形式に変換しresultに置き換えました.


結果値をdisplayに出力し

初期化item 2および演算子


5) clear


function clear(){
    result = 0;
    ope = "";
    item1 = 0;
    item2 = 0;
    display.value ="";
}

clearはすべての値を初期化します.


5. 完了
『p>reactを勉強するときはjsに足りない感じが多いので

jsを再学習していて、かなり面白かったです.


電卓を作っている間に、他の人があらかじめ作っている電卓をたくさん見ました.

私が望むように実現したjs計算機が見つからなかった......


できるだけ短くて簡単なコードで1つずつ

私たちはずっと努力して実施しています.


質問や物足りないところはご意見をどうぞ!!

T-test
Android:threadの終了、保留、リカバリ