Форма входа

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

    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

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

    ЦИФРОВЫЕ ЧАСЫ с применением Vue.js

    Дата добавления: 20.08.2017 - 02:25
    Добавил: Buger
    Количество просмотров: 4.1k
    Количество комментариев: 0
    Размер файла: 2.6 Kb
    Рейтинг материала: 1.5 / 2
    ЦИФРОВЫЕ ЧАСЫ с применением Vue.js
    БЕСПЛАТНО
    рейтинг 1.5
    /
    голосов 2
    Реализация цифровых часов с применением плагина Vue.js, которые выводят текущую дату и время на экран. Установка и настройка очень проста. Вам достаточно выбрать у себя на сайте нужное под них место и разместить код, указанный ниже. Хотелось бы отметить то, что зная CSS, вы сможете изменить внешний вид, шрифт. размер и многое другое.

    И так приступим к установке.
    За вывод структуры часов отвечает HTML код, который вам нужно поместить в то место где вы хотите видеть данную реализацию.
    Код
    <div id="clock">
      <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>


    Остается дело за малым! Нам нужно указать стили наших часов, в которых вы как раз-таки можете производить изменения и работать над внешним видом.
    Код
    #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;
      }


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


    Поделись с друзьями: