<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calc.html</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>
'use strict';
let res = "";
let num1 = "";
let num2 = "";
let op = "";
function C() {
num1 = "";
num2 = "";
res = "";
op = "";
document.getElementById("res").value = res;
}
function one() {
res += "1";
document.getElementById("res").value = res;
}
function two() {
res += "2";
document.getElementById("res").value = res;
}
function three() {
res += "3";
document.getElementById("res").value = res;
}
function four() {
res += "4";
document.getElementById("res").value = res;
}
function five() {
res += "5";
document.getElementById("res").value = res;
}
function six() {
res += "6";
document.getElementById("res").value = res;
}
function seven() {
res += "7";
document.getElementById("res").value = res;
}
function eight() {
res += "8";
document.getElementById("res").value = res;
}
function nine() {
res += "9";
document.getElementById("res").value = res;
}
function zero() {
res += "0";
document.getElementById("res").value = res;
}
function mul() {
if(res.substring(0,1) == '0') res = res.substring(1,res.length);
num1 = res;
op = "*"
document.getElementById("res").value = res;
res = "";
}
function div() {
if(res.substring(0,1) == '0') res = res.substring(1,res.length);
num1 = res;
op = "/"
document.getElementById("res").value = res;
res = "";
}
function sub() {
if(res.substring(0,1) == '0') res = res.substring(1,res.length);
num1 = res;
op = "-"
document.getElementById("res").value = res;
res = "";
}
function sum() {
if(res.substring(0,1) == '0') res = res.substring(1,res.length);
num1 = res;
op = "+"
document.getElementById("res").value = res;
res = "";
}
function result() {
num2 = res;
res = "";
let calc = eval(num1+op+num2);
document.getElementById("res").value = calc;
}
</script>
</head>
<body>
<p><br /></p>
<div class="container">
<form name="mycalc">
<div class="row">
<div class="col"><input type="text" name="res" id="res" class="form-control" /></div>
</div>
<div class="row mt-3">
<div class="col-3"><button type = "button" xxxxonclick="one()" class="btn btn-info form-control">1</button></div>
<div class="col-3"><button type = "button" xxxxonclick="two()" class="btn btn-info form-control">2</button></div>
<div class="col-3"><button type = "button" xxxxonclick="three()" class="btn btn-info form-control">3</button></div>
<div class="col-3"><button type = "button" xxxxonclick="div()" class="btn btn-info form-control">/</button></div>
</div>
<div class="row mt-3">
<div class="col-3"><button type = "button" xxxxonclick="four()" class="btn btn-info form-control">4</button></div>
<div class="col-3"><button type = "button" xxxxonclick="five()" class="btn btn-info form-control">5</button></div>
<div class="col-3"><button type = "button" xxxxonclick="six()" class="btn btn-info form-control">6</button></div>
<div class="col-3"><button type = "button" xxxxonclick="mul()" class="btn btn-info form-control">*</button></div>
</div>
<div class="row mt-3">
<div class="col-3"><button type = "button" xxxxonclick="seven()" class="btn btn-info form-control">7</button></div>
<div class="col-3"><button type = "button" xxxxonclick="eight()" class="btn btn-info form-control">8</button></div>
<div class="col-3"><button type = "button" xxxxonclick="nine()" class="btn btn-info form-control">9</button></div>
<div class="col-3"><button type = "button" xxxxonclick="sub()" class="btn btn-info form-control">-</button></div>
</div>
<div class="row mt-3">
<div class="col-3"><button type = "button" xxxxonclick="zero()" class="btn btn-info form-control">0</button></div>
<div class="col-3"><button type = "button" xxxxonclick="C()" class="btn btn-info form-control">C</button></div>
<div class="col-3"><button type = "button" xxxxonclick="result()" class="btn btn-info form-control">=</button></div>
<div class="col-3"><button type = "button" xxxxonclick="sum()" class="btn btn-info form-control">+</button></div>
</div>
</form>
</div>
</body>
</html>
첫댓글 사칙연산 계산기 처리 잘 보았어요.
기존에 입력된 값을 보여주면 더 좋았을듯도 합니다. 수고하셨어요