Все для веб-дизайнера
Калькулятор для сайта с помощью JavaScript
Каждый программист должен сделать в своей жизни три вещи: вырастить сына, построить дома и написать калькулятор. Этот анекдот меня весьма насмешил. Недавно я столкнулся с проблемой разработки вычислений материала для интернет магазина. Но что, если подойти к решению самостоятельно, и позволить посетителям самостоятельно вести расчет и вычисления на сайте, то есть создать калькулятор. В данном уроке мы рассмотрим как создать простой калькулятор для сайта с помощью javascript. Калькулятор легко изменять и добавить новые функции.
Сегодня я хотел бы поделиться первым учебником по Knockout.js. Это одна из популярных библиотек JavaScript, которая позволяет нам использовать Model-View-View модели (MVVM). Данный подход расширяет рамки простого браузера, это новый взгляд на приложения созданных с помощью JavaScript. Основной идеей является разделение логики и воображения. Чтобы связать View и ViewModel используются данные атрибутов HTML5. В качестве демонстрации создан калькулятор с помощью knockout.js. И так,, приступим к созданию.
Шаг 1. HTML
Для начала мы рассмотрим разметку.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script src="js/knockout-2.2.0.js"></script> <div class="calculator"> <p>Math Calculator</p> <h3 data-bind="text: commandline"></h3> <div data-bind="foreach: numbers" class="numbers"> <button data-bind="value: val, text: val, click: $parent.addNumber"></button> </div> <div data-bind="foreach: commands" class="commands"> <button data-bind="value: command, text: command, click: $parent.addCommand, disable: $parent.hasNumbers"></button> </div> <button data-bind="click: doCalculate" style="width: 330px">=</button> </div> <script src="js/main.js"></script> |
Данный калькулятор состоит из десяти цифровых кнопок (номеров) и девяти команд. Мы собираемся использовать два набора: цифры и команды (для создания кнопки) вместо добавления их вручную.
Шаг 2. JS
В данной модели калькулятора нам необходимо определить два массива (команд и цифры). Они содержат все возможные цифры и действия (для нашей кнопки). Как вы знаете, для обычных команд (например, сложение, вычитание, умножение и деление), мы должны использовать два числа, чтобы все правильно работало, а в случае использования других функций (SIN, COS, и т.д.) — только одно число.
js/main.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 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
var CalculatorModel = function() { var self = this; // Массив из возможных команд self.commands = [ {command: ' + '}, {command: ' - '}, {command: ' * '}, {command: ' / '}, {command: 'sin', action: 'Math.sin(__param__)'}, {command: 'cos', action: 'Math.cos(__param__)'}, {command: 'tan', action: 'Math.tan(__param__)'}, {command: 'ln', action: 'Math.log(__param__)'}, {command: 'log', action: 'Math.log(__param__) / Math.log(10)'}, ]; // Массив из возможных номеров self.numbers = [ {val: 1}, {val: 2}, {val: 3}, {val: 4}, {val: 5}, {val: 6}, {val: 7}, {val: 8}, {val: 9}, {val: 0}, ]; // Результат командной строки self.commandline = ko.observable(''); //Последняя использоваланая команда self.lastCommand = ko.observable(''); // Нам нужна очистка? self.needCleanup = ko.observable(false); // Добавляем ряд функций self.addNumber = function(e) { if (self.needCleanup()) { self.commandline(''); self.needCleanup(false); } // Нам не нужно добавлять нули if (this.val == 0 && self.commandline() == '') { return; } self.commandline(self.commandline() + this.val); }; // Добавить команду функции self.addCommand = function(e) { if (e.action && self.commandline()) { // in case of commands which don't require a second value - we have to calculate a value var newCommand = e.action.replace('__param__', self.commandline()); self.commandline(eval(newCommand)); self.needCleanup(true); } if (self.lastCommand() == '') { // put a command into command line if (! e.action) { self.commandline(self.commandline() + e.command); } self.lastCommand(e.command); } }; // Расчет self.doCalculate = function(e) { self.commandline(eval(self.commandline())); if (self.lastCommand() != '') { self.lastCommand(''); } self.needCleanup(true); }; // Отключить кнопки, если бы мы не добавили еще цифры self.hasNumbers = ko.computed(function() { return self.commandline() == ''; }, self); }; ko.applyBindings(new CalculatorModel()); |
И теперь мы можем использовать foreach (в демонстрации) для отображения всех кнопок (с цифрами и действиями).
|
1 2 3 4 5 6 |
<div data-bind="foreach: numbers" class="numbers"> <button data-bind="value: val, text: val, click: $parent.addNumber"></button> </div> <div data-bind="foreach: commands" class="commands"> <button data-bind="value: command, text: command, click: $parent.addCommand, disable: $parent.hasNumbers"></button> </div> |
Когда мы нажимаем на кнопки с цифрами — скрипт добавляет цифры, когда мы нажимаем на команды — скрипт использует эти команды, чтобы вычислить результат. Я надеюсь, что вы сможете понять логику действия скрипта.
Шаг 3. CSS
Последним шагом будет рассмотрения небольших стилей для калькулятора, которые позволят визуально оформить калькулятор.
CSS / main.css
|
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 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
.calculator { /*css3 градиент*/ background: #e2e2e2; /* Old browsers */ background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */ background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */ display: block; margin: 20px auto 0; padding: 20px; position: relative; width: 340px; /*css3 радиус рамки*/ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; /* Тени css3*/ -webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75); box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75); } .calculator button { background-color: #eeeeee; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc)); background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); background-image: -o-linear-gradient(top, #eeeeee, #cccccc); background-image: linear-gradient(top, #eeeeee, #cccccc); border: 1px solid #ccc; border-bottom: 1px solid #bbb; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; color: #333; font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; margin: 5px; padding: 8px 0; text-align: center; text-shadow: 0 1px 0 #eee; width: 100px; } .calculator button:hover { background-color: #dddddd; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb)); background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); background-image: linear-gradient(top, #dddddd, #bbbbbb); border: 1px solid #bbb; border-bottom: 1px solid #999; cursor: pointer; text-shadow: 0 1px 0 #ddd; } .calculator button:active { border: 1px solid #aaa; border-bottom: 1px solid #888; -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; } .calculator p { margin-bottom: 15px; text-align: center; } .calculator h3 { background-color: rgba(255, 255, 255, 0.4); height: 23px; margin-bottom: 10px; padding: 8px; text-align: right; } .calculator div { background-color: rgba(255, 255, 255, 0.4); margin-bottom: 10px; /*css3 радиус рамки*/ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } |
Это все на сегодня, мы только что закончили разработку математического калькулятора. Если вам нужно расширить функциональные возможности данного калькулятора, все что нужно это расширить нашу модель (и добавлять собственные кнопки действий).
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 28.11.2012 в 14:00, в категории Интересно. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
