console
var cur,op,res,mem,sum;
function topicture(num){
let dig=[
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAABnSURBVEhLYyycVPufgYqACUpTDWC4sC+3CcoiDhRNroOyIADFhaQaBgLoeuAuhEmg20gIoOujehiOGkg5GDWQcjBqIOVg1EDKwaiBlAOUepmcahQEkGtKFBeSWoWCALqewd62YWAAAC4LHrMTNnJwAAAAAElFTkSuQmCC" >',
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAABHSURBVEhLYyycVPufgYqACUpTDQw+A/tym6AsCKCKC5ENHQFhiA5GDaQcjBpIORg1kHIwaiDlYIQYWDS5DspiYBhxTREGBgDVKQm2FZeTFQAAAABJRU5ErkJggg==" >',
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAB0SURBVEhLYyycVPufgYqACUpTDWC4sC+3CcoiDhRNroOyIADFhaQaBgLoeigOQ5iBMJdSPQxHDaQcjBpIOaA4L4MAcn5GcSGlhoEA3IXoeZJcMJpsKAejBlIOqG4gSl4mJ+uBAM68TE62w5mXqQWoHIYMDADWHymvx+0dJwAAAABJRU5ErkJggg==" >',
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAABsSURBVEhLYyycVPufgYqACUpTDWC4sC+3CcoiDhRNroOyIADFhaQaBgLoeigOQ5iBMJdSPQxHDaQcjBpIOUDJKeRkPRigWU4ZzcuUg1EDKQeD30Cq5GXkuhnFheiVNjEAXQ/FeRkdUDkMGRgAaNEmr+QfgdYAAAAASUVORK5CYII=" >',
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAABiSURBVEhLYyycVPufgYqACUpTDdDWwL7cJiiLeICuB24gOYbBALLeIRaG1ACjBlIOBr+BKKUNJbmlaHIdmEZxIUyQEkBxeQjzFVYXUgOMGkg5GDWQckAVA5Gz7IhrijAwAACARhkvXbQdqwAAAABJRU5ErkJggg==" >',
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAB1SURBVEhLYyycVPufgYqACUpTDWC4sC+3CcoiDhRNroOyIADFhaQaBgLoeuAuhEmg20gqoHoYjhpIORg1kHKAkpfJyXp48zI52Q5nXiYXoJcBo8mGcjBqIOWA6gZSnJdBADnLoriQnLyMrofivIwOqByGDAwA41cpry/p7coAAAAASUVORK5CYII=" >',
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAB2SURBVEhLYyycVPufgYqACUpTDWC4sC+3CcoiDhRNroOyIADFhaQaBgLoeuAuhEmg20gqoHoYjhpIORg1kHKAkVNIBXjzMjkA3SEsUBoOSM3LIANBGKZvNNlQDkYNpBxQ3UCUepka+RnFheRUoeh6BnvbhoEBAJ3VKLB+5av0AAAAAElFTkSuQmCC" >',
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAABZSURBVEhLYyycVPufgYqACUpTDWC4sC+3CcoiDhRNroOyIADFhaQaBgLoeigOQ5iBMJdSPQxHDaQcjBpIORg1kHIwaiDlYNRAygFVDESumwd/U4TKBjIwAAAerBSyDRm4TgAAAABJRU5ErkJggg==" >',
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAB0SURBVEhLYyycVPufgYqACUpTDWC4sC+3CcoiDhRNroOyIADFhaQaBgLoeuAuhEmg20gIoOujehiOGkg5GDWQcoCRU8gFNMspLFAaDsjNyzAwmmwoB6MGUg6obiBKvUxufkbOXSguJDXbgQC6nsHetmFgAABN5yczwJgrvAAAAABJRU5ErkJggg==" >',
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAABzSURBVEhLYyycVPufgYqACUpTDWC4sC+3CcoiDhRNroOyIADFhaQaBgLoeuAuhEmg20gIoOujehiOGkg5GDWQcoCSl8nJejCANaeQmu2wAYrLw9G8PGogFcDgN5AqeRk5y6K4kJy8jK6H4ryMDqgchgwMAAYgKzLlGVfdAAAAAElFTkSuQmCC" >',
],
dot='<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAABGSURBVEhLYyycVPufgYqACUpTDYwaSDkYNZByMGog5WDUQMrBqIGUgxFoILyi78ttAguAQNHkOiiLdDCEvEwtQGUXMjAAANiYCrdBtP3MAAAAAElFTkSuQmCC" >',
neg='<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAABFSURBVEhLYyycVPufgYqACUpTDYwaSDkYNZByMGog5QBe2vTlNoEFyAVFk+vANO1cSC0wmmwoB6MGUg5GDaQcUNlABgYAH6EKt6KqbzwAAAAASUVORK5CYII=" >';
let ret='';
for(let i of String(num)){
if(i=='.') ret+=dot;
else if(i=='-') ret+=neg;
else if('0123456789'.includes(i)) ret+=dig[i];
else ret+=i;
}
return ret;
}
function init(){
cur=0,op='',res='0',mem=0,sum=0;
fresh();
}
function fresh(){
document.getElementsByClassName('result')[0].innerHTML=topicture(res);
;
}
function add_digit(dig){
if(dig!='bs') res=res+dig;
else res=res.slice(0,-1);
while(res[0]=='0' && res[1]!='.') res=res.slice(1,);
if(res=='') res='0';
fresh();
}
function set_op(oper){
let tmp=Number(res);
if(op=='+') tmp=cur+Number(res);
if(op=='-') tmp=cur-Number(res);
if(op=='*') tmp=cur*Number(res);
if(op=='/') tmp=cur/Number(res);
cur=tmp;
if(oper=='=') return;
else op=oper;
res=String(tmp);
fresh();
res='0';
}
function memory(p){
if(!p) res=String(mem),mem=0;
else mem+=p*Number(res);
fresh();
}
function total(p){
if(!p) res=String(sum),sum=0;
else sum+=p*Number(res);
fresh();
}
function percent(){
if(op=='') return;
if(op=='+') res=cur*(1+res/100);
if(op=='-') res=cur*(1-res/100);
if(op=='*') res=cur*res/100;
if(op=='/') res=cur/(res/100);
total(1);
fresh();
}
function equal(){
set_op('=');
let tmp=res;
res=String(cur);
total(1);
res=tmp;
}
document.getElementsByClassName('mp')[0].onclick=function(){
memory(1)
};
document.getElementsByClassName('m-')[0].onclick=function(){
memory(-1);
};
document.getElementsByClassName('mrc')[0].onclick=function(){
memory(0);
};
document.getElementsByClassName('gt')[0].onclick=function(){
total(0);
};
document.getElementsByClassName('ac')[0].onclick=function(){
init();
};
document.getElementsByClassName('seven')[0].onclick=function(){
add_digit('7');
};
document.getElementsByClassName('eight')[0].onclick=function(){
add_digit('8');
};
document.getElementsByClassName('nine')[0].onclick=function(){
add_digit('9');
};
document.getElementsByClassName('div')[0].onclick=function(){
set_op('/');
};
document.getElementsByClassName('bs')[0].onclick=function(){
add_digit('bs');
};
document.getElementsByClassName('four')[0].onclick=function(){
add_digit('4');
};
document.getElementsByClassName('five')[0].onclick=function(){
add_digit('5');
};
document.getElementsByClassName('six')[0].onclick=function(){
add_digit('6');
};
document.getElementsByClassName('times')[0].onclick=function(){
set_op('*');
};
document.getElementsByClassName('percent')[0].onclick=function(){
percent();
};
document.getElementsByClassName('one')[0].onclick=function(){
add_digit('1');
};
document.getElementsByClassName('two')[0].onclick=function(){
add_digit('2');
};
document.getElementsByClassName('three')[0].onclick=function(){
add_digit('3');
};
document.getElementsByClassName('minus')[0].onclick=function(){
set_op('-')
};
document.getElementsByClassName('plus')[0].onclick=function(){
set_op('+');
};
document.getElementsByClassName('zero')[0].onclick=function(){
add_digit('0');
};
document.getElementsByClassName('dbzero')[0].onclick=function(){
add_digit('00');
};
document.getElementsByClassName('dec')[0].onclick=function(){
add_digit('.');
};
document.getElementsByClassName('equal')[0].onclick=function(){
equal();
};
init();
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<div class="container">
<div class="result">123</div>
<div class="mp">M+</div>
<div class="m-">M-</div>
<div class="mrc">MRC</div>
<div class="gt">GT</div>
<div class="ac">AC</div>
<div class="seven">7</div>
<div class="eight">8</div>
<div class="nine">9</div>
<div class="div">÷</div>
<div class="bs">←</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
<div class="times">×</div>
<div class="percent">%</div>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="minus">-</div>
<div class="zero">0</div>
<div class="dbzero">00</div>
<div class="dec">.</div>
<div class="equal">=</div>
<div class="plus">+</div>
</div>
</body>
</html>
*{
user-select: none;
}
.container {
width:350px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-175px;
padding:0;
box-shadow:0 0 15px grey;
}
.result {
background-color: #71927D;
color:white;
padding:7px;
}
img{
height:40px;
}
.mp,.m-,.mrc,.gt,.ac,.seven,.eight,.nine,.div,.bs,.four,.five,.six,.times,.percent,.one,.two,.three,.minus,.plus,.zero,.dbzero,.dec,.equal{
background-color: #313131;
color:white;
font-size:20px;
font-family:'Courier New',Courier,monospace;
padding: 7px;
}
.mp:hover,.m-:hover,.mrc:hover,.gt:hover,.ac:hover,.seven:hover,.eight:hover,.nine:hover,.div:hover,.bs:hover,.four:hover,.five:hover,.six:hover,.times:hover,.percent:hover,.one:hover,.two:hover,.three:hover,.minus:hover,.plus:hover,.zero:hover,.dbzero:hover,.dec:hover,.equal:hover{
background-color: #464646;
}
.mp:active,.m-:active,.mrc:active,.gt:active,.ac:active,.seven:active,.eight:active,.nine:active,.div:active,.bs:active,.four:active,.five:active,.six:active,.times:active,.percent:active,.one:active,.two:active,.three:active,.minus:active,.plus:active,.zero:active,.dbzero:active,.dec:active,.equal:active{
background-color: #414141;
}
.container{
border-radius:5px;
}
.result{
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.zero{
border-bottom-left-radius:5px;
}
.plus{
border-bottom-right-radius:5px;
}
.container { display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
}
.result { grid-area: 1 / 1 / 2 / 6; }
.mp { grid-area: 2 / 1 / 3 / 2; }
.m- { grid-area: 2 / 2 / 3 / 3; }
.mrc { grid-area: 2 / 3 / 3 / 4; }
.gt { grid-area: 2 / 4 / 3 / 5; }
.ac { grid-area: 2 / 5 / 3 / 6; }
.seven { grid-area: 3 / 1 / 4 / 2; }
.eight { grid-area: 3 / 2 / 4 / 3; }
.nine { grid-area: 3 / 3 / 4 / 4; }
.div { grid-area: 3 / 4 / 4 / 5; }
.bs { grid-area: 3 / 5 / 4 / 6; }
.four { grid-area: 4 / 1 / 5 / 2; }
.five { grid-area: 4 / 2 / 5 / 3; }
.six { grid-area: 4 / 3 / 5 / 4; }
.times { grid-area: 4 / 4 / 5 / 5; }
.percent { grid-area: 4 / 5 / 5 / 6; }
.one { grid-area: 5 / 1 / 6 / 2; }
.two { grid-area: 5 / 2 / 6 / 3; }
.three { grid-area: 5 / 3 / 6 / 4; }
.minus { grid-area: 5 / 4 / 6 / 5; }
.zero { grid-area: 6 / 1 / 7 / 2; }
.dbzero { grid-area: 6 / 2 / 7 / 3; }
.dec { grid-area: 6 / 3 / 7 / 4; }
.equal { grid-area: 6 / 4 / 7 / 5; }
.plus { grid-area: 5 / 5 / 7 / 6; }