Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
ЦИФРОВЫЕ ЧАСЫ с применением Vue.js
Дата добавления: 20.08.2017 - 02:25
Категория: Хаки / Дополнения
Добавил: Buger
Количество просмотров: 149
Количество комментариев: 0
Размер файла: 2.6Kb
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
Реализация цифровых часов с применением плагина Vue.js, которые выводят текущую дату и время на экран. Установка и настройка очень проста. Вам достаточно выбрать у себя на сайте нужное под них место и разместить код, указанный ниже. Хотелось бы отметить то, что зная CSS, вы сможете изменить внешний вид, шрифт. размер и многое другое.
И так приступим к установке.
За вывод структуры часов отвечает HTML код, который вам нужно поместить в то место где вы хотите видеть данную реализацию.
Далее подключим саму библиотеку Vue.js из CDN
и разместим ниже функцию, которая вызывает и реализовывает наши цифровые часы
Остается дело за малым! Нам нужно указать стили наших часов, в которых вы как раз-таки можете производить изменения и работать над внешним видом.
Источник: http://art-ucoz.ru
И так приступим к установке.
За вывод структуры часов отвечает HTML код, который вам нужно поместить в то место где вы хотите видеть данную реализацию.
Код
<div id="clock">
<p class="date">{{ date }}</p>
<p class="time">{{ time }}</p>
<p class="text">ЦИФРОВЫЕ ЧАСЫ с Vue.js</p>
</div>
<p class="date">{{ date }}</p>
<p class="time">{{ time }}</p>
<p class="text">ЦИФРОВЫЕ ЧАСЫ с Vue.js</p>
</div>
Далее подключим саму библиотеку Vue.js из CDN
Код
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
и разместим ниже функцию, которая вызывает и реализовывает наши цифровые часы
Код
<script>
var clock = new Vue({
el: '#clock',
data: {
time: '',
date: ''
}
});
var week = ['ВС', 'ПОН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СУБ'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
var cd = new Date();
clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth() + 1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
};
function zeroPadding(num, digit) {
var zero = '';
for (var i = 0; i < digit; i++) {
zero += '0';
}
return (zero + num).slice(-digit);
}
</script>
var clock = new Vue({
el: '#clock',
data: {
time: '',
date: ''
}
});
var week = ['ВС', 'ПОН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СУБ'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
var cd = new Date();
clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth() + 1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
};
function zeroPadding(num, digit) {
var zero = '';
for (var i = 0; i < digit; i++) {
zero += '0';
}
return (zero + num).slice(-digit);
}
</script>
Остается дело за малым! Нам нужно указать стили наших часов, в которых вы как раз-таки можете производить изменения и работать над внешним видом.
Код
#clock {
font-family: sans-serif;
color: #ffffff;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #daf6ff;
text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {
letter-spacing: 0.05em;
font-size: 80px;
padding: 5px 0;
}
#clock .date {
letter-spacing: 0.1em;
font-size: 24px;
}
#clock .text {
letter-spacing: 0.1em;
font-size: 12px;
padding: 20px 0 0;
}
font-family: sans-serif;
color: #ffffff;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #daf6ff;
text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {
letter-spacing: 0.05em;
font-size: 80px;
padding: 5px 0;
}
#clock .date {
letter-spacing: 0.1em;
font-size: 24px;
}
#clock .text {
letter-spacing: 0.1em;
font-size: 12px;
padding: 20px 0 0;
}
Источник: http://art-ucoz.ru
