Как сделать калькулятор на сайт на JQUERY. Учимся писать скрипты.
HTML-код
- Опубликовано: 18 дек 2024
- Как сверстать калькулятор на landing page или на полноценный сайт? Если вы до сих пор не знаете ответа на этот вопрос - посмотрите этот видео-урок.
Разберем, как сделать простой калькулятор на JQuery на примере сайта печатного салона.
Ссылка на архив из видео-урока:
yadi.sk/d/I2pW...
Понравилось? Жми goo.gl/yC8UKF
----------------------------------------------------------------------------------------------------------------
Получить нужные материалы для любого веб-разработчика - taplink.cc/glo...
Получить консультацию куратора - bit.ly/2Ym5SqS
Связаться с автором: aislam23 telegram: t.me/aislam23
Мой блог: islamov...
Больше контента в нашей группе Вконтакте
glo_aca...
Присоединяйтесь к нашему сообществу Discord
/ discord
Мой канал в telegram "Лысый из браузера"
tele.click/bal...
Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
vk.me/glo_academy
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma...
ttttt.me/figma...
ttttt.me/figma...
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codep...
ttttt.me/css_f...
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkf...
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
Такого классного объяснения я еще не слышал! И дурак поймет. Было бы супер, если бы Вы сделали курс по Javascript для начинающих. Можно даже платный. Ваш курс бы я купил без размышлений! Лайк и подписка!
Спасибо!
Все четко и понятно. По вашему объяснению, понял что к чему относится с первого раза.
Больше бы таких видео на конкретных примерах. И поиск багов онлайн тоже смотреть познавательно. Спасибо!
Понравилось. Все подробно, доступно и понятно. Грамотная речь, хорошее изложение. И, несмотря на длительный урок - не утомляет. Короче лайк подписка и благодарность за волонтерскую деятельность.
Но в конце урока появляется ощущение какой-то незавершенности. Тычешь в тираж, бумагу, стиль… И не понимаешь. Дорого это и насколько? Поэтому просто напрашивается еще одна цифра - стоимость одной визитки. Делов то - всего пару строк кода. Можно было бы и дополнить. Задача несложная и пусть это будет домашним заданием для слушателей. Правда, там нужно применить метод toFixed() для округления. Для начинающих было бы полезно объяснить его применение.
Вы отлично обьясняите , хотелось бы по больше примеров с использования различных методов
Только после вашего урока, я понел как работает $ - спасибо!!!
Все очень доступно и понятно. Спасибо. Буду пробовать на практике.
Лысый из браузера :D
Блин, круто, очень все понятно и речь хорошая) однозначно лайк и подписка)
Клас. Спасибо за такое супер-объяснение. Сегодня просмотрел. Завтра буду внедрять на своем сайте что-то похожее.
Спасибо. Мне помогли. Немножко переделал, но суть что он работает это круто
Лучший в деле за работой ! Вот кто Батя !
Браво! Доступно, легко излагаешь.
Спасибо!!! для новичка все понятно!!!
на счет осуждать, есть конечно недоработки типа, округление до 2 знаков после запятой нужно, и то что в js принято называть переменные "вотТакВот", а не "вот-так-вот", но в целом урок качественный. Мне понравилось, спасибо автору
Ваши замечания уместны. Хотел поделится информацией с остальными, поэтому и записал урок. Видео уже можно считать устаревшим. Хвосты по JS подтянуты, переменные называются нормально и NaN теперь не "ошибка". Всегда есть недочеты, которые хочется исправить потом, когда уже выложил видео, но этого сделать нельзя. Еще раз спасибо за обратную связь)
Подскажи пожалуйста как результат округлить до 2 знаков после запятой?
гуглите javascript Math.round или почитайте тут developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/round
numObj.toFixed([digits])
123.4567890.toFixed(2) // 123.46
Заметь, что в данном примере 2 знак будет округлен.
Артем, спасибо!!! Мега полезный урок!!!
В такой рутине Еще бы помог навык пользования Excel. Там можно путем конкатенации строк и прочих плюшек быстрее теги формировать. Вообще в таких делах вот такой вот файлик от заказчика просто подарок судьбы. Очень сокращает объяснение на пальцах
Вы молодец. Все очень подробно
Здравствуй, очень интересно и подробно разъясняешь, спасибо тебе. Продолжай в том же духе.
Хотелось бы больше кода, очень хорошо во время кодинга доносись то что делаешь. Редкость на самом деле.
Заметил что тебе часто приходиться копировать одно и тоже. Попробуй приложение Clipdiary.
Раз изначально в селектах есть значения. Нужно функции, которая запускает весь код, при изменении селектов, дать имя. И вызвать эту функцию. Или просто написать итоговую цену под эти параметры, вместо нуля. Как то так)
Поправьте меня, если я что-то не понял. Но весь скрипт расчета сработает только если в первом поле "тираж" я изменю значение и таким образом приведу в действие функцию (change). Но если меня как клиента устраивает тираж в 150, который выставляется в дефолт как первое значение. И буду менять только бумагу... Тогда функция не сработает же.. Не правильнее ли будет в условие функции передавать ИЛИ. Чтобы функция срабатывала на изменения любых полей. Плюс в спан изначально выставить не ноль, а цену за дефолтные (первые) параметры селектов.
В
добавим еще одну опцию:
0
а в скрипте при выводе информации на экран делаем условие , по которому $edition при значении "0" в селекторе, результатом расчёта будет "0" рублей:
if ($edition!= 0) {
$('span#final_price').text($price);
}
else{
$('span#final_price').text('0');
}
Коль уж скоро при загрузке страницы какие-то опшены сразу выбраны, следовало бы написанную вами функцию было бы вызвать сразу в документ рэди. В остальном, хорошо объяснили. ))
Вообще молодца!!! Просто красава.
Спасибо Артем, очень полезное видео
огромное спасибо, то что нужно, прям как доктор прописал
и вот такое пожелание, если будет время не могли бы записать видео, как это калькулятор натянуть на форму обратной связи, чтоб данные с калькулятора отправлялись на почту, или может совет какой?
заранее спасибо
спасибо, очень понятно и доходчиво
Подскажи по поводу скрипта в html-доке, когда его лучше подключать как отдельный, а когда лучше писать прямо в файле-html ?
Отличный урок!
Ты красавчик! Молодец.
зачем в последнем селекте плодить дата атрибут, если тоже самое можно в value прописать, потому что в данном случае value дублирует то, что находится между тэгами option
2. когда идет проверка только 1 значения, то целесообразнее использовать switch вместо if, тк он более производительнее
Очень помог, спасибо автор!
Сколько будет стоить заказать калькулятор у Вас?
Скажите, пожалуйста, как работать с checkbox. Задача такая: если выбран определенный chekbox со своим ценовым значение, то это цена должна "приплюсоваться" к общей стоимости. Всю голову уже себе сломал. Заранее благодарю!
Артём, сколько будет стоить калькулятор посложнее? (калькулятор услуг, возможно несколько калькуляторов в одном)
Вопрос такой, а что делать с данными в полях? т.е. например человек выбрал данные из первого поля, получается, остальные поля содержат первые данные из своих списков. Как можно скрыть данные из полей до нажатия пользователем на поле (для совершения выбора)?
Через скрипт присвоить им пустые значения value. В тексте довольно сложно описать)
блин. два дня не сплю не ем. не могу найти в jquery команды чтобы val() с пустым значением появлялся в нужном поле сразу, как пользователь всякий раз выбирал значение val() из другого поля.
В первый раз не пожалел, что потратил на просмотр видео целый час. Я понял как работают скрипты.
Спасибо за урок! Скажите, возможно ли посадить данный калькулятор на WP?
актуальный вопрос
Большое спасибо!
Про "браузер синк" не понял, можно подробнее?
Просто красавчик
на 48 минуте звук пропал...
Все на месте. Звук тоже.
48.04-48.38 еще раз проверила - звука нет...
Аналогично.
section#main>.container>.row>.col-sm-6*2 что вы нажали потом?
Tab. Я использую плагин emmet
Спасибо за уроки ) Если не сложно может кто нибудь подсказать у меня есть плагин WPCC - калькулятор на вордпресс там есть 2 переменные которые принимают значения и выводят их по нажатию кнопки вот 2 переменные $wpcc_sum $wpcc_result я хочу чтоб они выводились не по нажатию кнопки а сразу, как это сделать уже сутки голову ломаю)) если кто сталкивался с этим подскажите пожалуйста)
Люто плюсую ))
Спасибо
добавила кнопку на обнуление результата - чисто косметически, стало перегружать страницу.
$reset = jQuery('#reset-btn');
function resetCalc (){
$final_ratio = 0;
jQuery('span#final_ratio').text($final_ratio);
}
reset.onclick = resetCalc;
помогите, может ошибка, кот не вижу. А в общем, классное, понятное видео. 👍+👍+👍
Круто!
а где кнопка "отправить" ?
Здравствуйте, Артём. Спасибо за Ваши труды!
Посмотрела урок на одном дыхании. Вы лучший!
Жаль, что архив не скачивается yadi.sk/d/I2pWDxnwxyFss😕 Проверьте, пожалуйста.
пытался на атоме сделать сниппет. вот это мозгоклюйство - сначала еммет перехватывает табуляцию и атом не может вставить свои снипеты, пришлось поставить плагин специальный, потом давай вставлять сиппеты - ошибка. оказывается cson файл на строках должен иметь отспуты иначе его атом не может прочитать. а ведь начал урок и думал - ну щас за часок сделаю кулькулятор))
100000 лайков!
Работать в форточках - это грусть и печаль..
Хех 2 раза умножал на $final_edition
информация к размышлению: смотрю учебные материалы на англицком, понятно даже без перевода: мышкой не вертят по всему экрану, всё последовательно, неторопливо.
Glo Academy наблюдаю...
ахахахах))))))))))0 насмешил скрипт скрип скрипт скрипт
Очень затянуто. Зачем мне тут было слушать про эмиты, про саблайм, про календари (это можно было и вырезать). За 12 минут вообще ничего полезного, дальше не осилил
В ie8 не работает
в ie6 тоже не работает
кто на таких старых браузерах сидит?)
К сожалению сидят клиенты, за которых платишь деньги
В Netscape Navigator 1.0 по-моему тоже не работает?)) Чё делать?)
Только не любимые ИЕ
кальк
Спасибо