<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calculator</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
let n1="", n2="", log="";
let res = "";
function calc() {
if(res.substring(res.length-1)=="+"||res.substring(res.length-1)=="-"||res.substring(res.length-1)=="*"||res.substring(res.length-1)=="/"||res.substring(res.length-1)==".")
res = res.substring(0,res.length-1);
if(res.substring(0,1)=="*"||res.substring(0,1)=="/")
return 0;
log += res;
res = eval(res) + "";
output(res);
log += "=" + res + "\n";
document.getElementById("log").value = log;
}
function su1(n) {
n1 += n;
console.log(n1);
res += n1;
output();
n1 = "";
}
function oper(op) {
if(op == "-")
{
if(res.substring(res.length-1) == "-") return 0;
}
else if(res.substring(res.length-1) == "+"||res.substring(res.length-1) == "-"||res.substring(res.length-1) == "*"||res.substring(res.length-1) == "/")
return 0;
n2 = op;
res += n2;
output();
console.log(n2);
n1 = "";
}
function BS() {
res = res.substring(0,res.length-1)
console.log(res);
output();
}
function output() {
document.getElementById("result").innerText = res;
}
function AC() {
res = "";
output();
}
function LC() {
log = "";
document.getElementById("log").value = log;
}
</script>
</head>
<body>
<div class="container">
<table class="table-success">
<tr>
<td rowspan="2" colspan="3" style="width: 200px;background-color: gray;"><div id="result"></div></td>
<td><input style="width: 50px;" type="button" id="bs" value="BS" xxonclick="BS()" /></td>
<td rowspan="6"><input style="width: 50px; height: 200px;" type="button" id="AC" value="AC" xxonclick="AC()" /></td>
<td rowspan="6"><input style="width: 100px; height: 200px;" type="button" id="LC" value="기록삭제" xxonclick="LC()" /></td>
</tr>
<tr>
<td><input style="width: 50px;" type="button" id="divide" value="/"xxonclick="oper(value)"/></td>
</tr>
<tr>
<td><input style="width: 50px;" type="button" id="7" value="7"xxonclick="su1(value)" /></td>
<td><input style="width: 50px;" type="button" id="8" value="8"xxonclick="su1(value)" /></td>
<td><input style="width: 50px;" type="button" id="9" value="9"xxonclick="su1(value)" /></td>
<td><input style="width: 50px;" type="button" id="multiply" value="*"xxonclick="oper(value)"/></td>
</tr>
<tr>
<td><input style="width: 50px;" type="button" id="4" value="4"xxonclick="su1(value)" /></td>
<td><input style="width: 50px;" type="button" id="5" value="5"xxonclick="su1(value)" /></td>
<td><input style="width: 50px;" type="button" id="6" value="6"xxonclick="su1(value)" /></td>
<td><input style="width: 50px;" type="button" id="sub" value="-"xxonclick="oper(value)"/></td>
</tr>
<tr>
<td><input style="width: 50px;" type="button" id="1" value="1"xxonclick="su1(value)" /></td>
<td><input style="width: 50px;" type="button" id="2" value="2"xxonclick="su1(value)" /></td>
<td><input style="width: 50px;" type="button" id="3" value="3"xxonclick="su1(value)" /></td>
<td><input style="width: 50px;" type="button" id="add" value="+"xxonclick="oper(value)"/></td>
</tr>
<tr>
<td colspan="2"><input style="width: 125px;" type="button" id="0" value="0"xxonclick="su1(value)" /></td>
<td><input style="width: 50px;" type="button" id="dot" value="."xxonclick="su1(value)" /></td>
<td><input style="width: 50px;" type="button" id="equal" value="="xxonclick="calc()" /></td>
</tr>
</table>
<textarea rows="20" cols="20" id="log"></textarea>
</div>
</body>
</html>
첫댓글 디자인만 좀더 손보면 멋지겠네요. 수고하셨습니다.