Добро пожаловать на форум!
Новые сообщения Участники Правила форума Поиск RSS
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные пользователи Новые участники
Болт (3758)
XemorDio (2728)
Skyline (2698)
Strelok41 (2177)
_Zmey_ [05.12.2017]
Потеряшка [03.12.2017]
ORIN2150 [02.12.2017]
Fulkast [01.12.2017]
поррр [23.11.2017]
Страница 1 из 11
Форум » Web-раздел » Скрипты uCoz » JavaScript калькулятор для uCoz
JavaScript калькулятор для uCoz
XemorDio Дата: Воскресенье, 21.08.2016, 07:32 | Сообщение # 1
「 Рипер, техник сайта 」
Группа: Модераторы
Сообщений: 2728
Награды: 13 Репутация: 295
Статус: Offline

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

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

Установка калькулятора:
Для начала подключаем стили перед
Код
</head>
:
Код
<style>
/* Gradient text only on Webkit */
.warning {
      background: -webkit-linear-gradient(45deg, #c97874 10%, #463042 90%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: #8c5059;
      font-weight: 400;
      margin: 0 auto 6em;
      max-width: 9em;
}

.calculator {
      font-size: 28px;
      margin: 0 auto;
      width: 10em;
}
.calculator::before, .calculator::after {
      content: " ";
      display: table;
}
.calculator::after {
      clear: both;
}

/* Calculator after dividing by zero */
.broken {
      -webkit-animation: broken 2s;
      animation: broken 2s;
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);
      opacity: 0;
}

.viewer {
      color: #c97874;
      float: left;
      line-height: 3em;
      text-align: right;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 7.5em;
      height: 3em;
}

button {
      border: 0;
      background: rgba(42, 50, 113, 0.28);
      color: #6cacc5;
      cursor: pointer;
      float: left;
      font: inherit;
      margin: 0.25em;
      width: 2em;
      height: 2em;
      -webkit-transition: all 0.5s;
      transition: all 0.5s;
}
button:hover {
      background: #201e40;
}
button:focus {
      outline: 0;
      /* The value fade-ins that appear */
}
button:focus::after {
      -webkit-animation: zoom 1s;
      animation: zoom 1s;
      -webkit-animation-iteration-count: 1;
      animation-iteration-count: 1;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      content: attr(data-num);
      cursor: default;
      font-size: 100px;
      position: absolute;
      top: 1.5em;
      left: 50%;
      text-align: center;
      margin-left: -24px;
      opacity: 0;
      width: 48px;
}

/* Same as above, modified for operators */
.ops:focus::after {
      content: attr(data-ops);
      margin-left: -210px;
      width: 420px;
}

/* Same as above, modified for result */
.equals:focus::after {
      content: attr(data-result);
      margin-left: -300px;
      width: 600px;
}

/* Reset button */
.reset {
      background: rgba(201, 120, 116, 0.28);
      color: #c97874;
      font-weight: 400;
      margin-left: -77px;
      padding: 0.5em 1em;
      position: absolute;
      top: -20em;
      left: 50%;
      width: auto;
      height: auto;
      /* When button is revealed */
}
.reset:hover {
      background: #c97874;
      color: #100a1c;
}
.reset.show {
      top: 20em;
      -webkit-animation: fadein 4s;
      animation: fadein 4s;
}

/* Animations */
/* Values that appear onclick */
@-webkit-keyframes zoom {
      0% {
      -webkit-transform: scale(0.2);
      transform: scale(0.2);
      opacity: 1;
      }
      70% {
      -webkit-transform: scale(1);
      transform: scale(1);
      }
      100% {
      opacity: 0;
      }
}
@keyframes zoom {
      0% {
      -webkit-transform: scale(0.2);
      transform: scale(0.2);
      opacity: 1;
      }
      70% {
      -webkit-transform: scale(1);
      transform: scale(1);
      }
      100% {
      opacity: 0;
      }
}
/* Division by zero animation */
@-webkit-keyframes broken {
      0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
      }
      5% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg);
      }
      15% {
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg);
      }
      20% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg);
      }
      25% {
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg);
      }
      50% {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      }
      70% {
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);
      opacity: 1;
      }
      75% {
      opacity: 0;
      }
      100% {
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);
      }
}
@keyframes broken {
      0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
      }
      5% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg);
      }
      15% {
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg);
      }
      20% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg);
      }
      25% {
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg);
      }
      50% {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      }
      70% {
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);
      opacity: 1;
      }
      75% {
      opacity: 0;
      }
      100% {
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);
      }
}
/* Reset button fadein */
@-webkit-keyframes fadein {
      0% {
      top: 20em;
      opacity: 0;
      }
      50% {
      opacity: 0;
      }
      100% {
      opacity: 1;
      }
}
@keyframes fadein {
      0% {
      top: 20em;
      opacity: 0;
      }
      50% {
      opacity: 0;
      }
      100% {
      opacity: 1;
      }
}
@media (min-width: 420px) {
      .calculator {
      width: 12em;
      }

      .viewer {
      width: 8.5em;
      }

      button {
      margin: 0.5em;
      }
}

      </style>

Код калькулятора:
Код
<div id="calculator" class="calculator">

      <button id="clear" class="clear">C</button>

      <div id="viewer" class="viewer">0</div>

      <button class="num" data-num="7">7</button>
      <button class="num" data-num="8">8</button>
      <button class="num" data-num="9">9</button>
      <button data-ops="plus" class="ops">+</button>

      <button class="num" data-num="4">4</button>
      <button class="num" data-num="5">5</button>
      <button class="num" data-num="6">6</button>
      <button data-ops="minus" class="ops">-</button>

      <button class="num" data-num="1">1</button>
      <button class="num" data-num="2">2</button>
      <button class="num" data-num="3">3</button>
      <button data-ops="times" class="ops">*</button>

      <button class="num" data-num="0">0</button>
      <button class="num" data-num=".">.</button>
      <button id="equals" class="equals" data-result="">=</button>
      <button data-ops="divided by" class="ops">/</button>
</div>

Подключаем JavaScript перед
Код
</body>
:
Код
<script src="http://top-tracker.3dn.ru/ucoz/kl.js"></script>
<script>
   (function () {
   'use strict';
   var el = function (element) {
   if (element.charAt(0) === '#') {
   return document.querySelector(element);
   }
   return document.querySelectorAll(element);
   };
   var viewer = el('#viewer'), equals = el('#equals'), nums = el('.num'), ops = el('.ops'), theNum = '', oldNum = '', resultNum, operator;
   var setNum = function () {
   if (resultNum) {
   theNum = this.getAttribute('data-num');
   resultNum = '';
   } else {
   theNum += this.getAttribute('data-num');
   }
   viewer.innerHTML = theNum;
   };
   var moveNum = function () {
   oldNum = theNum;
   theNum = '';
   operator = this.getAttribute('data-ops');
   equals.setAttribute('data-result', '');
   };
   var displayNum = function () {
   oldNum = parseFloat(oldNum);
   theNum = parseFloat(theNum);
   switch (operator) {
   case 'plus':
   resultNum = oldNum + theNum;
   break;
   case 'minus':
   resultNum = oldNum - theNum;
   break;
   case 'times':
   resultNum = oldNum * theNum;
   break;
   case 'divided by':
   resultNum = oldNum / theNum;
   break;
   default:
   resultNum = theNum;
   }
   if (!isFinite(resultNum)) {
   if (isNaN(resultNum)) {
   resultNum = 'You broke it!';
   } else {
   resultNum = 'Look at what you\'ve done';
   el('#calculator').classList.add('broken');
   el('#reset').classList.add('show');
   }
   }
   viewer.innerHTML = resultNum;
   equals.setAttribute('data-result', resultNum);
   oldNum = 0;
   theNum = resultNum;
   };
   var clearAll = function () {
   oldNum = '';
   theNum = '';
   viewer.innerHTML = '0';
   equals.setAttribute('data-result', resultNum);
   };
   for (var i = 0, l = nums.length; i < l; i++) {
   if (window.CP.shouldStopExecution(1)) {
   break;
   }
   nums[#91;i].onclick = setNum;
   }
   window.CP.exitedLoop(1);
   for (var i = 0, l = ops.length; i < l; i++) {
   if (window.CP.shouldStopExecution(2)) {
   break;
   }
   ops[i].onclick = moveNum;
   }
   window.CP.exitedLoop(2);
   equals.onclick = displayNum;
   el('#clear').onclick = clearAll;
   el('#reset').onclick = function () {
   window.location = window.location;
   };
}());
   </script>
Форум » Web-раздел » Скрипты uCoz » JavaScript калькулятор для uCoz
Страница 1 из 11
Поиск:
01:42
Обновить

Хостинг от uCoz | Design by XemorDio | MODSTALKER © 2009-2017