DixiCalc документация

Наглядные расчеты прямо на сайте — простая, универсальная электронная таблица он-лайн или Excel на сайте.

Формулы

Вся документация построена по такому принципу сверху код 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>
  • i8=i7 + i4
<table class="table table-bordered">
 <tr>
 <td>Значение</td>
 <td class="dxcalc">i9=1 / 3</td> 
 </tr>
</table>
Значение i9=1 / 3

Точность

По умолчанию выводятся два знака после запятой. Если необходимо изменить это правило в конце формулы пишут // и указывают количество знаков после запятой. Например

<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, так оно и будет равнятся этому значени не зависимо от количества знаков вывода после запятой.

Встроенные функции

В дополнении к стандартным функциям пакет включает в себя встроенные функции. Эти функции позволят упростить расчеты.

sum(iN,iM)

Сложить от 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 по вашим требованиям.

Radio

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

Сheckbox

Используется для вывода флажков на страницу и применения их в расчете.

Что будете пить?<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 галочкой, то он приобретает значение, указанное после знака равно. Иначе в расчетах используется ноль.

Select

Используется для выпадающего списка и применения его данных в расчете.

Выберите материал 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>
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 сообщения.

Заключение

Посмотрите Примеры использования.Посмотрите код этих страничек. Там есть все конструкции, которые используются в скрипте.

Конечно, далеко не все задачи могут быть решены с помощью данного калькулятора. Обращайтесь

DixiCalc — он-лайн расчеты на сайте Excel на JavaScript.