電卓の作り方[JQuery]

基本的な電卓の作り方

See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.

解説

CSSは大した記述をしていないので解説は割愛します

HTML

各数字のボタンと演算子のボタンを配置

JQuery

変数

  • push_num = 押された数字を1桁ずつ配列として一時的に記憶する(例、12なら’1,2′)
  • num_1 = 計算の基準となる値
  • num_2 = 計算で変化させる値
  • cal = 使用する演算子
  • answer = .result を押した際の計算結果
  • calculation = 演算子が入力されたら true になり、num_2 へ入力可能となる

数字キーを押したときの処理

  • $(‘.switch’).on(‘click’,function(){ }) = .switch をクリックするとイベントが起動
  • push_num.push($(this).text()); = 配列push_num に クリックしたボタンに表示されている数値を追加する
  • if(calculation == tlue){ } = 変数calculation が false なら 変数num_1 に true なら変数num_2 へ 配列push_num の数値を結合( .join() )して挿入
  • $(‘.display’).text(‘num_1’) = .display に 数値を表示する

演算子キーを押したときの処理

  • $(‘.caculation’).on(‘click’,function(){ }) = .calculation をクリックするとイベントが起動
  • cal = $(this).attr(‘id’); = 変数cal に押された演算子キーの id を取得
  • calculation = true; = 変数calculation を true にする。これにより 次に入力する数値は 変数num_2 に保存される
  • push_num = []; = 配列push_num に一時的に記憶していた数値をリセット
  • $(‘.display’).text(”); = .display に表示されている数値をリセット

=キーを押したときの処理

  • $(‘.result’).on(‘click’,function(){ }); = .result をクリックするとイベントが起動
  • switch(cal){ } = 変数cal に入っている値によって処理を変更する
  • case ‘値’: 処理 break; = cal に入っている値によって break までの処理を行う。値が plus の場合のみ文字列型の結合( 例: 1+1 =11 )を防ぐため、sum_1 と sum_2 という変数に pareseInt() で 数字型に変換している

ACキーを押したときの処理

  • $(‘.reset’).on(‘click’,function(){ }); = .reset をクリックするとイベントが起動
  • 全ての変数と配列を元の状態へ戻し、.display の表示も消す

-広告-

国内WordPressテーマ シェア率 No.1

Web制作案件にも使いやすい WordPress テーマ

SWELL

シンプルで多機能、そしてカスタマイズしやすい

ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。

買い切り型で、複数サイトに使用可能、Web制作案件にも

一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。

  • 一度買えば、月額料金はなし
  • 複数サイトで使用可能
  • ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
  • ブロックエディタの豊富な追加ブロックで投稿がリッチに
  • 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
  • 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)
jquery.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。