mrbrainwash

Мужчина
18 декабря 1992 г.
Днепропетровск
Статус
  • Активный

Последние сообщения mrbrainwash

  • JavaScriptНестандартный калькулятор • 14 мая 2014 г. 21:02

    Получилось вот так вот. А как сделать , чтобы сохраняло историю и её потом можно было посмотреть?<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Калькулятор</title> <link rel='stylesheet' href='style.css' type=...
    Получилось вот так вот. А как сделать , чтобы сохраняло историю и её потом можно было посмотреть?
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Калькулятор</title>
    
        <link rel='stylesheet' href='style.css' type='text/css'>
    
        <script type='text/javascript' src='jquery.min.js'></script>
        <script type='text/javascript' src='jquery-ui-1.10.4.custom.min.js'></script>
        <script type='text/javascript' src='app.js'></script>
    </head>
    
    <body>
    
        <div class="calc_app">
            <div class="calc_header">
                <div class="calc_title">Calculator</div>
                <div class="calc_memory"></div>
                <input type="text" class="calc_display" name="calc_display" disabled>
            </div>
            <div class="calc_body">
                <div class="cifral_buttons">
                    <p>
                        <button>7</button>
                        <button>8</button>
                        <button>9</button>
                    </p>
                    <p>
                        <button>4</button>
                        <button>5</button>
                        <button>6</button>
                    </p>
                    <p>
                        <button>1</button>
                        <button>2</button>
                        <button>3</button>
                    </p>
                    <p>
                        <button>0</button>
                        <button class="width_2">.</button>
                    </p>
                </div>
                <div class="operation_buttons">
                    <button>/</button>
                    <button>*</button>
                    <button>-</button>
                    <button>+</button>
                </div>
    
                <div class="operation_function">
                    <button class="calc_reset_btn">C</button>
                    <button class="width_3 calc_equal_btn">=</button>
                </div>
                <dib class="memory_functions">
                    <button class="memory_btn_set">MS</button>
                    <button class="memory_btn_get">MR</button>
                    <button class="memory_btn_clear">MC</button>
                </dib>
            </div>
            <div class="calc_footer"></div>
        </div>
    </body>
    
    </html>


    /**
     * Объявление в общем глобальной видимости
     * переменной нашего приложения
     * @type {calc|*|{}}
     */
    var calc = calc || {};
    
    /**
     * Изолируем jQuery
     */
    (function($){
        /**
         * Выполнение скрипта по событию OnDOMReady
         */
        $(document).ready(function(){
            /**
             * Описание нашего объекта
             * @type {{init: init, setDisplay: setDisplay, clearDisplay: clearDisplay, checkDisplay: checkDisplay, addDisplay: addDisplay}}
             */
            calc = {
                init : function() {
                    /**
                     * Устанавливаем глобальную переменную
                     * нашего основного объекта
                     * @type {calc}
                     */
                    var $t = this;
    
                    this.calc = $('.calc_app');
                    /**
                     * Обозначаем переменную в нашем приложении
                     * для дисплея калькулятор
                     * @type {*|HTMLElement}
                     */
                    this.disaplay = $('.calc_display');
                    /**
                     * Определяем временную переменную для "памяти"
                     * @type {undefined}
                     */
                    this.memory = undefined;
    
                    /**
                     * Устанавливаем по умолчанию значение равное нулю
                     */
                    this.clearDisplay();
    
                    /**
                     * Делаем наш калькулятор "перемещаемый"
                     */
                    this.calc.draggable();
    
                    /**
                     * Биндим кнопки [0-9] + Кнопки операций
                     */
                    $('.cifral_buttons button, .operation_buttons button').click(function(e){
                        $t.checkDisplay();
                        $t.addDisplay( $(this).html() );
                    });
    
                    /**
                     * Биндим кнопку 
    
                     */
    
                    $('.calc_reset_btn').click(function(){
                        $t.clearDisplay();
                    });
    
                    /**
                     * Работаем с "памятью"
                     */
    
                    $('.memory_functions button').click(function(){
                        /**
                         * Отрабатываем нажатия кнопок
                         * http://javascript.ru/switch
                         */
                        switch ( $(this).html() ) {
                            case 'MR':
                                if($t.memory != '' || $t.memory == undefined)
                                    $t.disaplay.val( $t.memory );
                                break;
                            case 'MS':
                                $t.memory = $t.disaplay.val()
                                break;
                            case 'MC':
                                $t.memory = '';
                                break;
                            default :
                                break;
                        }
                        /**
                         * Восстанавливаем знаение из "памяти"
                         */
                        $('.calc_memory').html($t.memory);
                    });
                    /**
                     * Биндим кнопку [=]
                     */
                    $('.calc_equal_btn').click(function(){
                        /**
                         * Производим вычисления при помощи js.eval()
                         * http://javascript.ru/eval
                         * @type {Object}
                         */
                        var equal = eval($t.disaplay.val());
    
                        /**
                         * Проверки на ошибки вычисления
                         */
                            if(equal == NaN ) {
                                $t.isError = true;
                                $t.setDisplay('Ошибка');
                                return;
                            }
                            if(equal == Infinity) {
                                $t.isError = true;
                                $t.setDisplay('Деление на ноль');
                                return;
                            }
    
                        $t.setDisplay( equal );
                    });
                },
                /**
                 * Установка определенного значения на дисплее
                 * @param val
                 */
                setDisplay: function(val) {
                    this.disaplay.val(val);
                },
                /**
                 * Очистка дисплея
                 */
                clearDisplay: function() {
                    this.setDisplay(0);
                },
                /**
                 * Проверка дисплея, на отображение ошибки
                 */
                checkDisplay: function() {
                    /**
                     * Если ошибка на дисплее
                     * - сбрасываем ошибку с дисплея
                     * - обнуляем данные о присутствии ошибки
                     */
                    if (this.isError == true) {
                        this.clearDisplay();
                        this.isError = false;
                    }
                },
    
                /**
                 * Добавление на дисплей калькулятора
                 * @param digit
                 */
                addDisplay: function(digit) {
                    /**
                     * Удаление нуля на дисплее
                     */
                    if(this.disaplay.val() == 0)
                        this.disaplay.val('');
    
                    /**
                     * Добавляем значение к уже существующему
                     * значению на нашем дисплее
                     */
                    this.disaplay.val( this.disaplay.val() + digit);
                }
            }
    
    
            /**
             * Инициализируем приложение
             */
            calc.init();
        });
    })(jQuery)


    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    
    .calc_app {
    
        background: #dae5f2;
        border: solid 6px #8dc8fb;
        position: relative;
        margin: 5px;
        float: left;
        -webkit-box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.75);
        -moz-box-shadow:    1px 1px 5px 0px rgba(50, 50, 50, 0.75);
        box-shadow:         1px 1px 5px 0px rgba(50, 50, 50, 0.75);
    }
    
    .calc_title {
        cursor: pointer;
        background: #8dc8fb url('icon.png') no-repeat 2px 50%;
        padding: 2px 10px;
        text-indent: 12px;
        font-size: 14px;
        line-height: 24px;
    }
    
    
    
    
    .calc_body {
        width: 145px;
    }
    
    .calc_body > * {
        margin: 0;
        padding: 0;
    }
    .cifral_buttons {
        float: left;
    }
    .cifral_buttons p {
        margin: 0;
        padding: 0;
    }
    button {
        margin: 2px;
        height: 30px;
        width: 30px;
    
        text-align: center;
    
    
    
    
    }
    
    button, .calc_display {
        line-height: 30px;
        font-size: 14px;
        border: solid 1px #8797aa;
        color: #1e395b;
        text-shadow: 1px 1px 0px rgba(150, 150, 175, 0.36);
        background: #f0f6fb; /* Old browsers */
        background: -moz-linear-gradient(top,  #f0f6fb 1%, #d7e2ef 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f0f6fb), color-stop(100%,#d7e2ef)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #f0f6fb 1%,#d7e2ef 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #f0f6fb 1%,#d7e2ef 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #f0f6fb 1%,#d7e2ef 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #f0f6fb 1%,#d7e2ef 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f6fb', endColorstr='#d7e2ef',GradientType=0 ); /* IE6-9 */
    }
    button.width_2 {
        width: 65px;
    }
    button.width_3 {
        width: 102px;
    }
    
    
    .operation_buttons {
        float: left;
        width: 34px;
    }
    .operation_buttons button {
        float: left;
    }
    
    .calc_display {
        text-align: right;
        width: 118px;
        margin: 2px;
        padding: 0 10px;
    }
  • JavaScriptНестандартный калькулятор • 11 мая 2014 г. 22:07

    И все же. Получил такое задание на собеседовании. Не пойму с какого конца к нему подойти. Не поможете ли?
    И все же. Получил такое задание на собеседовании. Не пойму с какого конца к нему подойти. Не поможете ли?
  • JavaScriptНестандартный калькулятор • 11 мая 2014 г. 19:26

    Здравствуйте, помогите, пожалуйста решить задание (нужно сделать своеобразный калькулятор): есть html страница, в которой подключены файлы скрипта и стиля. Скрипт загружается и подымает DOM, навешанный обработчиками. Естественно, пишется все используя ООП. Калькулятор состоит, как минимум, из нес...
    Здравствуйте, помогите, пожалуйста решить задание (нужно сделать своеобразный калькулятор): есть html страница, в которой подключены файлы скрипта и стиля. Скрипт загружается и подымает DOM, навешанный обработчиками. Естественно, пишется все используя ООП. Калькулятор состоит, как минимум, из нескольких объектов, которые обмениваются между собой событиями. К примеру, есть базовый объект "Кнопка", которую наследует объект "Кнопка 1". Она умеет кидать событие "Click", которое перехватывает некая сущность(пусть будет view), и объект, отрисовавший поле ввода. Получается иерархическая, распределенная модель. Кнопка кидает событие с параметами, оно всплывает, его перехватывают вьюха и кто-то еще. Кнопка - инициатор события, поле ввода только слушает, вьюха тоже слушает и хранит историю, чтобы можно было отменить операцию. И , если задача пойдет легко, можно выполнить это все в диалоге, который тоскается по экрану.