Дата и время публикации : 13 Сентября 17 в 08:41 | Раздел : Прочее для uCoz
| Параметр | Значение |
|---|---|
| Дата публик. | 13 Сентября 17, Среда, 08:41 |
| Адапт. дизайн | |
| Обновления | История обновлений |
| Просмотрен | 893 |
Реализация цифровых часов с применением плагина Vue.js, которые выводят текущую дату и время на экран. Установка и настройка очень проста. Вам достаточно выбрать у себя на сайте нужное под них место и разместить код, указанный ниже. Хотелось бы отметить то, что зная CSS, вы сможете изменить внешний вид, шрифт. размер и многое другое.
И так приступим к установке.
1. За вывод структуры часов отвечает HTML код, который вам нужно поместить в то место где вы хотите видеть данную реализацию.
2. Далее подключим саму библиотеку Vue.js из CDN
3. И разместим ниже функцию, которая вызывает и реализовывает наши цифровые часы :
<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>
4. Остается дело за малым! Нам нужно указать стили наших часов, в которых вы как раз-таки можете производить изменения и работать над внешним видом.
На этом все.
Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.
Вход РегистрацияParallelism — стильный шаблон сайта для организации портфолио или фотографий. Необычность его в том, что прокрутка здесь не вертикальная, как...
