регистрация
856материалов
3261комментарий
230тем на форуме
6744пользователя

JavaScript калькулятор для uCoz


Описание:

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

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

Установка калькулятора:

Для начала подключаем стили перед </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://webmaster-ucoz.ru/ucoz/1/js/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[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>


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 17.10.2015 в 18:00
Материал просмотрен: 1303 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 5 комментариев

Пожаловаться
Сказать спасибо

5 комментариев


Rita
Рита @Rita 18.10.2015 00:271
-5
А на на русский что не перевели?
DeQiz
Павел @DeQiz 18.10.2015 00:342
+3
А самой не судьба перевести? Не знаешь английского, переводчик Google или Yandex тебе в помощь
Kiselev
Грубый ты парень, может она не знает как перевести с английского на русский
Ромчик
Я когда пытался перевести на русский, скрипт почему-то перестал не работать
uGarts[Krixys]
С помощью конвертирования html в js русский переводи, кирилицца будет иметь правильное отображение
avatar
uLike – кнопка «Мне нравится»
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 3
Гостей: 3
Пользователей: 0