Как сделать простой калькулятор на html и javascript?

Пользователь

от fred , в категории: HTML/CSS , 7 месяцев назад

Как сделать простой калькулятор на html и javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от gussie.jones , 7 месяцев назад

@fred 

Вот пример простого калькулятора на HTML и JavaScript:


HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <title>Калькулятор</title>
</head>
<body>
    <input id="num1" type="text" placeholder="Введите первое число">
    <input id="num2" type="text" placeholder="Введите второе число">
    <br>
    <button onclick="add()">+</button>
    <button onclick="subtract()">-</button>
    <button onclick="multiply()">*</button>
    <button onclick="divide()">/</button>
    <br>
    <input id="result" type="text" disabled>
    
    <script src="script.js"></script>
</body>
</html>


JavaScript (в отдельном файле script.js):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function add() {
    var num1 = parseFloat(document.getElementById("num1").value);
    var num2 = parseFloat(document.getElementById("num2").value);
    document.getElementById("result").value = num1 + num2;
}

function subtract() {
    var num1 = parseFloat(document.getElementById("num1").value);
    var num2 = parseFloat(document.getElementById("num2").value);
    document.getElementById("result").value = num1 - num2;
}

function multiply() {
    var num1 = parseFloat(document.getElementById("num1").value);
    var num2 = parseFloat(document.getElementById("num2").value);
    document.getElementById("result").value = num1 * num2;
}

function divide() {
    var num1 = parseFloat(document.getElementById("num1").value);
    var num2 = parseFloat(document.getElementById("num2").value);
    document.getElementById("result").value = num1 / num2;
}


В этом примере на странице имеются два поля ввода для чисел, четыре кнопки операций (+, -, *, /) и поле вывода для результата. При нажатии на каждую кнопку вызывается соответствующая функция в JavaScript, которая берет значения из полей ввода, выполняет соответствующую операцию и выводит результат в поле вывода.