		C	CE
7	8	9	/
4	5	6	*
1	2	3	-
.	0	=	+
M	()	(	)
sin	cos	tan	π
√	%	±	**
abs	ceil	floor	round
random	max	min	,
N	Undo	log	e
tax08	tax10
電卓

数値操作

関数電卓の数式・演算子は数学記号でなく、JavaScriptの演算子を利用
JavaScript,数値操作,算数,数学

JavaScriptで数値操作

算数

図形の公式


  view source
  JavaScript
  $(function(){

  $('input[type="number"]').numeric({allow:"."});

  $result = $('#result');
  $calc = $('#calc');
  $calc.val('');
  var history = [];
  var undoCount = 0;

  var MathFs = [
    'sin',
    'cos',
    'tan',
    'floor',
    'ceil',
    'round',
    'pow',
    'sqrt',
    'log',
    'atan2',
    'max',
    'min',
  ];
  $('#numericKeypad td').on('click', function(){
    var t = $(this).text();
    console.log(t);
    var r = $result.val()
    var v = $calc.val()
    if(!t){
      $('#numericKeypad').toggleClass('scientific');
    } else if(t==='C'){
      $calc.val('');
    } else if(t==='CE'){
      v = v.slice(0,-1);
      $calc.val(v);
    } else if (t==='=' && v){
      if(r){
        $calc.val(r)
        return;
      }
    } else if (v && !t.match(/[0-9]/) && v.match(/[^0-9\(\)]$/)){
      return;
    }else {
      $calc.val(v+t);
    }
    $calc.trigger('change');
  });
  $('#scientificKeypad td').on('click', function(){
    var t = $(this).text();
    console.log(t);
    var v = $('#calc').val()
    if(!t){
      $('#numericKeypad').toggleClass('scientific');
    } else if(t==='M'){
      var r = $result.val();
      $btn = $('<button>').text(r);
      $('#logArea').prepend($btn);
    } else if(t==='N'){
      var r = $calc.val();
      $btn = $('<button>').text(r);
      $('#logArea').prepend($btn);
    } else if(t==='±'){
      if(v.match(/^-/)){
        v = v.replace(/^-/,'');
      } else {
        v = '-' + v;
      }
    } else if(t==='()'){
      v = '('+v+')';
    } else if(t==='%' || t==='**' || t==='(' || t===')'){
      v +=t;
    } else if(t===','){
      v += ',';
    } else if(t==='π'){
      v += 'Math.PI';
    } else if(t==='e'){
      v += 'Math.E';
    } else if(t==='random'){
      v += 'Math.random()';
    } else if(t==='√'){
      v = '('+v+')' + '**(1/2)';
    } else if(t==='tax08'){
      v = v + '*1.08';
    } else if(t==='tax10'){
      v = v + '*1.10';
    } else if(t==='Undo'){
      console.log(history);
      if(history.length>undoCount){
        $calc.val(history[history.length-(undoCount+1)]);
        undoCount++;
        if(undoCount > history.length){
          undoCount = 0;
        }
        return;
      }
    } else {
      MathFs.some(function(m){
        if(t===m){
          v = 'Math.'+t+'('+v+')';
          return true;
        }
      });
    }

    $calc.val(v);
    $calc.trigger('change');
  });
  $(document).on('click', '#logArea button', function(){
    var t = $(this).text();
    console.log(t);
    var v = $('#calc').val()
    $calc.val(v+t);
    $calc.trigger('change');
  });


  $calc.on('change', function(){
    calcResult();
  });

  $calc.on('keyup', function(){
    calcResult();
  });
  var calcResult = function(){
    var v = $calc.val()
    var r = eval(v);
    var ten = 1000000;
    r = Math.floor(r* ten) / ten;
    $result.val(r).trigger('change');

    if(history.length>9){
      history.shift()
    }
    history.push(v);
    undoCount=0;
  }


  $('#add').keyup(function(){
    var v1 = $(this).find('[name="v1"]').val() - 0;
    var v2 = $(this).find('[name="v2"]').val() - 0;
    var v3 = v1 + v2;
    $(this).find('[name="v3"]').val(v3);
  });
  $('#subt').keyup(function(){
    var v1 = $(this).find('[name="v1"]').val() - 0;
    var v2 = $(this).find('[name="v2"]').val() - 0;
    var v3 = v1 - v2;
    $(this).find('[name="v3"]').val(v3);
  });
  $('#mult').keyup(function(){
    var v1 = $(this).find('[name="v1"]').val() - 0;
    var v2 = $(this).find('[name="v2"]').val() - 0;
    var v3 = v1 * v2;
    $(this).find('[name="v3"]').val(v3);
  });
  $('#divi').keyup(function(){
    var v1 = $(this).find('[name="v1"]').val() - 0;
    var v2 = $(this).find('[name="v2"]').val() - 0;
    var v3 = v1 / v2;
    $(this).find('[name="v3"]').val(v3);
  });

  $('#rectangle').keyup(function(){
    var v1 = $(this).find('[name="v1"]').val() - 0;
    var v2 = $(this).find('[name="v2"]').val() - 0;
    var v3 = v1 * v2;
    $(this).find('[name="v3"]').val(v3);
  });
  
  $('#triangle').keyup(function(){
    var v1 = $(this).find('[name="v1"]').val() - 0;
    var v2 = $(this).find('[name="v2"]').val() - 0;
    var v3 = v1 * v2 / 2;
    $(this).find('[name="v3"]').val(v3);
  });
  
  $('#trapezium').keyup(function(){
    var v1 = $(this).find('[name="v1"]').val() - 0;
    var v2 = $(this).find('[name="v2"]').val() - 0;
    var v3 = $(this).find('[name="v3"]').val() - 0;
    var v4 = (v1 + v2) * v3 / 2;
    $(this).find('[name="v4"]').val(v4);
  });
  
  $('#rhombus').keyup(function(){
    var v1 = $(this).find('[name="v1"]').val() - 0;
    var v2 = $(this).find('[name="v2"]').val() - 0;
    var v3 = v1 * v2;
    $(this).find('[name="v3"]').val(v3);
  });
  
  $('#circle').keyup(function(){
    var v1 = $(this).find('[name="v1"]').val() - 0;
    var v2 = v1 * v1 * 2 * 3.14;
    $(this).find('[name="v2"]').val(v2);
  });
  $('#circumference').keyup(function(){
    var v1 = $(this).find('[name="v1"]').val() - 0;
    var v2 = v1 * 3.14;
    $(this).find('[name="v2"]').val(v2);
  });
  $('#sphere_area').keyup(function(){
    var v1 = $(this).find('[name="v1"]').val() - 0;
    var v2 = v1 * v1 * 4 * 3.14;
    $(this).find('[name="v2"]').val(v2);
  });
  $('#cylindrical_area').keyup(function(){
    var v1 = $(this).find('[name="v1"]').val() - 0;
    var v2 = $(this).find('[name="v2"]').val() - 0;
    var v3 = ( v1 + v2 ) * v1 * 2 * 3.14;
    $(this).find('[name="v3"]').val(v3);
  });
  $('#conical_area').keyup(function(){
    var v1 = $(this).find('[name="v1"]').val() - 0;
    var v2 = $(this).find('[name="v2"]').val() - 0;
    var v3 = ( v1 + v2 ) * v1 * 3.14;
    $(this).find('[name="v3"]').val(v3);
  });
});
  CSS
  h3{
	margin:20px 0px;
}
label{
	display:inline;
	position:relative;
	top:0px;
	left:0px;
	width:120px;
	margin:20px 0px;
}
label input{
  height:32px;
	width:100px;
}
label p{
	position:absolute;
	top:0px;
	left:0px;
	color:#999999;
	z-index:1;
	padding:2px;
}
#area{
  min-height:100vh;
}
#area label,
#area input{
  display:block;
  width:100%;
  height:10vh;
  font-size:32px;
  margin:0;
  box-sizing:border-box;
}
#area input{
  text-align:right;
  padding:0 12px;
}
#result{
  font-weight:bold;
  font-size:48px;
}

table{
  width:100%;
  height:80vh;
  user-select:none;
}
table td{
  border:1px solid #000;
  font-size:32px;
  text-align:center;
  vertical-align:middle;
  width:25%;
}
table td:hover{
  background-color:rgba(0,0,0,0.1);
}
.c{
  background-color:rgba(0,0,0,0.2);
}
.scientific{
  height:40vh;
}
#scientificKeypad{
  height:40vh;
  background-color:rgba(0,0,0,0.2);
}
#logArea button{
  min-width:12%;
  padding:12px;
}

  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-calc/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。
電卓

数値操作

JavaScript,数値操作,算数,数学

JavaScriptで数値操作

算数

足し算

引き算

掛け算

割り算

図形の公式

長方形の面積

三角形の面積

台形の面積

菱形の面積

円の面積

円の円周

球の表面積

円柱の表面積

円錐の表面積

JavaScript

CSS

HTML

ABOUT
