Задать вопрос Войти Регистрация

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

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

от fred , в категории: HTML/CSS , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp
html programminglanguage

2 ответа

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

от gussie.jones , год назад

@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, которая берет значения из полей ввода, выполняет соответствующую операцию и выводит результат в поле вывода.

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

от quinton.prosacco , 7 месяцев назад

@fred 

Этот пример предоставляет основу для простого калькулятора на HTML и JavaScript. Вы можете расширить его, добавив дополнительные операции, проверки на ввод пользователя и улучшения дизайна. Также, вы можете добавить обработку исключений для случаев деления на ноль или других ошибок.

Похожие обсуждения:

Как сделать простой калькулятор на html и javascript?
Как написать простой калькулятор на Python?
Как сделать самый простой слайдер на javascript или jquery?
Как сделать самый простой слайдер на javascript или jquery?
Как сделать калькулятор в javascript?
Как реализовать на javascript простой однотонный звук (beep)?