В этой статье мы расскажем о том, как сделать простейший калькулятор расчета значений.
Вы наверняка видели на некоторых сайтах формы, предлагающие рассчитать стоимость услуг - вставка пластиковых окон, покрытие пола, ремонт машины и так далее.
Все такие калькуляторы расчета стоимости делаются аналогично, всё действие происходит в js-файле. Меняется лишь логика расчетов и зачастую внешний вид самого калькулятор - за место чисел, размеров, вам предлагают кликнуть на на графические элементы (готовые оконные рамы с размерами и так далее).
Сейчас мы сделаем простой калькулятор, который будет выполнять 4 основных действия: сложение, вычитание, умножение и деление. Этот пример призван показать принцип создания таких калькуляторов для расчета стоимости, а не дать вам готовый вариант.
Для этого нам понадобится два текстовых инпута для вводимых чисел - первого и второго, выпадающий список с выбором действия, кнопка "Рассчитать" и поле для результата. Создадим такую разметку:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Страница</title>
<link rel="stylesheet" href="/../css/template.css" type="text/css" />
<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
<script type="text/javascript" src="/../js/calculator.js"></script>
</head>
<body>
<form>
<div><label>Первое число:</label><input type="text" name="first" placeholder="Введите число"/></div>
<div><label>Второе число:</label><input type="text" name="second" placeholder="Введите число"/></div>
<div><label>Выберите действие:</label>
<select name="action">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
</div>
<div><input type="button" name="send" value="Рассчитать"/></div>
<div><label>Результат:</label><input type="text" name="result" placeholder="Ответ"/></div>
</form>
</body>
</html>
Не забываем подключить файл стилей, JQuery библиотеку и файл с нашим будущим скриптом.
Далее запишем стили для нашего калькулятора - выравняем всё по центру, закруглим углы у полей, выделим кнопку Расчета и так далее:
input {
outline:none;
}
div {
margin:10px 0;
text-align:center;
}
div label {
margin:0 10px 0 0;
}
div input[type=text] {
padding:6px 10px;
border-radius:10px;
border:1px solid #000033;
}
div input[type=button] {
padding:6px 10px;
border-radius:10px;
font-size:16px;
border:1px solid #000033;
cursor:pointer;
}Далее запишем сам скрипт, который будет рассчитывать результат:
$(document).ready(function() { // Ждём загрузки страницы
$("input[name=send]").click( function () { // Событие нажатия на кнопку "Расчёт"
var action = $("select[name=action]").val(); // Получаем значение действия, которое нужно выполнить
var first = $("input[name=first]").val() * 1; // Переменная первого числа
var second = $("input[name=second]").val() * 1; // Переменная второго числа
var result; // Переменная результата
if (action == '+') { // Если действие - сложение
result = first + second; // складываем
}
else if (action == '-'){ // Если действие вычитание
result = first - second; // вычитаем
}
else if (action == '*'){ // Если действие умножение
result = first * second; // умножаем
}
else if (action == '/'){ // Если действие деления
result = first / second; // делим
}
$("input[name=result]").val(result); // записываем результат
});
});Тут стоит обратить внимание на 4 и 5 строки - в которых мы получаем значение чисел, над которыми производим расчеты и умножаем их на единицу. Дело в том, что хоть в js нету описания явных типов, но когда мы получаем значения таким образом они считаются как строки (текст) и тогда наши вычисления будут неверными, для этого мы приводим переменные к числовому типу, умножая их на 1 (так это работает).
Ну и конечно же вы видите, что мы не делаем никаких проверок на то, числа ввёл пользователь или белеберду, деление на 0 и другие вещи, всё это при желании можно дописать, но цель этой статьи просто познакомить вас с возможностью создания калькулятора для расчета стоимости или обычного калькулятора.
Работающий пример вы можете посмотреть на Демо-странице:
Скачать результаты примера:
Добавить комментарий
Авторизоваться с помощью: