入社してすぐにhtmlで電卓を作ってみて！と待機中の課題を出されてやってみました。
開発経験ゼロの人間が試行錯誤でやってみたので、無理くり作ってる感じなので
ここはこうした方が良いよーとかあったらコメントしてください。
＝を押さないで連続計算している時に答えが表示できていないとかまだまだ課題があります。。。
見た目はiPhoneの見た目に。先輩にレビューいただいたら、経験から考えたらよく出来てる方だよって言ってもらえました。
同じように課題を出されて困ってる新人の方はこんな感じでやりました！っていう雰囲気を出したかったらちょうど良いかも笑
完璧に出来てるソースは他にも転がってるので。。。
CSS,HTML,JSを一緒に書いてあるのでこのままコピーしてメモ帳に貼ってブラウザに表示させればなんとなく動きます。
ただ動作や課題とかに保証は致しませんのであしからず。。。
使用に許可とかはいらないですが、コメントに何か少しでも残してくれたら嬉しいです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> <!-- .calculate { width: 300px; height: 400px; background-color: #d0d0d0; border: 1px solid; margin-left: auto; margin-right: auto; margin-top: 100px; } button { display: block; width: 100%; height: 100%; font-size: 20px; background-color: #d0d0d0; margin: 0 0 0 0; padding: 0 0 0 0; } #subDisplay { display: block; width: 98%; height: 100%; text-align: right; font-size: 13px; background-color: #000000; color: #ffffff; padding-bottom: -10; } #display { display: block; width: 98%; height: 90%; text-align: right; font-size: 30px; background-color: #000000; color: #ffffff; } td { width: 80px; padding: 0 0 0 0; margin: 0 0 0 0; } .other { background-color: #c0c0c0; } .operator { background-color: #ffa400; } --> </style> <title>Calculate</title> </head> <body> <script type="text/javascript"> <!-- var input = ''; //入力された値（文字列結合） var operator = ''; //演算子 var isEqualPush = false; //＝を押した後の処理かの判定。押したらtrue var inputArray = []; //数値と演算子を交互に格納する var formula = ''; //途中式 var tax = 1.08; //消費税 ///<summary> ///数字キーを押したときの処理を行います ///</summary> ///<param name="tmpNum">数字キーの値</param> function push (tmpNum) { //＝を押した直後に数字キーを押した場合 if (isEqualPush == true) { reset (); } //演算子が入力されているとき if (operator != '') { //数値の前にマイナスをつける if (input != '-') { disp(''); //表示をクリア } } //.を二つ入れない為の処理 if (tmpNum != '.') { input += tmpNum; } else if (tmpNum == '.' && input.indexOf('.') == -1 && inputArray.indexOf('.') == -1) { input += tmpNum; } disp(input); } ///<summary> ///演算子キーを押したときの処理を行います（イコールも含む） ///</summary> ///<param name="ope">演算子キーの値</param> function calc(ope) { //イコール連打時の判定 if (isEqualPush != true || ope != '=') { var len = inputArray.length; //四則演算子を押したときの処理 if (ope != '=') { if (input != '') { inputArray.push(input); } var len = inputArray.length; if (inputArray[len - 1] != "+" && inputArray[len - 1] != "-" && inputArray[len - 1] != "/" && inputArray[len - 1] != "*") { inputArray.push(ope); } else { //末尾の演算子を上書きして演算子を一つにする inputArray.pop(ope); inputArray.push(ope); } operator = ope; isEqualPush = false; input = ''; } else { //イコール押した時の処理 inputArray.push(input); var tmpResult = ''; tmpResult = arrayToObject(inputArray); formula = tmpResult; disp(eval(tmpResult)); isEqualPush = true; input = ''; } } else { //イコールを連打した時の処理 var len = inputArray.length; //末尾の演算子と数値を配列に追加する inputArray.push(inputArray[len - 2]); inputArray.push(inputArray[len - 1]); var tmpResult = ''; tmpResult = arrayToObject(inputArray); formula = tmpResult; disp(eval(formula)); } } ///<summary> ///+/=キーを押したときの処理を行います ///</summary> function plusminus() { if (input != '') { input = -input; disp(input); } else { input = '-'; disp(input); } isEqualPush = false; } ///<summary> ///ACキーを押したときの処理を行います ///</summary> function reset() { inputArray = []; result = 0; input = ''; isEqualPush = false; formula = ''; operator = ''; disp(''); } ///<summary> ///電卓への表示処理を行います ///</summary> ///<param name="view">表示する値</param> function disp(view) { document.getElementById('display').value = view; } ///<summary> ///演算の為の配列からオブジェクトにする処理を行います ///</summary> ///<param name="arr">処理したい配列</param> function arrayToObject(arr) { var tmpArray = ''; for (var c = 0; c < arr.length; c++) { tmpArray += arr[c]; } return tmpArray; } ///<summary> ///Taxキーを押したときの処理を行います ///</summary> function addTax() { if (isEqualPush == false) { if (isFinite(input)) { input = parseFloat(input) * tax; disp(input); } } else { var tmpValue = eval(formula); formula = Math.floor(tmpValue * tax); console.log(formula); disp(formula); } } function subDisp(view, dummy) { if (view == '' || arguments.length == 2) { document.getElementById('subDisplay').value = view; } document.getElementById('subDisplay').value += view; } //--> </script> <table class="calculate"> </tr> <tr> <td colspan="4"> <input type="text" id="display" readonly/> </td> </tr> <tr> <td> <button class="other" onclick="reset();">AC</button> </td> <td> <button class="other" onclick="plusminus();">+/-</button> </td> <td> <button class="other" onclick="addTax();">Tax</button> </td> <td> <button class="operator" onclick="calc('/');">/</button> </td> </tr> <tr> <td> <button onclick="push(7);">7</button> </td> <td> <button onclick="push(8);">8</button> </td> <td> <button onclick="push(9);">9</button> </td> <td> <button class="operator" onclick="calc('*');">*</button> </td> </tr> <tr> <td> <button onclick="push(4);">4</button> </td> <td> <button onclick="push(5);">5</button> </td> <td> <button onclick="push(6);">6</button> </td> <td> <button class="operator" onclick="calc('-');">-</button> </td> </tr> <tr> <td> <button onclick="push(1);">1</button> </td> <td> <button onclick="push(2);">2</button> </td> <td> <button onclick="push(3);">3</button> </td> <td> <button class="operator" onclick="calc('+');">+</button> </td> </tr> <tr> <td colspan="2"> <button onclick="push(0);">0</button> </td> <td> <button onclick="push('.')">.</button> </td> <td> <button class="operator" onclick="calc('=');">=</button> </td> </tr> </table> </body> </html> |
コメント
こちらの計算機は、とても分かりやすくて助かっています。追加して欲しい機能としては、パーセント(％)と掛け算・割り算を×と÷にしていただければわかりやすくなると思います。
今後もこちらの計算機を使っていきたいと思います
プログラマーになるならこれくらいできるのは当たり前ですか？？
全く関係なくてすみません♂️
閲覧ありがとうございます。
スーパープログラマは別として、、、
現職のプログラマが電卓を作ろう！ってなったら誰でもできるかもしれません。
最初は誰も出来ません。自分も泣きながら研修受けました。
個人的にはプログラマーはフレームワークをいかに使いこなすかだと思ってます。
20年やってる上司が電卓やってみたら難しかったからすぐ止めたって言ってました笑
単純にeval()に投げて計算させているので、小数を計算させた時のJavaScript特有の誤差がそのまま出てしまいますね。
0.1 + 0.2 → 0.30000000000000004
0.11 – 0.1 → 0.009999999999999995
1.11 * 100 → 111.00000000000001
0.66 / 11 → 0.060000000000000005
etc.