Создание простого скрипта "калькулятор услуг" (заплочу 150 рублей)
Вложений: 1
Нужен скрипт калькулятор с использованием несколько чекбоксов, многострочным списком, поле ввода чисел и подчитыванием итоговую сумму...
Например: ![]() Находил много скриптов, но все они неподойдут. Создайте, или подскажите как сконструировать такой калькулятор услуг, чтобы было понятно для копирования и добавления дополнительной услуг в калькулятор. Заплочу 150 рублей через qiwi кошелек тому, кто поможет мне создать. ;) |
Вот например я хотел сделать на подобе этого калькулятора, но неполучился(
<table> <tr> <td width="319">Выезд проектировщика-оценщика</td> <td align="center"><input type="checkbox" id="b1" /></td> </tr> </table> <table class="table" border="1"> <tr> <td width="319">Низкое давление - до 5 кПа (0,05 кгс/см2)</td> <td align="center"><input type="checkbox" class="platform" id="a1" /></td> </tr> <tr> <td>Среднее давление - до 0,3 мПа (3 кгс/см2)</td> <td align="center"><input type="checkbox" class="platform" id="a2" /></td> </tr> <tr> <td>Высокое давление - до 0,6 мПа (6 кгс/см2)</td> <td align="center"><input type="checkbox" class="platform" id="a3" /></td> </tr> <tr> <td>Высокое давление - до 1,2 мПа (12 кгс/см2)</td> <td align="center"><input type="checkbox" class="platform" id="a4" /></td> </tr> </table> <table> <tr> <td width="319">Рабочий проект</td> <td align="center"><input type="checkbox" id="d1" /></td> </tr> </table> <table> <tr> <td width="319">Получение тех.условие</td> <td align="center"><input type="checkbox" id="d2" /></td> </tr> </table> <table> <tr> <td width="319">Исполнительная Техническая Документация</td> <td><input type="checkbox" id="d3" /></td> </tr> <tr> <td width="246">Прокол через дорогу</td> <td><input type="checkbox" id="d4" /></td> </tr> <tr> <td>Сталь O 159</td> <td align="center"><input id="e1" class="numfield" maxlength="5" value="0" /></td> <td>метров</td> </tr> <tr> <td>Сталь O 57</td> <td align="center"><input id="e2" class="numfield" maxlength="5" value="0" /></td> <td>метров</td> </tr> <tr> <td>Сталь O 20</td> <td align="center"><input id="e3" class="numfield" maxlength="5" value="0" /></td> <td>метров</td> </tr> <tr> <td>Сталь O 15</td> <td align="center"><input id="e4" class="numfield" maxlength="5" value="0" /></td> <td>метров</td> </tr> <tr> <td>Полиэтилен O 32</td> <td align="center"><input id="e5" class="numfield" maxlength="5" value="0" /></td> <td>метров</td> </tr> <tr> <td>Выход труб из земли</td> <td align="center"><input id="e6" class="numfield" maxlength="5" value="0" /></td> <td>штук</td> </tr> <tr> <td>Котел</td> <td align="center"><input id="e7" class="numfield" maxlength="5" value="0" /></td> <td>штук</td> </tr> <tr> <td>Газовая плита</td> <td align="center"><input id="e8" class="numfield" maxlength="5" value="0" /></td> <td>штук</td> </tr> <tr> <td>Печь</td> <td align="center"><input id="e9" class="numfield" maxlength="5" value="0" /></td> <td>штук</td> </tr> <tr> <td>Водонагреватель (бойлер)</td> <td align="center"><input id="e10" class="numfield" maxlength="5" value="0" /></td> <td>штук</td> </tr> <tr> <td>Проход через стену</td> <td align="center"><input id="e11" class="numfield" maxlength="5" value="0" /></td> <td>штук</td> </tr> <tr> <td>Длина копки траншеи (м)</td> <td align="center"><input id="e12" class="numfield" maxlength="5" value="0" /></td> <td>метров</td> </tr> </table> <table class="table" border="1"> <tr> <td width="319">Счетчик G4 (0,04 м3/ч до 6,0 м3/ч)</td> <td align="center"><input type="checkbox" class="platform2" id="f1" /></td> </tr> <tr> <td>Счетчик G6 (6,0 м3/ч до 10,0 м3/ч)</td> <td align="center"><input type="checkbox" class="platform2" id="f2" /></td> </tr> <tr> <td>Счетчик G10 (10,0 м3/ч до 16,0 м3/ч)</td> <td align="center"><input type="checkbox" class="platform2" id="f3" /></td> </tr> <tr> <td>Счетчик G16 (16,0 м3/ч до 25,0 м3/ч)</td> <td align="center"><input type="checkbox" class="platform2" id="f4" /></td> </tr> <tr> <td>Счетчик G25 (25,0 м3/ч до 40,0 м3/ч)</td> <td align="center"><input type="checkbox" class="platform2" id="f5" /></td> </tr> </table> <table class="table"> <tr> <td width="319">ИТОГО:</td> <td id="total">0</td> <td>тенге</td> </tr> </table> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript"> var prices = {"a1":80,"a2":120,"a3":200,"a4":300,"b1":0,"d1":5,"d2":3,"d3":50,"d4":5,"e1":3,"e2":2,"e3":1,"e4":0.5,"e5":2,"e6":0.9,"e7":0.3,"e8":0.3,"e9":0.3,"e10":0.3,"e11":1,"e12":0.1,"f1":3,"f2":5,"f3":7,"f4":9,"f5":11}; $(document).ready (function() { $('input.platform').click (function() { if ($(this).attr ('checked')) { $('input.platform').attr ('checked', false); $(this).attr ('checked', true);} { $('input.platform2').attr ('checked', false); $(this).attr ('checked', true);} }); $('input.animation').click (function() { if ($(this).attr ('checked')) { $('input.animation').attr ('checked', false); $(this).attr ('checked', true); } }); $('input').click (function() { check_total(); }); $('.numfield').keyup (function() { var val = $(this).val().replace (/[^0-9]+/g, ''); $(this).val (val); check_total(); }).blur (function() { if ($(this).val() == '') { $(this).val (0); } }); check_total(); }); function check_total() { var sum = 0; $('input:checked').each (function() { sum += prices[$(this).attr ('id')]; }); $('.numfield').each (function() { sum += prices[$(this).attr ('id')] * $(this).val(); }) $('#total').html (number_format (sum * 1000, 0, '', ' ')); } function number_format (number, decimals, dec_point, thousands_sep) { number = (number + '').replace(',', '').replace(' ', ''); var n = !isFinite(+number) ? 0 : +number, prec = !isFinite(+decimals) ? 0 : Math.abs(decimals), sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, dec = (typeof dec_point === 'undefined') ? '.' : dec_point, s = '', toFixedFix = function (n, prec) { var k = Math.pow(10, prec); return '' + Math.round(n * k) / k; }; s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.'); if (s[0].length > 3) { s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep); } if ((s[1] || '').length < prec) { s[1] = s[1] || ''; s[1] += new Array(prec - s[1].length + 1).join('0'); } return s.join(dec); } </script> Пример: http://gumarika.ucoz.org/index/orien...ost_uslugi/0-6 Что то типа такого замутить... Ну можно например объединить 2 скрипта с исходном html в один скрипт, например тут: http://www.nakedart.ru/about-studio/calculator.html и тут + http://pnz.internet.it-consult.su/onlinecalculator.html тоесть соединить 3 типа расчета в один скрипт, в одну страничку)) 1) чекбокс (типа выбор услуг "да" или "нет" 2) многострочный список "несколько вариантов из данной услуги" 3) поле ввода чисел "колличество, штук" и общая сумма в поле ввода или на голой страничке... |
Нет, неполучаеться три типа расчета соединить в один расчет( неделю мучаюсь...неужели это невозможно?
...Или 150 рублей это не деньги?... |
От 1000 рублей стоит более-мение нормальный калькулятор.
За 150, извините, я даже код не буду прочитывать даже по диагонали. НО! Если попросить по-нормальному, без гонора, возможно кто-то и поможет. |
Кстати, с праздником всем женщинам!
Конечно, отличный вариант дал Наш сенсей "nasqad" ;) тоесть прописать вовсех инпутах именно одинаковый ID, это очень упрощает работу и очень удобно, но он что то не работает Я не мастер в JavaScript, но вышла синтактическая ошибка в скрипте на строке "summary += ($.isNumeric(temp) && $.isNumeric(this.value) ? temp*this.value : 0;" и заметил эту ошибку сам Dreamweawer CS5, да и после этой строки исходные коды как бы игнорируют...// HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Документ без названия</title> </head> <body> <table> <tr> <td width="319">Выезд проектировщика-оценщика</td> <td align="center"><input data-price="200" type="checkbox" id="calculation" /></td> </tr> </table> <table class="table" border="1"> <tr> <td width="319">Низкое давление - до 5 кПа (0,05 кгс/см2)</td> <td align="center"><input data-price="200" type="checkbox" class="platform" id="calculation" /></td> </tr> <tr> <td>Среднее давление - до 0,3 мПа (3 кгс/см2)</td> <td align="center"><input data-price="200" type="checkbox" class="platform" id="calculation" /></td> </tr> <tr> <td>Высокое давление - до 0,6 мПа (6 кгс/см2)</td> <td align="center"><input data-price="200" type="checkbox" class="platform" id="calculation" /></td> </tr> <tr> <td>Высокое давление - до 1,2 мПа (12 кгс/см2)</td> <td align="center"><input data-price="200" type="checkbox" class="platform" id="calculation" /></td> </tr> </table> <table> <tr> <td width="319">Рабочий проект</td> <td align="center"><input data-price="200" type="checkbox" id="calculation" /></td> </tr> </table> <table> <tr> <td width="319">Получение тех.условие</td> <td align="center"><input data-price="200" type="checkbox" id="calculation" /></td> </tr> </table> <table> <tr> <td width="319">Исполнительная Техническая Документация</td> <td><input data-price="200" type="checkbox" id="calculation" /></td> </tr> <tr> <td width="246">Прокол через дорогу</td> <td><input data-price="200" type="checkbox" id="calculation" /></td> </tr> <tr> <td>Сталь O 159</td> <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td> <td>метров</td> </tr> <tr> <td>Сталь O 57</td> <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td> <td>метров</td> </tr> <tr> <td>Сталь O 20</td> <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td> <td>метров</td> </tr> <tr> <td>Сталь O 15</td> <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td> <td>метров</td> </tr> <tr> <td>Полиэтилен O 32</td> <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td> <td>метров</td> </tr> <tr> <td>Выход труб из земли</td> <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td> <td>штук</td> </tr> <tr> <td>Котел</td> <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td> <td>штук</td> </tr> <tr> <td>Газовая плита</td> <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td> <td>штук</td> </tr> <tr> <td>Печь</td> <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td> <td>штук</td> </tr> <tr> <td>Водонагреватель (бойлер)</td> <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td> <td>штук</td> </tr> <tr> <td>Проход через стену</td> <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td> <td>штук</td> </tr> <tr> <td>Длина копки траншеи (м)</td> <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td> <td>метров</td> </tr> </id> </table> <table class="table" border="1"> <tr> <td width="319">Счетчик G4 (0,04 м3/ч до 6,0 м3/ч)</td> <td align="center"><input data-price="200" type="checkbox" class="platform2" id="calculation" /></td> </tr> <tr> <td>Счетчик G6 (6,0 м3/ч до 10,0 м3/ч)</td> <td align="center"><input data-price="200" type="checkbox" class="platform2" id="calculation" /></td> </tr> <tr> <td>Счетчик G10 (10,0 м3/ч до 16,0 м3/ч)</td> <td align="center"><input data-price="200" type="checkbox" class="platform2" id="calculation" /></td> </tr> <tr> <td>Счетчик G16 (16,0 м3/ч до 25,0 м3/ч)</td> <td align="center"><input data-price="200" type="checkbox" class="platform2" id="calculation" /></td> </tr> <tr> <td>Счетчик G25 (25,0 м3/ч до 40,0 м3/ч)</td> <td align="center"><input data-price="200" type="checkbox" class="platform2" id="calculation" /></td> </tr> </id> </table> <table class="table"> <tr> <td width="319">ИТОГО:</td> <td id="calculation">0</td> <td>тенге</td> </tr> </table> </body> </html> В этот HTML исходник вдул этот код javascript: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script> var elements = $('#calculation > input').change(function() { var summary = 0; elements.each(function() { var temp, tag = this.tagName; if(tag = 'select') { temp = $(':selected', this).attr('data-price'); summary += $.isNumeric(temp) ? +temp : 0; } else if(tag = 'checkbox') { temp = $(this).is(':checked') && $(this).attr('data-price'); summary += $.isNumeric(temp) ? +temp : 0; } else if(tag = 'input') { temp = this.value && +this.value > 0 && $(this).attr('data-price'); summary += ($.isNumeric(temp) && $.isNumeric(this.value) ? temp*this.value : 0; } //"select" == tag ? (temp = $(":selected", this).attr("data-price"), $.isNumeric(temp)) : "checkbox" == tag ? (temp = $(this).is(":checked") && $(this).attr("data-price"), $.isNumeric(temp)) : "input" == tag && (temp = this.value && 0 < +this.value && $(this).attr("data-price"), $.isNumeric(temp) && $.isNumeric(this.value)); }); alert(summary); }) </script> И если получиться, то я сомневаюсь, что будет работать 3 тип расчета: "многострочный список "несколько вариантов из данной услуги"" так как все ID одинаковые... Может кто нибудь сможет разобраться в яваскрипте? если получиться, то я вставлю всё на сайт менять буду только HTML код. |
Так и не удовлетворен ответом(
|
Цитата:
500р, нормальный скриншот или ссылка на таблицу, в которой нужно произвести расчёт (если интересно, пишите в личку) |
p.s. нельзя задавать элементам один и тот же id. На странице каждый id должен быть уникальным
|
Часовой пояс GMT +3, время: 23:28. |