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

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

02016-04-2578192Денис Абдуллин

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

В CSS используется @font-face для того, чтобы шрифты более-менее соответствовали оригинальному исходнику. Автор не смог удержаться, и был волен добавить туда немного JavaScript. Таким образом, калькулятор функционирует. Слегка, конечно, ограничено, но функционирует. Можно помножить, разделить, сложить и отнять.

Код HTML + щепотка JavaScript


Code
<form class="calc">
  <p class="calc-display">
  <input type="text" name="res" id="res" value="0" class="calc-display-input" onfocus="this.blur()">
  </p>
  <p class="calc-row">
  <button type="button" class="calc-button calc-button-gray" onclick="s('Just....')">mrc</button>
  <button type="button" class="calc-button calc-button-gray" onclick="s('....do..')">m-</button>
  <button type="button" class="calc-button calc-button-gray" onclick="s('......it')">m+</button>
  <button type="button" class="calc-button calc-button-red calc-button-big" onclick="a('/')">÷</button>
  </p>
  <p class="calc-row">
  <button type="button" class="calc-button" onclick="a('7')">7</button>
  <button type="button" class="calc-button" onclick="a('8')">8</button>
  <button type="button" class="calc-button" onclick="a('9')">9</button>
  <button type="button" class="calc-button calc-button-red calc-button-big" onclick="a('*')">x</button>
  </p>
  <p class="calc-row">
  <button type="button" class="calc-button" onclick="a('4')">4</button>
  <button type="button" class="calc-button" onclick="a('5')">5</button>
  <button type="button" class="calc-button" onclick="a('6')">6</button>
  <button type="button" class="calc-button calc-button-red calc-button-big" onclick="a('-')">-</button>
  </p>
  <p class="calc-row">
  <button type="button" class="calc-button" onclick="a('1')">1</button>
  <button type="button" class="calc-button" onclick="a('2')">2</button>
  <button type="button" class="calc-button" onclick="a('3')">3</button>
  <button type="button" class="calc-button calc-button-red calc-button-big" onclick="a('+')">+</button>
  </p>
  <p class="calc-row">
  <button type="button" class="calc-button" onclick="a('0')">0</button>
  <button type="button" class="calc-button" onclick="a('.')">.</button>
  <button type="button" class="calc-button" onclick="s('')">C</button>
  <button type="button" class="calc-button calc-button-yellow calc-button-big" onclick="e()">=</button>
  </p>
  </form>

  <script>
  function s(v) { document.getElementById('res').value = v }
  function a(v) { document.getElementById('res').value += v }
  function e() { try { s(eval(document.getElementById('res').value)) } catch(e) { s('Error') } }
  </script>

Код CSS


Code
.calc {
  margin: 50px auto;
  padding: 15px;
  width: 177px;
  border: 1px solid #222;
  border-radius: 4px;
  background-color: #3d4543;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3d4543), color-stop(100%, #2f2a2f));
  background-image: -webkit-linear-gradient(top, #3d4543, #2f2a2f);
  background-image: -moz-linear-gradient(top, #3d4543, #2f2a2f);
  background-image: -ms-linear-gradient(top, #3d4543, #2f2a2f);
  background-image: -o-linear-gradient(top, #3d4543, #2f2a2f);
  background-image: linear-gradient(top, #3d4543, #2f2a2f);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 4px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 4px rgba(0, 0, 0, 0.5);
}

.calc-display {
  margin: 0 0 20px;
  padding: 3px;
  background: #222;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.calc-display-input {
  display: block;
  width: 100%;
  padding: 0 8px;
  font: 26px/35px UbuntuMono, monospace;
  color: #444;
  height: 35px;
  text-align: right;
  background-clip: padding-box;
  /* Don't let the background bleed outside the border */
  border: 1px solid #222;
  border-radius: 2px;
  background-color: #bccd95;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bccd95), color-stop(100%, #e0f5b1));
  background-image: -webkit-linear-gradient(top, #bccd95, #e0f5b1);
  background-image: -moz-linear-gradient(top, #bccd95, #e0f5b1);
  background-image: -ms-linear-gradient(top, #bccd95, #e0f5b1);
  background-image: -o-linear-gradient(top, #bccd95, #e0f5b1);
  background-image: linear-gradient(top, #bccd95, #e0f5b1);
  -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.calc-row {
  margin-top: 7px;
  zoom: 1;
}
.calc-row:before, .calc-row:after {
  content: "";
  display: table;
}
.calc-row:after {
  clear: both;
}

.calc-button {
  float: left;
  padding: 0;
  margin: 0 0 0 7px;
  width: 39px;
  font: 14px/23px UbuntuMono, monospace;
  color: white;
  text-align: center;
  text-shadow: 0 1px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  background-clip: padding-box !important;
  /* !important because FF overrides the value on :active */
  border: 0;
  /* IE 8 fix */
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  cursor: pointer;
  background-color: #313131;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #313131), color-stop(100%, #1c1c1c));
  background-image: -webkit-linear-gradient(top, #313131, #1c1c1c);
  background-image: -moz-linear-gradient(top, #313131, #1c1c1c);
  background-image: -ms-linear-gradient(top, #313131, #1c1c1c);
  background-image: -o-linear-gradient(top, #313131, #1c1c1c);
  background-image: linear-gradient(top, #313131, #1c1c1c);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.calc-button:first-child {
  margin-left: 0;
}
.calc-button:active {
  background: #282828;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.calc-button-gray {
  background-color: #6f6f6f;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6f6f6f), color-stop(100%, #515151));
  background-image: -webkit-linear-gradient(top, #6f6f6f, #515151);
  background-image: -moz-linear-gradient(top, #6f6f6f, #515151);
  background-image: -ms-linear-gradient(top, #6f6f6f, #515151);
  background-image: -o-linear-gradient(top, #6f6f6f, #515151);
  background-image: linear-gradient(top, #6f6f6f, #515151);
}
.calc-button-gray:active {
  background: #555;
}

.calc-button-red {
  background-color: #ff4561;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff7286), color-stop(100%, #ff4561));
  background-image: -webkit-linear-gradient(top, #ff7286, #ff4561);
  background-image: -moz-linear-gradient(top, #ff7286, #ff4561);
  background-image: -ms-linear-gradient(top, #ff7286, #ff4561);
  background-image: -o-linear-gradient(top, #ff7286, #ff4561);
  background-image: linear-gradient(top, #ff7286, #ff4561);
}
.calc-button-red:active {
  background: #ff4561;
}

.calc-button-yellow {
  background-color: #ffa70c;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffb935), color-stop(100%, #ffa70c));
  background-image: -webkit-linear-gradient(top, #ffb935, #ffa70c);
  background-image: -moz-linear-gradient(top, #ffb935, #ffa70c);
  background-image: -ms-linear-gradient(top, #ffb935, #ffa70c);
  background-image: -o-linear-gradient(top, #ffb935, #ffa70c);
  background-image: linear-gradient(top, #ffb935, #ffa70c);
}
.calc-button-yellow:active {
  background: #ffa70c;
}

.calc-button-big {
  font-size: 16px;
}

Также у нас есть обычный калькулятор без стилей.

Автор: Зак Смит.


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (2)
Павел Ляшко 2016-04-27 в 17:28 / МатериалСпам
Нолик при нажатии на цифры не убирается. На вычисление это не влияет, но все же... Дальше. Для чего клавиши, которые выводят Just do it? Также, после того как нажимаешь на циферки, эти фразы не убираются.
0
Денис Абдуллин 2016-04-27 в 23:41 / Материал
Это не полноценный калькулятор, об этом я написал.
Изначально он вообще не работал, просто по-быстрому добавлена возможность ввода чисел и нескольких математических операций.
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.