Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Часы на CSS c применением JavaScript

Дата добавления: 14.04.2017 - 01:35
Добавил: Buger
Количество просмотров: 179
Количество комментариев: 0
Размер файла: 3.5Kb
Рейтинг материала: 5.0 / 1
Часы на CSS c применением JavaScript
рейтинг 5.0
/
голосов 1
Простой и красивый вид часов созданный на чистом CSS коде с применением JavaScript. Почему был применен JS? Для того чтобы показывать точное реальное время пользователя. Их можно использовать на сайте в отдельном блоке, что бы пользователи сайта всегда могли знать сколько времени на данный момент.

HTML
Код
<div class="clock">
  <div class="hour-hand"></div>
  <div class="minute-hand"></div>
  <div class="second-hand"></div>
</div>


CSS
Код
.clock {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 400px;
  width: 400px;
  background-color: #fff;
  border-radius: 50%;
  border: 24px solid #DF554C;
  background-image: radial-gradient(circle at center, #507D9C 8px, transparent 8px), radial-gradient(circle at center, white 50%, transparent 50%, transparent 65%, white 65%), linear-gradient(to right, transparent 50%, #507D9C 50%, transparent 51%), linear-gradient(to bottom, transparent 50%, #507D9C 50%, transparent 51%), linear-gradient(-30deg, transparent 50%, #507D9C 50%, transparent 51%), linear-gradient(30deg, transparent 50%, #507D9C 50%, transparent 51%), linear-gradient(60deg, transparent 50%, #507D9C 50%, transparent 51%), linear-gradient(-60deg, transparent 50%, #507D9C 50%, transparent 51%);
}

.hour-hand {
  position: absolute;
  height: 80px;
  width: 8px;
  margin: auto;
  top: -20%;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 4px;
  background-color: #507D9C;
  transform-origin: bottom;
  transform: rotate(0deg);
}

.minute-hand {
  position: absolute;
  height: 120px;
  width: 8px;
  margin: auto;
  top: -30%;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 4px;
  background-color: #507D9C;
  transform-origin: bottom;
  transform: rotate(90deg);
}

.second-hand {
  position: absolute;
  height: 120px;
  width: 2px;
  margin: auto;
  top: -30%;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 4px;
  background-color: #507D9C;
  transform-origin: bottom;
  transform: rotate(180deg);
}


JS
Код
function updateClock(hours, minutes, seconds) {
  var hourDegrees = hours * 30;
  var minuteDegrees = minutes * 6;
  var secondDegrees = seconds * 6;
  $('.hour-hand').css({
  'transform': `rotate(${hourDegrees}deg)`
  });
  $('.minute-hand').css({
  'transform': `rotate(${minuteDegrees}deg)`
  });
  $('.second-hand').css({
  'transform': `rotate(${secondDegrees}deg)`
  });
  }
  setClockWithCurrentTime();
  function setClockWithCurrentTime() {
  var date = new Date();
  var hours = ((date.getHours() + 11) % 12 + 1);
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  updateClock(hours, minutes, seconds);
  }
  setInterval(setClockWithCurrentTime, 1000);


Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.