-
Информация о материале
-
-
Просмотров: 123
js_calc.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Calculator</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table border="1" style="border-collapse: collapse; text-align:center;" cellpadding="5px" align="center">
<tr id="tablo_line">
<td colspan="4">
<input id="tablo" placeholder="Табло" size="25"></td>
</tr>
<tr id="out_line">
<td colspan="4">
<input id="out" placeholder="Ответ" size="25" disabled="true"></td>
</tr>
<tr>
<td><button id="n7" type="button">7</button></td>
<td><button id="n8" type="button">8</button></td>
<td><button id="n9" type="button">9</button></td>
<td><button id="plus" type="button">+</button></td>
</tr>
<tr>
<td><button id="n4" type="button">4</button></td>
<td><button id="n5" type="button">5</button></td>
<td><button id="n6" type="button">6</button></td>
<td><button id="minus" type="button">-</button></td>
</tr>
<tr>
<td><button id="n1" type="button">1</button></td>
<td><button id="n2" type="button">2</button></td>
<td><button id="n3" type="button">3</button></td>
<td><button id="multi" type="button">*</button></td>
</tr>
<tr>
<td><button id="nzap" type="button">.</button></td>
<td><button id="n0" type="button">0</button></td>
<td>
<button id="go" type="button">
=
</button>
</td>
<td><button id="div" type="button">/</button></td>
</tr>
</table>
<script src="/script.js"></script>
</body>
</html>
script.js
let rezult = document.getElementById("go");
let plus = document.getElementById("plus");
let minus = document.getElementById("minus");
let multi = document.getElementById("multi");
let div = document.getElementById("div");
num_tablo = document.getElementById("tablo");
num_out = document.getElementById("out");
let num1, num2, op;
let num = [];
function go() {
num2 = num_tablo.value;
if(op == '+')
num_out.value = Number(num1) + Number(num2);
if(op == '-')
num_out.value = Number(num1) - Number(num2);
if(op == '*')
num_out.value = Number(num1) * Number(num2);
if(op == '/')
num_out.value = Number(num1) / Number(num2);
num_tablo.value = "";
}
function num_press(event) {
b = event.target.getAttribute('id');
num_tablo.value = num_tablo.value + b[1];
}
function general_press() {
num1 = num_tablo.value;
num_tablo.value = '';
num_out.value = num1;
}
function plus_press() {
general_press();
op = '+';
}
function minus_press() {
general_press();
op = '-';
}
function multi_press() {
general_press();
op = '*';
}
function div_press() {
general_press();
op = '/';
}
for(i = 0; i < 10; i++) {
num_z = document.getElementById("n" + i);
num_z.addEventListener("click", num_press);
num.push(num_z);
}
plus.addEventListener("click", plus_press);
minus.addEventListener("click", minus_press);
multi.addEventListener("click", multi_press);
div.addEventListener("click", div_press);
rezult.addEventListener("click", go);
style.css
html, body {
height: 100%;
width: 100%;
}
#tablo_line {
text-align: center;
font-weight: bold;
background-color: blue;
}
#out_line {
text-align: center;
font-weight: bold;
background-color: darkorange;
}
