-
Информация о материале
-
-
Просмотров: 105
jq_calc.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JQuery Calculator</title>
<link href="/jq_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" class="nbtn" type="button">7</button></td>
<td><button id="n8" class="nbtn" type="button">8</button></td>
<td><button id="n9" class="nbtn" type="button">9</button></td>
<td><button id="plus" type="button">+</button></td>
</tr>
<tr>
<td><button id="n4" class="nbtn" type="button">4</button></td>
<td><button id="n5" class="nbtn" type="button">5</button></td>
<td><button id="n6" class="nbtn" type="button">6</button></td>
<td><button id="minus" type="button">-</button></td>
</tr>
<tr>
<td><button id="n1" class="nbtn" type="button">1</button></td>
<td><button id="n2" class="nbtn" type="button">2</button></td>
<td><button id="n3" class="nbtn" 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" class="nbtn" 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="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="/script.js"></script>
</body>
</html>
script.js
let num1, num2, op;
let num = [];
var num_btns = $(".nbtn");
for(i=0; i < num_btns.length; i++){
num_btns[i].addEventListener('click', function(e){
$("#tablo").val($("#tablo").val() + $(this).text());
})
}
function general_press() {
num1 = $('#tablo').val();
$('#tablo').val('');
$('#out').val(num1);
}
$("#go").on("click", function() {
num2 = $("#tablo").val();
if(op == "+")
$("#out").val(Number(num1) + Number(num2));
if(op == "-")
$("#out").val(Number(num1) - Number(num2));
if(op == "*")
$("#out").val(Number(num1) * Number(num2));
if(op == "/")
$("#out").val(Number(num1) / Number(num2));
$("#tablo").val('');
});
$("#plus").on("click", function() {
general_press();
op = "+";
});
$("#minus").on("click", function() {
general_press();
op = "-";
});
$("#multi").on("click", function() {
general_press();
op = "*";
});
$("#div").on("click", function() {
general_press();
op = "/";
});
$('#nzap').on('click', function() {
$('#tablo').val($("#tablo").val() + '.');
});
jq_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: darkgreen;
}