Часы JavaScript для Bootstrap 4 / Часы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.0

Каталог: Сниппеты Bootstrap

Категория: Часы

Bootstrap: 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Вес файла: 1.6 Kb

Уникальный ID: 3354

Количество символов:

Посмотрели: 2883 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-3354-20

Скачали бесплатно: 136 раз

Прокомментировали: 0 раз

Рейтинг: 4.2 / 5 - 6 голосов

Тип лицензии: CC BY 4.0

Авторство: //u.to/-vuwFA

Информация: Пользователям

Информация: Правообладателям

Теги: bootstrap 4, Clock, адаптивные часы, JavaScript clock, js clock, Часы

Поделился: BootstrapТема

Добавлено: 2019-02-14 в 19:07

Метка: 1550160444

⇄ ⇅

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<style>
main.container-fluid {margin:0;padding:0;}
.nightmode {
 background-color:#121212;
 background-image: linear-gradient(to right, #274046, #E6DADA);
 color:#fff;
 text-shadow:1px 1px 1px black;
}
.daymode {
 background-color: #87ceeb;
 background-image: linear-gradient(to bottom left, #87ceeb 0%,#fff 100%);
 color:#333;
 text-shadow:1px 1px 10px white;
}
.clocktext {
 display:block;
 margin:0;
 padding:1px 0 0 0;
 width:100%;
 text-align:center;
 line-height:1.2;
 white-space:nowrap;
}
#date {
 font-size:1.3rem;
 padding-top:15px;
}
#time {
 font-size:5rem;
 margin:1px 0 0 0;
}
#time span {
 display:inline-block;
 padding:0;
 vertical-align: baseline;
 text-align:left;
 width: 2em;
 margin:0 0 0 0.5em;
 font-size:1.5rem;
 line-height:1.5;
 white-space:normal;
}
@media (min-width: 576px) {
#date {font-size:2rem;}
#time {font-size:8rem;}
#time span {font-size:2rem;line-height: 2;}
}
@media (min-width: 768px) {
#date {font-size:3rem;}
#time {font-size:11rem;}
#time span {font-size:3rem;line-height: 2;}
}
@media (min-width: 992px) {
#date {font-size:4rem;}
#time {font-size:13rem;}
#time span {font-size:4rem;line-height: 2;}
}
@media (min-width: 1200px) {
#date {font-size:4.5rem;}
#time {font-size:18rem;}
#time span {font-size:4.5rem;line-height: 2;}
}
</style>

<main class="container-fluid nightmode text-center">
 <time id="date" class="clocktext"> </time>
 <time id="time" class="clocktext"> <span> </span> </time>
</main>

<script>
var now, dd, td;
var months = ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"];
var days = ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"];

document.addEventListener("DOMContentLoaded", init, false);
function init(){
 dd = document.getElementById("date");
 td = document.getElementById("time");
 updateTime();
 setInterval(updateTime,1000);
}
function updateTime(){
 var clockdata = getClockStrings();
 dd.innerHTML = clockdata.datehtml;
 td.innerHTML = clockdata.timehtml;
 dd.dateTime = now.toISOString();
 td.dateTime = now.toISOString();
}
function getClockStrings(){
 now = new Date();
 var year = now.getFullYear();
 var month = months[now.getMonth()];
 var date = now.getDate();
 var day = days[now.getDay()];
 var hour = now.getHours();
 var minutes = now.getMinutes();
 var seconds = now.getSeconds();
 var meridian = hour < 24 ? "AM" : "PM"; //
 var clockhour = hour > 24 ? hour - 24 : hour;
 if (hour === 0) {clockhour = 24;}
 var clockminutes = minutes < 10 ? "0" + minutes : minutes;
 var clockseconds = seconds < 10 ? "0" + seconds : seconds;
 var datehtml = day + ", " + month + " " + date + ", " + year;
 var timehtml = clockhour + ":" + clockminutes + "<span>:" + clockseconds + " " + meridian + "</span>";
 return {"datehtml":datehtml,"timehtml":timehtml};
}
</script>