В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
js math (5)
task (4)
js (244)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (1)

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

«Калькулятор на javascript» - готовый калькулятор на js. Пример готового калькулятора на javascript. Скачать или установить на сайт через iframe. Два вида калькулятор с темным и светлым фоном.

Подробно о калькуляторе на javascript

  1. Описание готового калькулятора на javascript
    1. Скачать калькулятор на javascript!(светлый)
    2. Скачать калькулятор на javascript!(темный)
    3. Встроить калькулятор на javascript на сайт
    4. Изменить: инженерный/простой калькулятор на javascript
  2. Мой калькулятор на javascript с нуля...(не доделан)

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

    1. Описание готового калькулятора на javascript

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

      Я не могу расстраивать своих пользователей, кто оказывается на моём сайте!

      И этот скрипт готового калькулятора как раз кстати!

      Вид готового калькулятора на на javascript

      Всего будет два скрипта...

      Калькулятор javascript с отсутствующим задним фоном...

      Не очень понравился темный(оригинальный) фон калькулятора - поэтому отключил его.

      Калькулятор javascript с темным задним фоном:

      Что можно сделать?
    2. Скачать калькулятор на javascript(светлый)!

      Скачать калькулятор на светлом фоне на javascript - здесь

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

      Данный пример калькулятора на js можно попробовать использовать! Это реальный живой калькулятор! Который выполняет множество операций.

      Калькулятор на js со светлым задним фоном:

    3. Скачать калькулятор на javascript(темный)!

      Скачать калькулятор на javascript с темным задним фоном!
    4. Изменение инженерный/простой калькулятор на javascript

      Данный калькулятор на javascript может преобразовываться из простого в инженерный и обратно!

      Если калькулятор в режиме инженерном, то наводим мышку на знак вопроса в левом верхнем углу табло и видим, что появляются два кружочка. Нажимаем по кружочку со знаком больше ">":

      Нажмите, чтобы открыть в новом окне.
      Изменение инженерный/простой калькулятор на javascript

      И видим... что наш инженерный калькулятор превратился в компактный:

      Изменение инженерный/простой калькулятор на javascript

      Для возврата в инженерный калькулятор повторяем выше описанную операцию!


    1. Мой калькулятор на javascript с нуля...


      Сегодня:
      05.01.2022 В связи с недоделанностью контента и скрипта...

      Контент был оставлен и не доделан... к сожалению.

      Все причины прошедшего написал в p.s.

      Из ниже представлено контента - единственное может быть полезным... это видео с точки зрения изучения и повторения представленого опыта.

      Рекомендую использовать уже готовый скрипт калькулятора.




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

      21/06/2019 ... Сделал несколько видео о том, как работают некоторые функции, не программно, а визуально!

      Здесь описания не добавлял, как написал основной код!

      + Отказался от некоторых математических действий в javascript

      Возникали проблемы, например с запятой... пришлось использовать php.

    2. Видео о калькуляторе на javascript

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

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

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

      Или так:

      Калькулятор js

      Поставим весь код в 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" )

      }


05.01.2022 P.S.

Данная страница "мой калькулятор на javascript"(это второй пункт) была написана давно...(дата выхода видео 9 мая 2018 г.) и в первую очередь преследовал цель... изучать "javascript", поскольку изучать что-то(в данном случае язык программирования) по книжке - самое тупое занятие, какое-только можно придумать! Потому, что чаще всего теория отличается от жизни примерно на 99%.

В процессе создания калькулятора на "javascript" я столкнулся с некоторыми нерешаемыми(тогда) задачками... как например вопрос "плавающей точки".

Поэтому... "калькулятор на javascript" превратился в
"калькулятор на javascript" + php (почему php? Потому, что там вопрос математических действий решен намного проще и легче.)

Ещё зачем нужен был калькулятор на javascript

Поскольку народ, в принципе, год от года тупеет..., то он не в состоянии найти в калькуляторе в Windows, например действия с дробями - особенно если это обычная или например смешанная дробь.

Поэтому - я могу написать об этом, сделать калькулятор - и заработать на этом.

Чем закончилась эпопея калькулятор на javascript

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

Что с калькулятором на javascript" + php

Как я уже сказал выше... наш калькулятор превратился в в
"калькулятор на javascript" + php

  1). Все математические действия были отправлены в отдельный файл php
  2). В javascript было оставлено управление визуальными атрибутами... кнопками, отправка/получение/вывод результата/данных из php файла выполнялся с помощью jquery_post.
  3).Не буду рассказывать все функции и особенности... см. описание калькулятора.
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.029767 секунд. Подробнее