PR
キーワードサーチ
▼キーワード検索
カレンダー
コメント新着
2018.02.18
カテゴリ： javascript
Web電卓
それだけ
https://codepen.io/anon/pen/YeYjLO
それだけ
https://codepen.io/anon/pen/YeYjLO
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>電卓</title>
</head>
<body onload="setCalc()">
<div id="outputArea">
<input type="text" id="outputText"/>
</div>
<div id="calcKeys" style="display:none">
AC,CE,±,√,MC
７,８,９,÷,RM
４,５,６,×,M+
１,２,３,−,SM
０,・,＝,＋,＋
</div>
<div id="calculator"> <tt>
<table/>
</tt> </div>
<script type="text/javascript">
(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;
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;
}
functiondotKey( keyChar ){
if ( keyChar !=='・' ){return false;}
if ( X.toString().match( /[.]/ ) ){return true;}
X+='.';
returntrue;
}
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;
}
functionmemKey( 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>
お気に入りの記事を「いいね！」で応援しよう
[javascript] カテゴリの最新記事
-
NWJS備忘録１ 2019.04.08
-
LISPっぽい関数をJavascriptで 2016.02.23
-
子ウインドウを自在に 2015.06.16
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
