>
Всего Online : 1
Гости сайта : 1
Пользователей: 0

Кто Online :

Кто посетил нас сегодня :
Всего : 387
Новых за месяц: 5
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Из них :
Пользователей 380
Проверенных: 6
Модераторов: 0
Админов: 1
Из них :
Парней: 318
Девушек: 69
25 Ноября 18, Воскресенье, 11:33
Обновление от : andruha061

- Обновлена цветовая схема (частично, типо новый уровень)
- Исправлены ошибки, удален лишний код в стилях
- Новая система отображения личных сообщений
- Новая система окон
- Отчищены профили от мусора, в том числе и стены
- Все записи пользователей на стене как и комментарии к ним также удалены
- Чуток изменена страница с материалами
- Убран общий чат
- Новая система загрузки обложек в профили

PS. Нет, сайт не возрождён. Просто захожу и вижу что люди здесь есть, просмотры, посещения. Захотелось вернуться немного к этому всеми, вспомнить 7UARTS.


16 Февраля 18, Пятница, 01:05
Обновление от : andruha061

- Обновлен шаблон Torrent-Games для uCoz (Подробнее конце описания материала)
- Ссылка на шаблон : клик.


06 Февраля 18, Вторник, 17:47
Обновление от : andruha061

- Исправлен баг с личными сообщениями
- Вывод сообщений в Ajax-окне


04 Февраля 18, Воскресенье, 18:35
Обновление от : andruha061

- Обновлен вид персональных страниц для пользователей, у которых не установлена обложка.


04 Февраля 18, Воскресенье, 17:00
Обновление от : andruha061

- Обновлена система вывода комментариев на странице пользователя :

Теперь на странице пользователя отображается 30 последних комментариев которые он оставил. Если нужен полный список, то рядом есть кнопка для открытия страницы с полным списком комментариев. Плюс убрал показ комментариев через IFrame.


04 Февраля 18, Воскресенье, 15:02
Обновление от : andruha061

- Обновлена частично цветовая схема дизайна.
- Обновлены иконки в меню.
- Обновлена страница с материалами :
Если к материалу прикреплено больше 7 изображений, то будет использоваться прокрутка изображений в блоке.
- Обновлены табы на странице пользователя.
- Поставил эффект для BODY при загрузке страницы (не прелоадер)
- Обновлены цвет текста и заголовков.
- На странице пользователя во вкладке комментарии теперь можно перейти по ссылке к материалу где был оставлен комментарий.
- Может что-то еще...


03 Февраля 18, Суббота, 07:38
Обновление от : andruha061

 - Частично улучшен дизайн сайта (это не точно).
 - Шапка и подвал сайта на всю ширину страницы.
 - Улучшено отображение блоков.
 - Небольшие поправки в HTML-редакторе.
 - Обновлен дизайн чата.
 - Новая система вывода обновлений в окне.
 - Частично обновлена персональная страница пользователя.
 - Обновлен вид материалов для блога.
 - Частично обновлена главная страница.
- Обновлено меню навигации.


09 Января 18, Вторник, 05:28
Обновление от : andruha061

 - Оптимизация CSS и Java.
 - Улучшение стабильности сайта. 


08 Января 18, Понедельник, 21:29
Обновление от : andruha061

- Обновлена до конца мастерская сайта.


06 Января 18, Суббота, 12:29
Обновление от : andruha061

 - Исправлены баги после обновления.
 - Пофиксил отображение комментариев на странице пользователя.


01 Января 18, Понедельник, 01:27
Обновление от : andruha061

-  Открытие сайта после огромного обновления.
 - Подробнее в группе вк : https://vk.com/7uarts


Последних 10 новых тем на форуме.

VK Clear New Design (by 7uarts) для сайта ВКонтакте

Основной форум : Темы для сайтов | Дата : 29 Января 18

Заявка на бесплатные адаптации шаблонов под uCoz

Основной форум : Помощь сайтам созданных в системе uCoz | Дата : 24 Января 18

Тема BlackHead-Full Container для 7UARTS.

Основной форум : Темы для сайтов | Дата : 24 Января 18

Что такое Stylish и что тут создавать?

Основной форум : Темы для сайтов | Дата : 24 Января 18

Описание и правила форума

Основной форум : Темы для сайтов | Дата : 24 Января 18

Склонение числительных на uCoz

Основной форум : Уроки и решения для uCoz | Дата : 23 Декабря 17

Смена стилей сайта с запоминанием на Cookie

Основной форум : Прочее / Разное | Дата : 21 Декабря 17

Архив всех комментариев для uCoz

Основной форум : Уроки и решения для uCoz | Дата : 21 Декабря 17

1K вместо 1000

Основной форум : Уроки и решения для uCoz | Дата : 21 Декабря 17

Когда заходил пользователь на сайт (как Вконтакте) для uCoz

Основной форум : Уроки и решения для uCoz | Дата : 30 Ноября 17

Последних 10 новых комментариев.

good04717 / Minimal Soon - Страница технических работ

Не работает, сделал все по инструкции и кроме карт...

andruha061 / Современный качественный шаблон для uCoz - IPS4 Focus (Redesign)

нет конечно, какая мне с этого выгода?
ты ж...

Lexa9090 / Современный качественный шаблон для uCoz - IPS4 Focus (Redesign)

А можно приобрести лишь часть кода? Например, мне ...

rubik2092 / Шаблон Libra для uCoz

Подскажите последовательность действий? как что и ...

andruha061 / Современный качественный шаблон для uCoz - IPS4 Focus (Redesign)

обновил ссылку, вернул старый укозовский домен : <...

magomedomarov9 / Современный качественный шаблон для uCoz - IPS4 Focus (Redesign)

Ого супер, форум вообще класс...

andruha061 / Developer - шаблон для блога / материалов для uCoz

уже нету) значит убрал) я в первый раз когда зашел...

Mopnex / Developer - шаблон для блога / материалов для uCoz

Я поставил подгрузку css вниз страницы, что позвол...

andruha061 / Developer - шаблон для блога / материалов для uCoz

рад что ты воспользоваться моей адаптацией) молоде...

Mopnex / Developer - шаблон для блога / материалов для uCoz

если кому интересно, что получилось у меня из шабл...

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

Дата и время публикации : 01 Января 16 в 13:58 | Раздел : Прочее для uCoz


Параметр Значение
Дата публик. 01 Января 16, Пятница, 13:58
Размер файла 2.2 Kb
Адапт. дизайн
Обновления Не производились
Просмотрен 441
Загружен 29

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

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



Установка : 

1) Для начала подключаем стили перед </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>

 

2) Код калькулятора: 

<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>

 

3) Подключаем 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>

На данный момент никто не оставил комментариев.

Оставить комментарий :


Требуется войти в свой аккаунт.

Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.

Вход Регистрация

Смотрите также :

Шаблон для создания сайта о путешествиях

Это отличный шаблон, база для создания сайта. Здесь есть отличная вступительная главная страница, шаблон простой страницы с сайтбаром (левым или пр...


Материал
По возможности мы всех призываем указывать источник материала если вы нашли у нас что-то дейстительно интересное и новое для себя.

Понравился материал? Поделись с ним в социальных сетях !


Загрузить материал (2.2 Kb)
Ссылки

Используйте быстрые ссылки для вставки в сообщениях форума.

Ccылка
BB-Code
HTML-код