«
»
JavaScriptjQueryWEB

Создайте простой калькулятор JavaScript для основных арифметических операций

ДомJavaScriptJQueryСоздайте простой калькулятор JavaScript для основных арифметических операций

В этой статье мы создадим простой калькулятор с использованием JavaScript, который может выполнять основные арифметические операции.

Шаги для создания простого JavaScript калькулятора

1. Выберите подходящий текстовый редактор. Сейчас мы будем использовать Notepad ++.

2. HTML будет следующим:

<center> <table border="4"> <tr> <td colspan="1"> <input class="display" type="text" style="width:415px;" size="30" name="Display"> </td> </tr> <tr> <td> <table> <tr> <td><input class="calc-btn" data-role="number" type="button" value="7"></td> <td><input class="calc-btn" data-role="number" type="button" value="8"></td> <td><input class="calc-btn" data-role="number" type="button" value="9"></td> <td><input class="calc-btn" data-role="operator" type="button" value="+"></td> </tr> <tr> <td><input class="calc-btn" data-role="number" type="button" value="4"></td> <td><input class="calc-btn" data-role="number" type="button" value="5"></td> <td><input class="calc-btn" data-role="number" type="button" value="6"></td> <td><input class="calc-btn" data-role="operator" type="button" value="-"></td> </tr> <tr> <td><input class="calc-btn" data-role="number" type="button" value="1"></td> <td><input class="calc-btn" data-role="number" type="button" value="2"></td> <td><input class="calc-btn" data-role="number" type="button" value="3"></td> <td><input class="calc-btn" data-role="operator" type="button" value="*"></td> </tr> <tr> <td><input class="clear-btn" type="button" value="C"></td> <td><input class="calc-btn" data-role="number" type="button" value="0"></td> <td><input class="calculate-btn" type="button" value="="></td> <td><input class="calc-btn" data-role="operator" type="button" value="/"></td> </tr> </table> </td> </tr> </table> </center>

Мы используем кнопки ввода для создания клавиатуры для калькулятора.

3. Теперь нам нужно включить библиотеку JQuery на нашу страницу. Для Google JQuery CDN используйте следующую ссылку:

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

4. Также следующий скрипт должен быть включен для расчета и операций калькулятора.

<script type="text/javascript"> $(".calc-btn").on('click',function(){ if($(this).attr('data-role')!='operator'){ $(".display").val($(".display").val()+$(this).val()); } else{ if($(".display").val()!=''){ $(".display").val($(".display").val()+$(this).val()); } } }); $(".clear-btn").on('click',function(){ $(".display").val(''); }); $(".calculate-btn").on('click',function(){ var expression = $(".display").val(); $(".display").val(eval(expression)); }); </script>

Вводы принимаются как число или оператор с клавиатуры калькулятора и добавляются к входу дисплея. При нажатии кнопки ‘=’ вычисление выполняется с помощью функции JavaScript eval().

Функция eval() оценивает или выполняет аргумент. Если аргумент является выражением, eval() оценивает выражение. Если аргумент является одним или несколькими операторами JavaScript, eval () выполняет операторы.

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

<style> input{ font-size:2em; width:100; height:85; } </style>

Простой Javascrit Калькулятор

Простой JavaScript-калькулятор

Вот полный код:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style> input{ font-size:2em; width:100; height:85; } </style> <center> <table border="4"> <tr> <td colspan="1"> <input class="display" type="text" style="width:415px;" size="30" name="Display"> </td> </tr> <tr> <td> <table> <tr> <td><input class="calc-btn" data-role="number" type="button" value="7"></td> <td><input class="calc-btn" data-role="number" type="button" value="8"></td> <td><input class="calc-btn" data-role="number" type="button" value="9"></td> <td><input class="calc-btn" data-role="operator" type="button" value="+"></td> </tr> <tr> <td><input class="calc-btn" data-role="number" type="button" value="4"></td> <td><input class="calc-btn" data-role="number" type="button" value="5"></td> <td><input class="calc-btn" data-role="number" type="button" value="6"></td> <td><input class="calc-btn" data-role="operator" type="button" value="-"></td> </tr> <tr> <td><input class="calc-btn" data-role="number" type="button" value="1"></td> <td><input class="calc-btn" data-role="number" type="button" value="2"></td> <td><input class="calc-btn" data-role="number" type="button" value="3"></td> <td><input class="calc-btn" data-role="operator" type="button" value="*"></td> </tr> <tr> <td><input class="clear-btn" type="button" value="C"></td> <td><input class="calc-btn" data-role="number" type="button" value="0"></td> <td><input class="calculate-btn" type="button" value="="></td> <td><input class="calc-btn" data-role="operator" type="button" value="/"></td> </tr> </table> </td> </tr> </table> </center> <script type="text/javascript"> $(".calc-btn").on('click',function(){ if($(this).attr('data-role')!='operator'){ $(".display").val($(".display").val()+$(this).val()); } else{ if($(".display").val()!=''){ $(".display").val($(".display").val()+$(this).val()); } } }); $(".clear-btn").on('click',function(){ $(".display").val(''); }); $(".calculate-btn").on('click',function(){ var expression = $(".display").val(); $(".display").val(eval(expression)); }); </script>

Источник записи: https://thedebuggers.com

Связанные записи
WEBПолезные сайты

9 способов определить шрифты из изображений и веб-текста и как загрузить шрифты на свой сайт

Contact Form 7WEBWEB - PHPWordPressВсе для functions.phpПлагины

Как заставить Wordpress отправлять почту из Amazon EC2 с помощью SES

Chrome AppsGoogleGoogle ChromeWEBWordPressПолезные сайты

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

LinuxWEBWEB - PHPWordPressВсе для разработки плагиновВсе для разработки шаблонов

Определите минимальную версию PHP для вашего кода?