<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Инженерный калькулятор</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #111827, #374151);
font-family: Arial, sans-serif;
}
.calculator {
width: 95%;
max-width: 420px;
padding: 20px;
border-radius: 24px;
background: #1f2937;
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.display {
width: 100%;
min-height: 80px;
margin-bottom: 15px;
padding: 15px;
border-radius: 15px;
background: #111827;
color: white;
font-size: 32px;
text-align: right;
overflow-x: auto;
display: flex;
align-items: center;
justify-content: flex-end;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 9px;
}
button {
min-height: 58px;
border: none;
border-radius: 14px;
background: #374151;
color: white;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
button:active {
transform: scale(0.95);
}
.function {
background: #4b5563;
}
.operator {
background: #6366f1;
}
.equals {
background: #10b981;
}
.clear {
background: #ef4444;
}
</style>
</head>
<body>
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<button class="clear" onclick="clearDisplay()">C</button>
<button class="function" onclick="backspace()">⌫</button>
<button class="function" onclick="add('(')">(</button>
<button class="function" onclick="add(')')">)</button>
<button class="function" onclick="calculateFunction('sin')">sin</button>
<button class="function" onclick="calculateFunction('cos')">cos</button>
<button class="function" onclick="calculateFunction('tan')">tan</button>
<button class="operator" onclick="add('/')">÷</button>
<button class="function" onclick="calculateFunction('asin')">sin⁻¹</button>
<button class="function" onclick="calculateFunction('acos')">cos⁻¹</button>
<button class="function" onclick="calculateFunction('atan')">tan⁻¹</button>
<button class="operator" onclick="add('*')">×</button>
<button class="function" onclick="calculateFunction('sqrt')">√</button>
<button class="function" onclick="add('**2')">x²</button>
<button class="function" onclick="add('**')">xʸ</button>
<button class="operator" onclick="add('-')">−</button>
<button class="function" onclick="calculateFunction('log')">log</button>
<button class="function" onclick="calculateFunction('ln')">ln</button>
<button class="function" onclick="add('Math.PI')">π</button>
<button class="operator" onclick="add('+')">+</button>
<button onclick="add('7')">7</button>
<button onclick="add('8')">8</button>
<button onclick="add('9')">9</button>
<button class="function" onclick="calculateFunction('factorial')">n!</button>
<button onclick="add('4')">4</button>
<button onclick="add('5')">5</button>
<button onclick="add('6')">6</button>
<button class="function" onclick="add('Math.E')">e</button>
<button onclick="add('1')">1</button>
<button onclick="add('2')">2</button>
<button onclick="add('3')">3</button>
<button class="function" onclick="calculateFunction('abs')">|x|</button>
<button onclick="add('0')">0</button>
<button onclick="add('.')">.</button>
<button class="equals" onclick="calculate()">=</button>
<button class="function" onclick="toggleSign()">±</button>
</div>
</div>
<script>
let expression = "";
const display = document.getElementById("display");
function updateDisplay() {
display.textContent = expression || "0";
}
function add(value) {
expression += value;
updateDisplay();
}
function clearDisplay() {
expression = "";
updateDisplay();
}
function backspace() {
expression = expression.slice(0, -1);
updateDisplay();
}
function calculate() {
try {
let result = eval(expression);
if (!Number.isFinite(result)) {
throw new Error();
}
expression = String(Number(result.toFixed(12)));
updateDisplay();
} catch {
display.textContent = "Ошибка";
expression = "";
}
}
function calculateFunction(func) {
try {
let x = eval(expression || "0");
let result;
switch (func) {
case "sin":
result = Math.sin(x * Math.PI / 180);
break;
case "cos":
result = Math.cos(x * Math.PI / 180);
break;
case "tan":
result = Math.tan(x * Math.PI / 180);
break;
case "asin":
result = Math.asin(x) * 180 / Math.PI;
break;
case "acos":
result = Math.acos(x) * 180 / Math.PI;
break;
case "atan":
result = Math.atan(x) * 180 / Math.PI;
break;
case "sqrt":
result = Math.sqrt(x);
break;
case "log":
result = Math.log10(x);
break;
case "ln":
result = Math.log(x);
break;
case "abs":
result = Math.abs(x);
break;
case "factorial":
result = factorial(x);
break;
}
if (!Number.isFinite(result)) {
throw new Error();
}
expression = String(Number(result.toFixed(12)));
updateDisplay();
} catch {
display.textContent = "Ошибка";
expression = "";
}
}
function factorial(n) {
if (n < 0 || !Number.isInteger(n) || n > 170) {
throw new Error();
}
let result = 1;
for (let i = 2; i <= n; i++) {
result *= i;
}
return result;
}
function toggleSign() {
if (!expression) return;
try {
expression = String(-eval(expression));
updateDisplay();
} catch {
display.textContent = "Ошибка";
expression = "";
}
}
document.addEventListener("keydown", function(event) {
if ((event.key >= "0" && event.key <= "9") ||
"+-*/().".includes(event.key)) {
add(event.key);
}
if (event.key === "Enter" || event.key === "=") {
calculate();
}
if (event.key === "Backspace") {
backspace();
}
if (event.key === "Escape") {
clearDisplay();
}
});
</script>
</body>
</html>