Содержание
- 1 Готовые виджеты калькуляторов
- 2 Детали реализации
- 3 Кнопки для калькулятора и оформление.
- 4 Оформление гипертекстовой разметки
- 5 JavaScript код
- 6 HTML файл:
- 7 Как установить калькулятор на сайт
- 8 Вперед! Работай!
- 9 Компилятор vs Интерпретатор
- 10 JavaScript файл:
- 11 Превратим набор элементов во что-то стоящее
- 12 Пример простого калькулятора для сайта на PHP + JS
- 13 Вывод:
Готовые виджеты калькуляторов
Дабы себе еще больше упростить жизнь, предлагаю альтернативу в виде использования специальных модулей, которые избавят от всех хлопот по созданию и установке калькулятора на страницах сайта.
В сети сейчас появилось огромное множество специальных сервисов и онлайн форм, которые предоставляют услуги по настройке и добавлению таких счетчиков на сайт.
Лично я привык работать только с проверенными проектами и поэтом для одного из своих сайтов скачал калькулятор через онлайн магазин WordPress — WP-R.ru
Переходим в раздел «Плагины» и выбираем «Калькулятор мер и весов» через кнопку купить или название продукта.
На следующей странице смотрим пример работы модуля, описание функций.
Возможности CoWaM:
- Удобный поиск
- Настройка дизайна
- Адаптивная верстка
- Мультиязычность
Если все устраивает жмем «Купить» и в специальной форме указываем домен сайта, адрес электронной почты.
Далее к вам на почту придут данные для входа в личный кабинет пользователя, и реквизиты для оплаты продукта (WebMoney, Яндекс.Деньги) и ссылка для скачивания.
Если вы захотите установить сразу модуль, то в его настройках увидите сообщение для ввода лицензионного ключа.
Лицензию получите в ЛК после подтверждения оплаты.
После активации вам будут доступны все функции калькулятора CoWaM и вы сможете его внедрить как на страницах сайта, так и в любом другом месте.
- Вывод через стандартные виджеты;
- Вывод внутри страниц и записей с помощью шорткода;
- Вывод внутри любого файла темы через специальный код.
Как видите, даже без использования настроек плагина, а их не мало, он здорово вписался в мой шаблон, стабильно работает, адаптивен под мобильники и не надо ковыряться в кодах и что-то править на сайте.
Установка заняла считанные минуты.
На этом у меня все, надеюсь этот пост поможет вам улучшить свои сайты на только в глазах поисковых систем, но и сделать их полезней для посетителей.
Кстати, сообщение от Яндекса через пару дней пропало. Наверное был сбой в работе алгоритмов. ))
Детали реализации
• Определение кнопок через класс или id:
PHP
var name_variable = document.querySelectorAll(‘.name_class’), name_element = document.getElementById(‘id_element’);
1 2 |
varname_variable=document.querySelectorAll(‘.name_class’), name_element=document.getElementById(‘id_element’); |
• Обработчики событий на кнопки:
PHP
name_variable.addEventListener(‘click’, name_eventHandler); name_variable.addEventListener(‘click’, function (e) { //обработка события //е – элемент события });
1 2 3 4 5 |
name_variable.addEventListener(‘click’,name_eventHandler); name_variable.addEventListener(‘click’,function(e){ //обработка события //е – элемент события }); |
• Все свойства элемента можно вывести в консоль:
PHP
console.log(e);
1 | console.log(e); |
o Свойство для распознавания кнопки:
PHP
e.srcElement.id
1 | e.srcElement.id |
o Свойство для получения текста кнопки:
PHP
e.target.textContent
1 | e.target.textContent |
• Общие структуры функций:
o Функция, которая отражает введенное число на экране калькулятора:
PHP
function numberPress (number) { if (условие) { //ввод нового значение и меняем значение флага} else { if (условие) { //стирает 0 с дисплея} else { //добавляет цифру к числу на экране} } };
1 2 3 4 5 6 7 |
functionnumberPress(number){ if(условие){//ввод нового значение и меняем значение флага} else{ if(условие){//стирает 0 с дисплея} else{//добавляет цифру к числу на экране} } }; |
o Функция обработки операций калькулятора и вывода результата:
PHP
function operation (op) { //создаем локальную переменную памяти if (условия) { //сохраняем значение на экране в переменную памяти} else { //говорим переменной памяти о том, что мы вводим новое число} if (условие с +) { //выполнение операции} else if (условие с -) { //выполнение операции} else if (условие с *) { //выполнение операции} else if (условие с /) { //выполнение операции} else { //действия с глобальной и локальной памятью}; //вывод результата //сохранение текущей операции };
1 2 3 4 5 6 7 8 9 10 11 12 |
functionoperation(op){ //создаем локальную переменную памяти if(условия){//сохраняем значение на экране в переменную памяти} else{//говорим переменной памяти о том, что мы вводим новое число} if(условиес+){//выполнение операции} elseif(условиес-){//выполнение операции} elseif(условиес*){//выполнение операции} elseif(условиес){//выполнение операции} else{//действия с глобальной и локальной памятью}; //вывод результата //сохранение текущей операции }; |
!Функция преобразования строки к числу с плавающей точкой parseFloat().
o Функция добавления десятичной точки:
PHP
function decimal (argument) { //создаем локальную переменную if (условие) { //добавляем 0.} else { if (условие) { //если не существует символа ‘.’ в строке – добавляй точку }; }; };
1 2 3 4 5 6 7 |
functiondecimal(argument){ //создаем локальную переменную if(условие){//добавляем 0.} else{ if(условие){//если не существует символа ‘.’ в строке – добавляй точку }; }; }; |
o Функция обработки кнопок очищения C и СЕ:
PHP
function clear (argument) { if (условие с се) { //удаление введённого числа с дисплея} else if (условие с с) { //очищения дисплея }; };
1 2 3 4 |
functionclear(argument){ if(условиессе){//удаление введённого числа с дисплея} elseif(условиесс){//очищения дисплея }; }; |
o Функция вывода списка функций калькулятора — «Как это работает?»
PHP
function howWork (argument) { //новый элемент списка for (по операциям) { //добавление в элемент списка текста //вставка в лист элемента }; };
1 2 3 4 5 6 7 |
functionhowWork(argument){ //новый элемент списка for(пооперациям){ //добавление в элемент списка текста //вставка в лист элемента }; }; |
Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш LoftBlog!
Кнопки для калькулятора и оформление.
Кнопка будет иметь уникальный селектор идентификатора + внутри будет — событие «onclick»
<button id=»id_уникальный» onclick=»foo_уникальный()»>уникальный</button>
css кнопки:
Общее для всех кнопок:
Позиция absolute,ширина — 75px, высота — 49px, высота шрифта — 21px,
button {
position: absolute;
width: 75px;
height: 49px;
font-size: 21px;
}
И поведение при наведении сделаем простой бордюр чуть потемнев…
button:hover {
border: 1px solid #888c90;
}
Позиционируем первую левую снизу кнопку плюс+минус
button#id_pl_mi {
margin-top: -60px;
margin-left: 7px;
}
Результат:
±
Следующие 3 кнопки будет отличаться названием после селектора «#» и позицией по горизонтали(margin-left + 80px к предыдущему.
Следующие полоски будут подниматься относительно каждой полоски по вертикали(margin-top + 53px
Оформление гипертекстовой разметки
Изначально для приложения «Калькулятор» необходимо задать разметку элементов и сразу назначить обработчики событий. Для этого лучше всего использовать таблицу. Поскольку в коде будет множество инпутов, то потребуется и форма.
Поэтому создаем форму с именем «Calculation». В нее вписываем таблицу, которая будет содержать 5 строк и 5 столбцов. Первая строка табличного представления будет занята текстовым полем ввода. А далее разместим кнопки с цифрами, арифметическими операциями, знаком «равно», сбросом последнего введенного числа (CE) и полным сбросом .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<form name="Calculation" action=""> <table class="Table" cellpadding="2" cellspacing="2"> <tr> <td colspan=5 align=middle> <input id="TextEdit" name="ReadOut" type="Text" size=28 value="0" width="250px"> </td> </tr> <tr> <td><input name="btnSeven" type="Button" value="7" onclick="PressedNum(7)"></td> <td><input name="btnEight" type="Button" value="8" onclick="PressedNum(8)"></td> <td><input name="btnNine" type="Button" value="9" onclick="PressedNum(9)"></td> <td><input name="btnClear" type="Button" value="C" onclick="Clear()" /></td> <td><input name="btnClearEntry" type="Button" value="CE" onclick="ClearEntry()" /></td> </tr> <tr> <td><input name="btnFour" type="Button" value="4" onclick="PressedNum(4)"></td> <td><input name="btnFive" type="Button" value="5" onclick="PressedNum(5)"></td> <td><input name="btnSix" type="Button" value="6" onclick="PressedNum(6)"></td> <td><input name="btnPlus" type="Button" value="+" onclick="Operations('+')" /></td> <td><input name="btnMultiply" type="Button" value="*" onclick="Operations('*')" /></td> </tr> <tr> <td><input name="btnOne" type="Button" value="1" onclick="PressedNum(1)"></td> <td><input name="btnTwo" type="Button" value="2" onclick="PressedNum(2)"></td> <td><input name="btnThree" type="Button" value="3" onclick="PressedNum(3)"></td> <td><input name="btnMinus" type="Button" value="-" onclick="Operations('-')" /></td> <td ><input name="btnDivide" type="Button" value=" / " onclick="Operations('/')" /></td> </tr> <tr> <td><input name="btnZero" type="Button" value="0" onclick="PressedNum(0)"></td> <td colspan="2"><input id="WideBtn" name="btnEquals" type="Button" value="=" onclick="Operations('=')"></td> <td></td> <td></td> </tr> </table> </form> |
JavaScript код
Переходим к самому интересному — созданию JavaScript-кода для калькулятора. В своем примере я использовал JavaScript + jQuery.
Последний применил только из-за удобства манипуляции с DOM. Недавно узнал о существовании библиотеки Underscore.js как альтернативы jQuery, но меньшего размера. Надо опробовать Underscore.js обязательно! )
Первым делом инициализируем кнопки калькулятора. Для этого забираем значения из атрибута кнопок и динамически вставляем в HTML-разметку:
Исходный вид калькулятора подготовили — он теперь выглядит как настоящий калькулятор! Если не принимать во внимание кошмарных цветов и их сочетания ) Ну мы не дизайнеры, нам простительно )
Теперь стоит задача — при нажатии на кнопку калькулятора чтобы ее значение появлялось в окошке последнего. Тоже ничего сложного, если подумать.
Просто нужно забрать у активной кнопки значение ее атрибута и передать как значение элемента .
Небольшая тонкость здесь — нужно конкатенировать текущее значение элемента с текущим значением элемента ; иначе будет происходить простое замещение предыдущего значения элемента текущим значением элемента :
Полная очистка экрана калькулятора элементарно проста — достаточно при нажатии на соответствующую кнопку передать в элемент пустое значение:
Дальше уже немного интереснее — будем оживлять кнопку . То есть — ввели в окошко калькулятора, к примеру, . По нажатии на кнопку в окошке должен появиться результат этой арифметической операции.
На помощь приходит функция JavaScript под названием . На javascript.ru эта функция подробно расписана.
В результате код для “оживления” кнопки будет выглядеть “скромно”:
Наш калькулятор почти готов. Осталось добавить жизни к двум последним кнопкам — возведения в степень и посимвольной очистки экрана калькулятора.
Для возведения в степень воспользуемся стандартной JavaScript-библиотекой и ее методом .
Заберем у элемента его текущее значение и передадим в качестве одного из аргументов в метод . Второй аргумент в нашем случае — это константа 3:
Последний шаг к успеху создания калькулятора — это “оживление” кнопки посимвольной очистки экрана калькулятора.
В этом случае воспользуемся стандартным методом JavaScript — . Это метод JavaScript(), который извлекает из строки подстроку и возвращает ее в виде новой строки — почитать с примерами.
В качестве аргументов принимает два параметра — начальную и конечную позицию, которые выступают как начальный и конечный индекс массива. Массивом в данном случае является строка.
Функция (на кнопке посимвольной очистки) в нашем случае будет работать так — забираем у элемента его текущее значение. Значение возвращается в виде строки, конечно.
Поэтому находим ее длину () и укорачиваем на один (последний) символ — . Таким образом мы динамически укорачиваем текущее значение в окне калькулятора на один символ.
Затем нам нужно заменить текущее значение окна калькулятора укороченным на один символ значением. Для этого берем метод и с помощью него “обрезаем” текущую строку; этот метод возвращает “обрезанный” вариант. Нам осталось только вставить его в окно калькулятора.
Результат будет выглядеть таким образом:
Вот наш калькулятор и готов — ниже полный JavaScript-код:
Конечно, примеры кода из этой статьи хоть и не являются укороченными, но не дают полного представления о разрабатываемом нами калькуляторе.
Поэтому привожу ссылку на готовый вариант калькулятора, который создавался в этой статье. На CodePen можно его посмотреть и разобрать детально (при желании).
Как вариант для сравнения, можно взглянуть на более сложный пример создания калькулятора, на чистом JavaScript. Пример был найден мною на просторах CodePen.
HTML файл:
Для начала как всегда начнём с HTML страницы и тут конечно не чего сложного нет.
XHTML
1 2 3 4 5 6 7 8 |
<p>number 1<input type=»text»id=»n1″></p> <p>number 2<input type=»text»id=»n2″></p> <button onclick=»plus()»>+</button> <button onclick=»minus()»>-</button> <button onclick=»multiplication()»>X</button> <button onclick=»division()»></button> <hr> <p>Result: <span id=»out»></span></p> |
Вот такой, совсем короткий HTML получается, кратко расскажу о нём.
Атрибут , это событие клика мыши на элемент, в параметрах задаётся функция, которая будет запускаться при клики на элемент, это в принципе всё что нужно знать.
Как установить калькулятор на сайт
Весь принцип работы калькулятора завязан на выполнении скрипта, поэтому каким-то из способов надо добавить скрипт на страницу записи WordPress.
Сразу скажу, что если тот код что был создан выше закинуть в текстовый редактор записи, то ничего работать не будет, форма калькулятора отобразится, но вот расчет значений не произойдет.
В сети я нашел несколько путей как подключить JS скрипты к записям:
Шорткод. Данный способ основан на редактировании файла темы functions.php.
Здесь вам придется между < ?php … ? > вставить специальный код:
function myJavascript1(){ $str='<script type="text/javascript">КОД</script>'; return $str; } add_shortcode( 'myJavascript1', 'myJavascript1'); |
где вместо КОД вставляем свой скрипт, а для вызова шорткода на странице используем .
Функция wp_enqueue_script. С ее помощью можно подключить скрипт для конкретной страницы. Данный способ популярен, но требует больших знаний движка и его структуры.
Правка header.php. Один из наихудших методов, основанный на добавлении специального кода перед закрывающим тегом </ head> с номером страницы, в которой надо отобразить скрипт.
Конструкция iframe. Один из простейших способов, где надо создать новый файл и закинуть в него скрипт.
Далее загружаем этот файл к себе на хостинг, а в статье в том месте, где будет выводиться калькулятор размещаем код iframe, через который и будет отображаться содержимое из внешних файлов.
<iframe src="http://seoslim.ru/wp-content/calculators/calcul-1.html" width="585" height="300" frameborder="0" scrolling="no"></iframe> |
- ссылка — адрес где расположен файл с готовым калькулятором;
- параметры width и height — задают размеры формы;
- параметр frameborder — присваивает толщину границы фрейма;
- параметр scrolling — задает или убирает полосу прокрутки.
Лично я изначально вставлял калькулятор на блог последним способом, но этот метод стал неэффективным после появления мобильной версии сайта, так как выводимая форма не адаптирована под другие разрешения экранов.
В этом случае все равно приходится прибегать к помощи фрилансеров, я нахожу их за копейки в сервисе Kwork, чтобы они все подправили и вставили калькулятор в запись традиционным способом, а на хостинг отдельно загружается только сам скрипт.
Но можно пойти и другим путем, об этом далее.
Вперед! Работай!
Вот теперь пришло время разобрать самое увлекательное! Ниже я прикреплю программный код на JS и прокомментирую важные моменты.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<script language="JavaScript"> var ThisCalc = document.Calculation; //Определяю объект, с которым буду работать var CurResult = 0; //хранит текущий численный результат var IsNewNumFlag = false; //определяю вводится новое число или нет var OperPending = "";// хранит текущее нажатое значение //функция обрабатывает кнопки с цифрами function PressedNum (Num) { if (IsNewNumFlag)//если ввод нового числа, т.е. первой его цифры { ThisCalc.ReadOut.value = Num; IsNewNumFlag = false; } else {//если не новое if (ThisCalc.ReadOut.value == "0")//если был сброс и стоит 0 //то заменяем его на новую цифру ThisCalc.ReadOut.value = Num; Else //иначе дописываем цифры ThisCalc.ReadOut.value += Num; } } //функция обрабатывает кнопки с арифметическими операциями function Operations (Op) { var Readout = ThisCalc.ReadOut.value; if (IsNewNumFlag && OperPending != "=") { ThisCalc.ReadOut.value = CurResult; } else { IsNewNumFlag = true; if ( '+' == OperPending ) CurResult += parseFloat(Readout); else if ( '-' == OperPending ) CurResult -= parseFloat(Readout); else if ( '/' == OperPending ) CurResult /= parseFloat(Readout); else if ( '*' == OperPending ) CurResult *= parseFloat(Readout); else CurResult = parseFloat(Readout); ThisCalc.ReadOut.value = CurResult; OperPending = Op; } } // Очистка текущей цифры function ClearEntry () { ThisCalc.ReadOut.value = "0"; IsNewNumFlag = true; } // Сброс всех параметров калькулятора function Clear () { Currents = 0; OperPending = ""; ClearEntry(); } </script> |
Вот теперь программа готова. Буду очень рад, если вы подпишитесь на обновления моего обучающего блога и поделитесь ссылкой на него с коллегами и друзьями. Пока-пока!
Прочитано: 421 раз
Компилятор vs Интерпретатор
Как исходный код превращается в рабочий? При выполнении программы, совершенно не важно, на каком языке он написан. Главное превратить исходный код в машинный
Это можно сделать двумя способами – компиляцией и интерпретацией.
Компилятор
Компиляция – это превращение кода в код, понятный компьютеру (машинный код). Преобразование происходит с помощью программы – компилятора, причем исходный код остается у разработчика неизменным.
Компилятор, по сути, является переводчиком между программистом и компьютером. Его принцип работы заключается в том, что компилятор сначала читает весь код, проверяет на ошибки и затем, в случае отсутствия ошибок, выполняет его.
После компиляции создается отдельный файл с откомпилированным кодом. Из этого следует недостаток компиляции – плохая переносимость программ для конкретных моделей.
Интерпретатор
Интерпретация – это процесс превращения исходного кода в машинный, когда программа – интерпретатор, получая код, выполняет его построчно. При интерпретации на разных машинах код каждый раз последовательно читается и тут же выполняется. Вот в чем заключается отличие между компиляцией и интерпретацией.
Из всего этого следует, что интерпретируемый код выполняется в разы медленнее, но в то же время обладает высочайшей переносимостью.
JavaScript файл:
Вот тут всё не много сложнее, но я постараюсь всё объяснить максимально понятным языком.
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
let num1;// Создаём переменную где будет хранится значение первого числа let num2;// Создаём переменную где будет хранится значение второго числа // Создаём переменную и берём элемент, куда будет выводится результат let out=document.getElementById(‘out’); // функция сложения functionplus(){ num1=document.getElementById(‘n1’).value; num1=parseInt(num1) num2=document.getElementById(‘n2’).value; num2=parseInt(num2) out.innerHTML=num1+num2; } // функция вычитания functionminus(){ num1=document.getElementById(‘n1’).value; num1=parseInt(num1) num2=document.getElementById(‘n2’).value; num2=parseInt(num2) out.innerHTML=num1-num2; } // функция умножения functionmultiplication(){ num1=document.getElementById(‘n1’).value; num1=parseInt(num1) num2=document.getElementById(‘n2’).value; num2=parseInt(num2) out.innerHTML=num1*num2; } // функция деления functiondivision(){ num1=document.getElementById(‘n1’).value; num1=parseInt(num1) num2=document.getElementById(‘n2’).value; num2=parseInt(num2) out.innerHTML=num1num2; } |
Давайте не много расскажу, что тут вообще происходит.
В начале просто создаём переменные которые нам могут пригодится, это первое число и второе, потом берём элемент, куда будем выводить значения которое получим.
Теперь подробно рассмотрим функции, я не буду все рассматривать, так как не чего почти не меняется, только действии.
Сначала, мы берём первое число из формы и ложем его в нашу переменную для первого значения, точнее берём строку, поэтому строчкой ниже мы переводим стоку в число, если там будут буквы, то он вернёт NaN или нет числа, точно также всё делаем и со вторым числом, только уже используем переменную, которую подготовили для второго числа.
В последней строчке функции мы складываем две переменные и выводим значение в элементе .
Как то так и работает наша программа, дальше всё одинаковое, единственное различии, только в действии.
Превратим набор элементов во что-то стоящее
Для любого пользовательского приложения в первую очередь важен графический интерфейс. Поэтому нужно привести в порядок расположение клавиш и текстового поля, а также скомпоновать их так, чтобы они выглядели, как единое целое.
Итак, для начала оформим внешний вид самой таблицы. Я задал объемную рамку вокруг калькулятора, установил цвет фона, внешние отступы, ширину таблицы и вид размещения текста внутри нее.
1 2 3 4 5 6 7 8 |
.Table { border: 3px inset gray; background: #E6E6FA; margin-left: 22%; margin-top: 12px; width: 270px; text-align: center; } |
Теперь красиво оформим кнопки.
1 2 3 4 5 6 |
.Table input { border: 2px solid gray; border-radius: 4px; width: 30px; margin: 4px; } |
Также у меня в коде есть особые поля. Это широкая кнопка для знака «равно» и само текстовое поле ввода. Для начала я опишу стили поля ввода, которому я задал идентификатор TextEdit.
А теперь займемся редактированием широкой кнопки с идентификатором WideBtn.
Как видите, теперь разрабатываемый калькулятор выглядит достаточно привлекательно и аккуратно. Осталось прописать логику работы функций на JS.
Пример простого калькулятора для сайта на PHP + JS
Итак, если вы решите сами создать калькулятор, то знайте, что овладеть хотя бы базовыми знаниями языков программирования JavaScript и PHP все же придется.
Лично я с JavaScript мало знаком поэтому покажу позаимствованную структуру построения самого простого калькулятора, который может складывать два числа и выводить конечный результат по запросу.
Форма счетчика будет создана с помощью тегов
<form> … </form>
Для реализации ввода значений используем теги <input>
<form> Введите число 1 <input type="text" onchange="this.value=this.value.replace(/()/g,'');" onkeyup="var n=this.value.replace(/()/g,''); if(n!=this.value) this.value=n;"><br><br> Введите число 2 <input type="text" onkeyup="this.value=this.value.replace(/()/g,'');"><br><br><br> <input type="button" value="Рассчитать"> <input type="reset" value="Сброс"><br><br> Результат <input type="text"> </form> |
Функция Onchange — убирает значения при добавлении их в форму.
Функция Onkeyup — убирает значения при добавлении их в форму кроме цифр.
Далее добавляем переменные в форму для тегов input, например, первое значение это латинская «x», второе вводимое значение в поле это латинская «y», а выходное значение это «summa».
<form> Введите число 1 <input type="text" name="x" onchange="this.value=this.value.replace(/()/g,'');" onkeyup="var n=this.value.replace(/()/g,''); if(n!=this.value) this.value=n;"><br><br> Введите число 2 <input type="text" name="y" onkeyup="this.value=this.value.replace(/()/g,'');"><br><br><br> <input type="button" value="Рассчитать"> <input type="reset" value="Сброс"><br><br> Результат <input type="text" name="summa"> </form> |
Теперь чтобы форма заработала надо ее наделить разумом, то есть создать скрипт с помощью Java, который и будет вести расчеты.
<script lang="JavaScript"> function calculators(form) { x = eval(form.a.value); //Присваиваем x значение из первого поля y = eval(form.b.value); //Присваиваем y значение из второго поля z = x+y; //Складываем значения x и y form.total.value = z; //Выдаем результат } </script> |
Словом calculators можно изменить на любое, так как им мы даем только название функции.
А для x, y, z задаем переменные, которые были созданные ранее.
Далее переходим обратно к форме и для тега input задаем функцию, отвечающую за расчет значений.
<input type="button" value="Рассчитать" /> |
Для этого добавляем в инпут команду onclick =»calculators (this.form)» которая и запустить алгоритма калькулятора.
<script lang="JavaScript"> function calculators(form) { x = eval(form.a.value); y = eval(form.b.value); z = x+y; form.total.value = z; } </script> <form> Введите число 1 <input type="text" name="x" onchange="this.value=this.value.replace(/()/g,'');" onkeyup="var n=this.value.replace(/()/g,''); if(n!=this.value) this.value=n;"><br><br> Введите число 2 <input type="text" name="y" onkeyup="this.value=this.value.replace(/()/g,'');"><br><br><br> <input type="button" value="Рассчитать" onclick="calculators(this.form)"> <input type="reset" value="Сброс"><br><br> Результат <input type="text" name="summa"> </form> |
Как видите все не, так и сложно как может показать, теперь можно скачать в интернете чужие калькуляторы и редактировать их под себя, например, добавить другие значения и функции.
Вывод:
Вот такой простой калькулятор получился на чистом JavaScript, единственный существенный не достаток, в том, что событие вызываются устаревшим образом, сейчас их правильно вызывать через , я не стал его использовать по двум причинам, во первых, мне кажется для новичков такой способ не много легче, а эта статья именно для новичков, во вторых, если вы не знали о таком способе, то его обязательно надо знать, так как, не всегда вы будите работать со современном кодам, на старых сайтах используется такой способ.
В будущем может напишу статью, где буду делать более продвинутый калькулятор, поэтому, что бы не пропустить подписываетесь на все соц-сети.
Также посмотрите как сделать Делаем продвинутый слайдер на чистом javascript
Также рекомендую:
- Снег на JavaScript
- Javascript пинг понг создаём игру с использованием canvas
- Делаем продвинутый слайдер на чистом javascript
- Как сделать простой слайдер на чистом JavaScript
С этим читают