<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0; list-style: none;}
body{
position: fixed;
top: 0;left:0;width:100%;height: 100%;
background-color: lightcyan;
}
#calc{
box-shadow: 5px 5px 7px rgba(0,0,0,0.35);
font-family: fantasy;
position: fixed;
top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 400px; height: max-content;
border: 22px solid lightgoldenrodyellow;
border-style: outset;
border-radius: 10px;
padding: 20px;
background-color: beige;
}
.output:after{content: "_";}
.output{
color: lawngreen;
padding: 0 15px;
box-sizing: border-box;
text-align: right;
height: 104px; line-height: 80px;
font-size: 40px;
margin-bottom: 45px;
font-weight: bold;
background-color: #555;
border: 12px solid #888;
border-style: inset;
position: relative;
overflow: hidden;
}
.output:before{
width: 100%;
height: 100%;
content: '';
display: block;
background: linear-gradient(-60deg, rgba(255,255,255,0), rgba(255,255,255,0), rgba(255,255,255,0.25), rgba(255,255,255,0), rgba(255,255,255,0));
position: absolute;
top: 0%;
left: -100%;
animation: shinning 1.5s infinite;
}
@keyframes shinning {
0%{left: -200%;}
100%{left: 200%;}
}
ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
ul li{
cursor: pointer;
color: #555;
user-select: none;
text-align: center;
padding: 10px 0;
margin-bottom: 15px;
width: calc((100% - 45px) / 4);
border: 1px solid #000;
box-sizing: border-box;
border: 7px solid #ccc;
border-style: outset;
background-color: #ccc;
border-radius: 5px;
box-shadow: 1px 1px 3.5px rgba(0,0,0,0.5);
}
ul li:active{
border-style: inset;
background-color: #bbb;
color: #444;
}
</style>
</head>
<body>
<div id="calc">
<div class="output"></div>
<ul class="btns">
<li class="num">7</li>
<li class="num">8</li>
<li class="num">9</li>
<li class="op" data-operator="dev">÷</li>
<li class="num">4</li>
<li class="num">5</li>
<li class="num">6</li>
<li class="op" data-operator="mul">×</li>
<li class="num">1</li>
<li class="num">2</li>
<li class="num">3</li>
<li class="op" data-operator="sub">-</li>
<li class="num">0</li>
<li class="dot">.</li>
<li class="equal">=</li>
<li class="op" data-operator="plus">+</li>
</ul>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
//이항산술이 가능한 4칙연산 계산기
var num; // ...+2항
var initNum;// 연산 1항
var userOp;
$("ul li.num").on("click", function() {
num = $(this).text();// click한 숫자 출력하기
num = $(".output").text() + num;// 출력한 숫자와 함께 이어 출력하기
$(".output").text(num);
});
// 1. 1항에 대한 정의.
$("ul li.op").on("click", function() {
initNum = num; // 연산자 누르기 전까지 숫자를 1항으로 결정짓기
userOp = $(this).attr("data-operator"); // data- 속성값 가져오기(연산자)
$(".output").empty(); // 출력창 비우기
});
// 2. 연산이 되는 시점
$("ul li.equal").on("click", function() {
num = Number(num); // 문자를 숫자로 변환
initNum = Number(initNum);
var result;
switch(userOp){
case "plus": result = initNum + num;
break;
case "sub" : result = initNum - num;
break;
case "mul" : result = initNum * num
break;
case "dev" : result = initNum / num
break;
default : result = "NaN"
} // 연산
if(result){
$(".output").text(result);
}// 연산결과 출력
})
</script>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.