Web電卓

2018.02.18

カテゴリ：javascript

Web電卓
それだけ
https://codepen.io/anon/pen/YeYjLO

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

</div>

AC,CE,±,√,MC

７,８,９,÷,RM

４,５,６,×,M+

１,２,３,−,SM

０,・,＝,＋,＋

</div>

</tt> </div>

(function(){

var protoKey =document.createElement('button')

var protoTR =document.createElement('tr')

var protoTD =document.createElement('td')

var X,Y;

var memory =0;

var renew =true;

var operation ='';

var buttonSize=50;

function setCalc(){

var table =document.getElementById('calculator').firstElementChild;

var calcKeys =document.getElementById('calcKeys').innerText;

var rows=calcKeys.split('\n');

for ( var i=1, rlen=rows.length-1; i < rlen; i++){

var tr =protoTR.cloneNode();

table.appendChild( tr );

var keyData=rows[ i ].split( ',' );

for ( var j = 0, dlen =keyData.length; j < dlen; j++){

var keyDatum =keyData[ j ];

if ( j && (keyDatum == keyData[ j - 1 ] ) ){

var colspan =tr.lastElementChild.getAttribute( 'colspan' );

if ( colspan == null ){

colspan = 2

}else{

colspan++

}

var td=tr.lastElementChild;

td.setAttribute( 'colspan', colspan );

var btn =td.firstElementChild;

var margin =btn.style.margin.replace( /px/, '' ) - 0;

btn.style.width=( colspan * buttonSize + ( colspan - 1 ) * margin * 2 ) + 'px';

}else{

setKey( tr, keyDatum );

}

table.appendChild( document.createElement('br') );

}

function setKey( parent, chr ){

var td=protoTD.cloneNode();

var keyButton=protoKey.cloneNode();

keyButton.appendChild( document.createTextNode( chr ) );

keyButton.addEventListener( 'click', doKeyCommand );

keyButton.setAttribute( 'class', 'calcKey' );

keyButton.style.width =buttonSize + 'px'

keyButton.style.height =buttonSize + 'px'

keyButton.style.margin ='1px';

parent.appendChild( td )

td.appendChild( keyButton )

}

function doKeyCommand(){

var keyChar=this.innerText;

//alert( keyChar )

if ( numKey( keyChar ) ){ return }

if ( dotKey( keyChar ) ){ return }

if ( acKey( keyChar ) ){ return }

if ( ceKey( keyChar ) ){ return }

if ( opeKey( keyChar ) ){ return }

if ( memKey( keyChar ) ){ return }

alert(renew)

}

function format(a){

return (' '+a).substr(-18);

}

function ce(){

document.getElementById( 'outputText' ).value=format( 0 );

X =0;

renew =false;

}

function ac(){

ce();

Y =0;

mc();

}

function mc(){

memory =0;

}

function numKey( keyChar ){

var pos ='０１２３４５６７８９'.indexOf( keyChar );

if ( pos < 0 ){ return false; }

X=( X + '' + pos ) - 0;

if ( renew ){

X=pos;

renew =false;

}

document.getElementById( 'outputText' ).value=format( X );

return true;

}

function dotKey( keyChar ){

if ( keyChar !=='・' ){return false;}

if ( X.toString().match( /[.]/ ) ){return true;}

X+='.';

return true;

}

function acKey( keyChar ){

if ( keyChar !=='AC' ){return false;}

ac();

return true;

}

function ceKey( keyChar ){

if ( keyChar !=='CE' ){return false;}

ac();

return true;

}

function opeKey( keyChar ){

switch( keyChar ){

case '＋':

case '−':

case '×':

case '÷':

case '＝':

break;

case '√':

X =Math.sqrt(X);

break;

default:

return false;//

}

switch( operation ){

case '＋':

X +=Y;break;

case '−':

X =Y-X;break;

case '×':

X *=Y;break;

case '÷':

X =Y/X;break;

}

operation =keyChar;

document.getElementById( 'outputText' ).value=format( X );

Y=X;

renew=true;

return true;

}

function memKey( keyChar ){

switch( keyChar ){

case 'M+':

memory +=X;

break;

case 'MC':

mc();

break;

case 'RM':

X=memory;

document.getElementById( 'outputText' ).value=format( X );

break;

case 'SM':

memory=X;

break;

case '±':

X=0-X;

document.getElementById( 'outputText' ).value=format( X );

break;

default:

return false;

}

return true;

}

setCalc();

ac();

})();

</script>

</body>

</html>

お気に入りの記事を「いいね！」で応援しよう

最終更新日 2018.02.18 09:08:04
コメント(0) | コメントを書く

[javascript] カテゴリの最新記事