ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Онлайн калькулятор при помощи CSS + JS

Онлайн калькулятор при помощи CSS + JS

Онлайн калькулятор при помощи CSS + JS
Иногда на сайте требуется калькулятор онлайн, где вашему вниманию отличное решение на вычислительный гаджет, что создана при помощи javascript. Не скажу, что он простой, где идет отличный дизайн, что можно самостоятельно выстроить под различный стиль шаблона. Также на нем поставлены градиенты, что безусловно придает вид самому корпусу и кнопкам. Но по кнопкам отдельно, они созданы в реальности, где вы наводите и получаете эффект, а также при кликах сами кнопки красивый вид показывают.

А так безусловно простой и очень удобный по работе калькулятор, который работает в режиме онлайн красивый, что легко сможете добавить на свой сайт. Есть очень много тем, как интернет магазины и другие сайты, где предлагают различные услуги. И здесь без вычислительной машинки не как нельзя, что будет отличным приложение под раздел, где вы с полки набираете товар и сразу ведете подсчет. Где все проверено по работе, что и вы сможете посмотреть на demo странице, что находится ниже.

Так выглядит по умолчанию, где немного темных красок добавил:

Простой калькулятор на HTML + CSS + JavaScript

Установка:

HTML

Код
<div id="calculator">
  <div class="kasnedos">
  <span class="clear">C</span>
  <div class="screen"></div>
  </div>
   
  <div class="calcuka-suslatom">
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span class="operator">+</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span class="operator">-</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span class="operator">÷</span>
  <span>0</span>
  <span>.</span>
  <span class="eval">=</span>
  <span class="operator">x</span>
  </div>
</div>

CSS

Код
html {
  height: 100%;
  background: white;
  background: radial-gradient(circle, #fff 20%, #ccc);
  background-size: cover;
}

#calculator {
  width: 321px;
  height: auto;
  margin: 100px auto;
  padding: 18px 18px 10px;
  background: #4c9fc5;
  background: linear-gradient(#9adfff, #326f8a);
  border-radius: 2px;
  box-shadow: 0px 4px #10506d, 0px 10px 15px rgba(86, 86, 86, 0.2);
}

.kasnedos span.clear {
  float: left;
}

.kasnedos .screen {
  height: 38px;
  width: 209px;
  float: right;
  padding: 0 8px;
  background: rgba(21, 21, 21, 0.33);
  border-radius: 3px;
  box-shadow: inset 0px 4px rgba(62, 62, 62, 0.2);
  font-size: 17px;
  line-height: 40px;
  color: #f7f7f7;
  text-shadow: 1px 1px 2px rgba(23, 23, 23, 0.2);
  text-align: right;
  letter-spacing: 1px;
}

.calcuka-suslatom, .kasnedos {overflow: hidden;}

.calcuka-suslatom span, .kasnedos span.clear {
  float: left;
  position: relative;
  top: 4px;
  cursor: pointer;
  width: 65px;
  height: 35px;
  background: #f9f9f9;
  border-radius: 3px;
  box-shadow: 0px 4px rgba(37, 37, 37, 0.35);
  margin: 0 7px 11px 0;
  color: #827f7f;
  line-height: 35px;
  text-align: center;
  user-select: none;
  transition: all 0.2s ease;
}

.calcuka-suslatom span.operator {
  background: #FFF0F5;
  margin-right: 0;
}

.calcuka-suslatom span:hover {
  background: #907fe0;
  box-shadow: 0px 4px #6142b1;
  color: #f9f9f9;
}

.kasnedos span.clear {
  background: #ff9fa8;
  box-shadow: 0px 4px #ff7c87;
  color: #f7f5f5;
}

.calcuka-suslatom span:hover {
  background: #9c89f6;
  box-shadow: 0px 4px #6b54d3;
  color: #f7f5f5;
}

.calcuka-suslatom span.eval:hover {
  background: #abb850;
  box-shadow: 0px 4px #717a33;
  color: #ffffff;
}

.kasnedos span.clear:hover {
  background: #f68991;
  box-shadow: 0px 4px #d3545d;
  color: #f7f5f5;
}

.calcuka-suslatom span:active {
  box-shadow: 0px 0px #6552bb;
  top: 4px;
}

.calcuka-suslatom span.eval:active {
  box-shadow: 0px 0px #6d772a;
  kasnedos: 4px;
}

.kasnedos span.clear:active {
  kasnedos: 4px;
  box-shadow: 0px 0px #f120cd;
}

JS

Код
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;

for(var i = 0; i < keys.length; i++) {
  keys[i].onclick = function(e) {
  // Get the input and button values
  var input = document.querySelector('.screen');
  var inputVal = input.innerHTML;
  var btnVal = this.innerHTML;
   
  if(btnVal == 'C') {
  input.innerHTML = '';
  decimalAdded = false;
  }
   

  else if(btnVal == '=') {
  var equation = inputVal;
  var lastChar = equation[equation.length - 1];
   
  equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
   
  if(operators.indexOf(lastChar) > -1 || lastChar == '.')
  equation = equation.replace(/.$/, '');
   
  if(equation)
  input.innerHTML = eval(equation);
   
  decimalAdded = false;
  }

  else if(operators.indexOf(btnVal) > -1) {

  var lastChar = inputVal[inputVal.length - 1];

  if(inputVal != '' && operators.indexOf(lastChar) == -1)  
  input.innerHTML += btnVal;
   
  else if(inputVal == '' && btnVal == '-')  
  input.innerHTML += btnVal;
   
  if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {

  input.innerHTML = inputVal.replace(/.$/, btnVal);
  }
   
  decimalAdded =false;
  }
   
  else if(btnVal == '.') {
  if(!decimalAdded) {
  input.innerHTML += btnVal;
  decimalAdded = true;
  }
  }
   
  else {
  input.innerHTML += btnVal;
  }
   
  e.preventDefault();
  }  
}

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

Немного поработав, скажу что сброс сделан очень удобно, где не нужно подключать клавиатуру, а все убираем по клику. Также все цифры отлично видно, и вы можете поставить тот размер, который требуется, но здесь нужно автоматически выставлять окно циферблата, где производится вычисление.

Демонстрация
21 Февраля 2020 Загрузок: 2 Просмотров: 2140 Комментариев: (5)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 5
Kosten
Kosten 21 Февраля 2020 22:451
0
При установки был закреплен файл, но почему то он битый оказался, но убрав его все отлично работает, не знаете для чего он вообще предназначен, так как сайта по ссылки не существует, и как понял он же был источником.

Подключаем в HEAD

Код
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
Webmaster32
Webmaster32 21 Февраля 2020 23:512
0
Скрипт, позволяющий использовать везде без префикса свойства CSS. Он работает за кулисами, добавляя префикс текущего браузера в любой код CSS, только когда это необходимо.
Рабочий файл:
Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js" type="text/javascript" type="text/javascript"></script>
Kosten
Kosten 22 Февраля 2020 00:283
0
Вот не знаю, добавлять к материалу его, ведь без него на демо странице можно посмотреть, что все корректно работает.
PickleAdmiraL
PickleAdmiraL 02 Мая 2020 15:134
0
Не понимаю как на в скрипте сделать ограничение на деление на ноль. Чтобы при попытке поделить на ноль он выдавал сообщение недопустимая операция?
Kosten
Kosten 02 Мая 2020 19:425
0
Сам только заметил, что на ноль не делиться, но также думаю, а для чего все на ноль делить. Это как только в 90 тых говорили, что я тебя на ноль поделю, просто считаю это деление не нужным.
Войдите:
avatar