slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна4 / 5
 
Автор: Администратор
Просмотров: 27233
Теги: javascript, jQuery, калькулятор, calculate

В этой статье мы расскажем о том, как сделать простейший калькулятор расчета значений.

Вы наверняка видели на некоторых сайтах формы, предлагающие рассчитать стоимость услуг - вставка пластиковых окон, покрытие пола, ремонт машины и так далее.

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

Работающий пример вы можете посмотреть на Демо-странице:

demo

Скачать результаты примера:

download

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    6.00
  • Varvarka
    4.00
  • ZOMRO
    3.20
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Как подключить на свой сайт jQuery

Для многих новичков в создании сайтов непонятно, что же такое JQuery, хоть они и постоянно слышат о нем и даже возможно пользовались.

Как мы знаем есть язык JavaScript, который позволяет работать динамически с элементами на странице и делать страницу более привлекательной.

Теги:

javascript, jQuery, google, jquery.min

Комментариев: 0 Подробнее
Ajax-форма обратной связи на JQuery

В этой статье мы расскажем о том, как сделать форму с ajax-запросом, при помощи библиотеки jQuery. Другими словами, чтобы страница не перезагружалась, при отправке данных через форму.

Теги:

javascript, form, jQuery, ajax, onclick

Комментариев: 0 Подробнее
Увеличение изображения при нажатии на него.

В этой статье мы расскажем о том, как сделать модальное окно с увеличенным изображением.

Теги:

javascript, img, jQuery

Комментариев: 0 Подробнее

Последнее с форума

Urii-Polyakov-odnoklassniki аватар
Мы – команда разработчиков, дизайнеров и SEO-специалистов, которая любит свое дело и умеет создавать...
Перейти в тему
ZOMRO аватар
Оптимальные VDS/VPS Это сбалансированное предложение в соотношение цена-качество-количество ресурсо...
Перейти в тему
ZOMRO аватар
Скидка 50% на первый месяц Хотите получить уникальную скидку 50% на первый месяц пользования нашим ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.