Вся документация построена по такому принципу сверху код html |
Снизу, то что будет отображаться на сайте. |
Пример формулы:
<span class="dxcalc">i1=100</span> |
i1=100 |
dxcalc
— зарезервированное имя класса, в нем всегда находится одна формула. Ничего кроме формулы в данном классе находиться не может. Если формула будет находиться в другом классе, она не будет включена в расчет.
Имя i1
можно использовать в других формулах, как у Excel ячейки.
<span class="dxcalc">i2=i1 + 100</span> |
i2=i1 + 100 |
Круглые скобки, определяют порядок действий.
<span class="dxcalc">i3=i2 * (i1-50)</span> |
i3=i2 * (i1-50) |
Операторы в формуле стандарные:
+ сложение
- вычитание
* умножение
/ деление
Возможно использовать математические функции JavaScript, например функция pow возведение в степень или sqrt квадратный корень
<p class="dxcalc">i4=Math.pow(2,3)</p> <p class="dxcalc">i5=Math.sqrt(i4)</p> |
i4=Math.pow(2,3) i5=Math.sqrt(i4) |
Формула всегда начинается с буквы плюс цифра, например i10
. Цифра — это идентификатор, как имя ячейки в Excel. Пробел между i и цифрой приведет к ошибке. В остальной формуле пробелы на важны, можно ставить их можно нет, как вам удобнее
Формулы будут обрабатываться только внутри класса dxcalc
. Поэтому, кроме формул там ничего не должно быть. Вообще формулы могут находиться в любом теге html. Кроме тега span, можно использовать практически любые теги, например:
<p class="dxcalc">i7=12.1</p> |
i7=12.1 |
<ul> <li class="dxcalc">i8=i7 + i4</li> </ul> |
|
<table class="table table-bordered"> <tr> <td>Значение</td> <td class="dxcalc">i9=1 / 3</td> </tr> </table> |
||
|
По умолчанию выводятся два знака после запятой. Если необходимо изменить это правило в конце формулы пишут //
и указывают количество знаков после запятой. Например
<p class="dxcalc">i10=123.123</p> |
i10=123.123 |
<p class="dxcalc">i11=123.123//0</p> |
i11=123.123//0 |
<p class="dxcalc">i12=123.123//1</p> |
i12=123.123//1 |
Расчеты производятся с максимальной точностью — округление происходит только при выводе результатов. Поэтому, как i1
равнялось 123.123
, так оно и будет равнятся этому значени не зависимо от количества знаков вывода после запятой.
В дополнении к стандартным функциям пакет включает в себя встроенные функции. Эти функции позволят упростить расчеты.
Сложить от iN до iM, включительно. Например, что бы не писать i14=i1+i2+i3+i4
<span class="dxcalc">i14=sum(i1,i4)</span> |
i14=sum(i1,i4) |
Вместо i
пишем g
и получаем ввод целых чисел. Пример.
<p class="dxcalc">g1=20</p> |
g1=20 |
g1
можно использовать в формулах. Пример.
<p class="dxcalc">i15=i1 - g1</p> |
i15=i1 - g1 |
Данные меняются сразу при изменении числа в поле ввода.
После загрузки страницы, скрипт заменит g
на тег
<input type="text" class="sp_get_input">
Определите стиль sp_get_input
по вашим требованиям.
RadoiButton используется для ввода числовых данных и применения их в расчете.
Выберите материал<br> <span class="dxcalc">r1=1</span>Китайский<br> <span class="dxcalc">r1=10//on</span>Немецкий<br> <span class="dxcalc">r1=100</span>Марсианский<br> |
Выберите материал r1=1Китайский r1=10//onНемецкий r1=100Марсианский |
Если мы хотим сделать кнопку активной, то в конце пишем, через //
, директиву on
r1
— переменные, для подстановки в формулу.
Наценка за материал<br> <span class="dxcalc">i18=r1</span> |
Наценка за материал i18=r1 |
Используется для вывода флажков на страницу и применения их в расчете.
Что будете пить?<br> <span class="dxcalc">b1=1</span>% Пиво 5%<br> <span class="dxcalc">b2=1</span>% Вино 12%<br> <span class="dxcalc">b3=1//on</span>% Водка 40% |
Что будете пить? b1=1% Пиво 5% b2=1% Вино 12% b3=1//on% Водка 40% |
b1
— переменная, для подстановки в формулу. Если мы хотим сделать чекбокс с галочкой, то в конце пишем //on. Если b1 c галочкой, то он приобретает значение, указанное после знака равно. Иначе в расчетах используется ноль.
Используется для выпадающего списка и применения его данных в расчете.
Выберите материал 2<br> <span class="dxcalc">s1=Немецкий//10;Китайский//1;Марсианский//100</span> |
Выберите материал 2 s1=Немецкий//10;Китайский//1;Марсианский//100 |
Наценка за материал 2<br> <span class="dxcalc">i19=s1</span> |
Наценка за материал 2 i19=s1 |
i20= УСЛОВИЕ ? A : B
Если Условие
истина (больше нуля), то i20
будет равно A
, а если Условие
ложь (0), то i20
будет равно B
.
Например, стоимость 1 кв. метра плитки в зависимости от объема
До 10 кв. м - 100 руб.<br> Свыше 10 кв. м - 90 руб.<br> Введите кол-во квадратов<br> <span class="dxcalc">g2 = 11</span></br> <span class="dxcalc">i20 = g2 > 10 ? 90: 100</span> |
До 10 кв. м - 100 руб. Свыше 10 кв. м - 90 руб. Введите кол-во квадратов g2 = 11 i20 = g2 > 10 ? 90: 100 |
Бывает и так, что существует ряд промежуточных значений, которые не нужно отображать на экране. Тогда их можно поместить в невидимый слой. Расчеты будут продолжаться, но не будут отображаться на странице. Вместо style="display:none"
лучше конечно указать еще один класс, например так
<span class="dxcalc invisible">i23= (i3*22) / 5</span> <span class="dxcalc">i24= i23+100</span> |
i23= (i3*22) / 5 i24= i23+100 |
На странице может присутствовать такая конструкция:
<a href="" id="link_to_calc">Ссылка на расчет</a> |
Ссылка на расчет |
Скрипт сам сформирует URL и автоматичеспи пропишет в ссылке текущие параметры. Ссылка будет хранить текущее состояние расчетов. Если по этой ссылке загрузить страничку, то расчет восстановится в том виде, в котором он был, со всеми введенными пользователем параметрами, таким образом пользователи могут передавать друг другу готовый расчет.
Оформляется в виде скрытого hidden поля link
в форме заказа. URL изменятся каждый раз, когда меняется хоть одна цифра.
<form > <p><input name="link" type="hidden" value="" > <p><input name="fio" class="form-control" type="text" placeholder= "ФИО"></p> <p><input name="email" class="form-control" type="text" placeholder= "Email"></p> <p><button>Заказать</button></p> </form> |
Обработка ошибок выполняется в два этапа. Этап синтаксического анализа и этап выполнения. На этапе синтаксического анализа все выражения, в которых обнаружены ошибки выводятся красным прямо в тело html. На этапе выполнения, ошибки выводятся в виде alert сообщения.
Посмотрите Примеры использования.Посмотрите код этих страничек. Там есть все конструкции, которые используются в скрипте.
Конечно, далеко не все задачи могут быть решены с помощью данного калькулятора. Обращайтесь