jQueryで作る簡易電卓

jQueryで作る簡易電卓

こんにちは稲垣です。

いつものようにjQueryで簡単なミニゲームを作成していたのですが、行き詰まってしまったので今回はただの電卓を作成してみました。

デモ

完成イメージはこちらになります。特に特徴のない簡易的な電卓です。

html、CSS

html

数字が表示される液晶部分と、数字や記号のボタン部分を記述します。

css

電卓っぽい見た目になるようにボタンや液晶部分のCSSを調整します。

動きの実装

それでは動きの部分になります。

まずは必要になる変数を宣言します。

液晶への表示とクリアーの関数

用意している変数を液晶部分へ表示させる関数と、全ての変数をリセットする関数を用意します。

ボタン部分の動き

次は並んだボタンをクリックした時に必要になる関数を作成していきます。

小数点は一回しか打てないようにするため、tenflgがfalseの時のみ使えるよう設定しました。

keisan1とkeisan2に保存されている文字は文字列として変数に格納されているので、「=」ボタンを押した際にちゃんと数字に変換してから計算の処理を行うようにしてください。

まとめ

以上で完成になりますので、最後にコードをまとめて載せます。

ボタンを押した時の処理はほぼ同じようなものになるので、もう少しまとめてすっきりしたコードを書けそうだなと思いました。

同じカテゴリー()の記事