초간단 계산기 스크립트
나무사랑
0
1959
2021.05.22 11:51
몇줄의 css와 javascript로 구현하는 계산기입니다.
1. 초간단 계산기
[소스]
<style>
#q{margin:auto; width:220px;}
#r{display:grid; grid-template-columns:repeat(4,50px); gap:0.6rem; margin-top:10px; }
#s{width:100%; font-size:1rem; font-weight:600; outline:0; border:solid 2px gray; border-radius:3px;}
#r button:last-child { grid-column : 1/5; }
</style>
<div id='q'>
<input id='s'>
<div id='r'></div>
</div>
<script>
'789+456-123*C0./='.split('').map(e => r.insertAdjacentHTML("beforeend", `<button onclick="a='${e}',a=='C'?s.value='':a=='='?s.value=eval(s.value): s.value+=a">` + e));
</script>
[결과]
2. CSS 스타일 준 계산기
[소스]
<style>#q{ margin: 2rem auto; width:210px; }#t { width:100%; font-size:1rem; font-weight:600; outline:0; border:solid 2px SteelBlue; border-radius:3px; padding: 6px; }#b{ display:grid; grid-template-columns:repeat(4,50px); gap:0.6rem; margin-top:10px; }#b button { color:white; padding:5px; font-weight:600; background-color: SteelBlue; border:none; border-radius: 4px; box-shadow: 2px 2px 1px silver; cursor: pointer; transition: 0.5s; }#b button:hover { transform: scale(1.1); }#b button:last-child { grid-column : 1/5; }</style><div id="q"> <input id='t'> <div id='b'></div><script>'789+456-123*C0./='.split('').map(e => b.insertAdjacentHTML("beforeend", `<button onclick="a='${e}',a=='C'?t.value='':a=='='?t.value=eval(t.value): t.value+=a">` + e));</script>
[결과]
3. 디자인 계산기
예시보기 : http://mytreelove.com/skin/misc/Calculator.html
키워드태그 : 계산기스크립트
