ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ

Калькулятор на javascript Как в Windows 10.

Как вы думаете - «Калькулятор на javascript» - это легко или сложно!? И вы сразу должны мне сказать – смотря какой калькулятор!

Мы накопили некоторый баланс знаний по javascript, что одним из следующих шагов хочется сделать уже, что-то основанное на наших знаниях! Ведь теория, (а я смерть как не люблю теорию!) – это просто невозможная скукота, но как говорится, без теории - никак!

21/06/2019 ... Сделал несколько видео о том, как работают некоторые функции, не программно, а визуально!, здесь описания не добавлял, как написал основной код! + Отказался от некоторых математических действий в javascript - возникали проблемы, например с запятой... пришлось использовать php.

Как будет выглядеть калькулятор на javascript!?

Чтобы вы сразу не убежали от обилия информации – вот посмотрите, какой калькулятор у нас получился.

Логика и основные кнопки калькулятора на javascript!?

Первое надо посмотреть на объект(в данном случае калькулятор) и проанализировать, что он из себя представляет и вывести закономерности и повторения!

1.

Кнопки: всего будет 6 х 4 = 24 кнопки, из этого вывод, что надо нарисовать только одну, а потом еще добавить 23…

Первая группа скриптов - получение данных из кнопки и их обработка

Математические знаки:

Вторая группа скриптов – плюс, минус, умножить, делить – будут иметь один вариант скрипта – 1.две цифры, 2.математический знак, 3.равно
Третий вид скрипта - равно.
Четвертая группа скриптов - корень, х в квадрате,1 делить на х.

Не математические…

Пятый вид скрипта - сброс.
Шестой вид скрипта – удаление последнего знака.
2.

Пока делать не будем %, се, и запятую.

Кнопки для калькулятора и оформление.

Кнопка будет иметь уникальней селектор идентификатора + внутри будет - событие «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

Позиционируем калькулятор.

Сделаем скриншот калькулятора на Windows 10 он доступен по адресу

Или так:

Калькулятор на  javascript

Поставим весь код в div с классом центр.

<div class="center">

свойства - центрируем по середине страницы.

.center {

position: absolute;

display: block;

top: 50%;

left: 50%;

width: 327px;

height: 537px;

margin-top: -268px;

margin-left: -163px;

}

Еще нам понадобится два дива с разными идентификаторами rezult - основное поле, куда будем складывать все результаты.

И див arhiv, который будет показывать, что было нажато до знака.

Позиционирование аналогичное - что и с кнопками.

 <div id="rezult">0</div>

 <div id="arhiv">Привет мир</div> 

С оформлением закончили...

Переходим к скриптам в калькуляторе

1.

Группа скриптов (аналогичная всего 10 штук...) - от 0 до 9.

Задача даннго скрипта - получить данные из кнопки, проверить, если в rezult ноль, то очищаем и загружаем занчение из кнопки, с последущим прибавлением любой нажатой кнопки, если цифр больше набрано чем 12 - останавливаемся. При каждом нажатии кнопки цифра будет сдвигаться влево.

function foo0(){ //функция + название функции(уникальное)     from_id = document.getElementById("id0").innerHTML;  //получим в переменную данные из кнопки     from_rezult = document.getElementById("rezult").innerHTML;//получим в переменную данные из див rezult     if(from_rezult === "0"){document.getElementById("rezult").innerHTML = "";}//если в rezult ноль то очищаем див     from_length = from_rezult.length;//посчитаем количество знаков в переменной     if(from_length > 12){fail;} // если больше 12 прекращаем скрипт

    document.getElementById("rezult").innerHTML += from_id; // запишем данные из кнопки, прибавляя, если что-то есть в rezult     count =  document.getElementById("rezult").innerHTML; count = count.length; //посчитаем сколько знаков в rezult после отправки

    

    mnogitel =    count   *  23 ;  // переменная вычисленная методом научного тыка... и следующие три строки...

    sсосо = 318 - mnogitel   ; 

    if ( count === 1 ) { sсосо = 295;} 

    if ( count === 2 ) { sсосо = 272;} 
    document.getElementById("rezult").setAttribute("style",  "margin-left:" +  sсосо   + "px"  );  //отправляем в rezult отступ чтобы цифры сдвинулись влево... }

2.

Группа скриптов (аналогичная всего 4 штуки...) - плюс, минус, умножить , делать:

Задача скрипта - получить данные из rezult и отправить "полученное" прибавив знак - в данном случае плюс в див arhiv, и сдвигаем на соответствующую цифру...rezult.

В переменную znak - записываем нажатый зна плюс отправляем его в rezult, остальные три меняем название функции и знак плюс.

function foo_plus(){

    chislo  = parseInt(document.getElementById("rezult").innerHTML);

    document.getElementById("arhiv").innerHTML  = chislo + '+';

    document.getElementById("rezult").setAttribute("style",  "margin-left: 300px"  ); 

    znak = document.getElementById("rezult").innerHTML =  "+";

}

3.

Уникальный скрипт, который будет обрабатывать предыдущие скрипты при нажатии на кнопку равно.

Поучаем в переменную "chislo_first" что мы отправили после нажатия на одну из верхних кнопок математических знаков.

Сделаем из строки число "parseInt"

Поучаем в переменную "chislo_second" что у нас есть в rezult.

Проверяем что было нажато... "if(znak ==", в зависимости от нажатого совершаем соответствующее действие.

Да и чуть не забыл про "slice" - полученную строку нужно избавить от знака, который стоит на первой позиции...

Далее отправляем полученный результат в rezult и arhiv очищаем... ну и далее в зависимости от количества знаков сдвигаем на расстояние...

function foo_ravno (){

    chislo_first = parseInt(document.getElementById("arhiv").innerHTML); 

    chislo_second = document.getElementById("rezult").innerHTML;     

    chislo_second = parseInt(chislo_second.slice(1)); 

    if(znak === "+"){chislo_ravno = chislo_first + chislo_second;}

    if(znak === "-"){chislo_ravno = chislo_first - chislo_second;}

    if(znak === "*"){chislo_ravno = chislo_first * chislo_second;}

    if(znak === "/"){chislo_ravno = chislo_first / chislo_second;}

    document.getElementById("rezult").innerHTML = chislo_ravno; 

    document.getElementById("arhiv").innerHTML = "";

    chislo_ravno = String(chislo_ravno); 

         

    count  =  chislo_ravno .length;  

    if (count > "12" ) 

    {

        

        if (count > "16" ) 

        {

            if (count > "20" ) 

            {

            document.getElementById("rezult").setAttribute("style",  "margin-left: 50px; font-size: 20px;"  );

            }

            else

            {

            document.getElementById("rezult").setAttribute("style",  "margin-left: 80px; font-size: 20px;"  ); 

            }

        }

        else

        {

        document.getElementById("rezult").setAttribute("style",  "margin-left: 130px; font-size: 20px;"  ); 

        }

    }

    else

    {     

    mnogitel =    count   *  23 ; 

    sсосо = 318 - mnogitel   ; 

    if ( count === 1 ) { sсосо = 295;} 

    if ( count === 2 ) { sсосо = 272;} 

    document.getElementById("rezult").setAttribute("style",  "margin-left:" +  sсосо   + "px"  );    

    }

}

4.

Группа скриптов (аналогичная всего 3 штуки...) корень, х в квадрате, 1 деленное на х

Выполнение данной группы скриптов, отличается от верхних, что здесь нет вторгло объекта и действие должно быть выполнено после единичного нажатия на кнопку с математическим действием.

Все просто, получить из rezult - применить функцию, отправить в rezult, позиционировать...


Будут отличаться лишь концовка третьей строки...

1 деленное на х = parseFloat(1 / chislo);

корень = Math.sqrt(chislo);

х в квадрате = Math.pow(chislo, 2);

function foo_square(){

        chislo = parseInt(document.getElementById("rezult").innerHTML);

        square = document.getElementById("rezult").innerHTML = Math.pow(chislo, 2);

        document.getElementById("rezult").setAttribute("style", "margin-left: 295px" );

        square = String(square);

        count = square.length;

        //здесь условие позиционирования из вышестоящего скрипта со строки if (count > "12" )

}

5.

Уникальный скрипт и простой скрипт, который будет очищать "arhiv" и "rezult" - выставляла ноль в позицию по умолчанию.

function foo_c(){

        document.getElementById("rezult").innerHTML = "0";

        document.getElementById("arhiv").innerHTML = "";         

        document.getElementById("rezult").setAttribute("style",  "margin-left: 295px"  ); 

}

6.

Уникальный скрипт, который будет удалять последний элемент из rezult.

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

function foo_del_last(){

chislo_del_last = document.getElementById("rezult").innerHTML ;

from_length = chislo_del_last.length ;

chislo_del_SEND = (chislo_del_last.substring(0, chislo_del_last.length - 1))

//здесь условие позиционирования из вышестоящего скрипта со строки if (count > "12" )

}
P.S.

Первое что хочется сказать напоследок!

1. Естественно, что когда я решил сделать такой калькулятор, то пошел и посмотрел, что же делает мои конкуренты и о чем пишут относительно калькулятора и когда видишь название простой калькулятор на javascript, то это не простой калькулятор и примитивный, так будет очень точное название таких калькуляторов, а вот моя разновидность калькулятора – это и есть простой калькулятор на javascript.

2.Относительно не написанных кнопок - под вопросом работа с десятичными, оказалось, что не просто разобраться и на это надо потратить время….

3.Кнопка СЕ – тоже если честно под сомнением её необходимость, более востребованная –например, мне кажется, была бы кнопка возвести в степень…

4.Кнопка проценты, никогда с ними не сталкивался, поэтому и не написал…

О всех выше указанных пунктах нужно подумать дополнительно…

P.P.S.

И полный листинг не выкладываю - друзья! Надо чуть чуть пытаться сделать что-то самостоятельно!

Так вы научитесь намного быстрее!

Написать комментарий.
С вашими куками, что-то не то..., попробуете перезагрузить страницу..