СКРИПТЫ alt phpjshtmlcssblog
ТЕГИ:
php (267)
js (136)
html (132)
css (98)
html tags (58)
edit text (37)
jquery (36)
form html (29)
php array (28)
foto (23)
fonts (22)
forum (19)
atom (18)
html book (17)
board (17)
Показать еще :
js method (16)
svg (16)
hosting (15)
php file (15)
color (14)
osclass (13)
htaccess (13)
ruweb.net (13)
table (12)
path (12)
icon (11)
php date (11)
online (11)
info (11)
js delete (11)
notepad (11)
yandex (11)
input (11)
php img (10)
url (10)
jsphp (10)
form (8)
cookie (7)
task (7)
php url (7)
comment (7)
ftp (6)
click (6)
js url (6)
value (5)
reg.ru (5)
mb (5)
adminka (5)
js id (4)
select (4)
search (4)
bbcode (4)
js copy (4)
js form (4)
iframe (3)
js time (3)
vs code (3)
captcha (3)
vk (3)
ukoz (2)
browser (2)
dosite (2)
seo (2)
tag hr (2)
js post (2)
sitemap (2)
console (2)
header (1)
domen (1)
smile (1)
ssl (1)
books (1)
numbers (1)
archive (1)

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

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

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

Калькулятор на javascript пример

  1. Как будет выглядеть калькулятор на javascript!?
  2. Видео о калькуляторе на javascript
  3. Логика и основные кнопки калькулятора на javascript!?
  4. Позиционируем калькулятор.
  5. Скрипт калькулятора на javascript

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

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

  2. Не забываем сказать спасибо! Я старался для вас!

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

    Не могли же мы не сделать о калькуляторе видео!


  3. Логика и основные кнопки калькулятора на 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


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

    Сделаем скриншот калькулятора на 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> 

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


  5. Скрипт калькулятора на javascript

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

    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.

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

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

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

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

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

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

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

P.P.S.

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

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

У нас много других скриптов, которые раздаются бесплатно!

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Теги :
калькулятор на javascript
калькулятор на javascript код
калькулятор для сайта на javascript
простой калькулятор на javascript
создание калькулятора javascript
калькулятор на javascript пример
калькулятор на html javascript
как сделать калькулятор на javascript
как написать калькулятор на javascript
калькулятор услуг javascript
как сделать калькулятор в html javascript
пишем калькулятор на javascript
код javascript для создания калькулятора
простой калькулятор на javascript код

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
17.10.2021 39:28
Давно не делал и страницу и видео в один день... чет, как-то выжитый как…
подробнее.
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.