1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

Часы для сайта (javascript)

Тема в разделе "Модификации шаблонов", создана пользователем Skaiman, 30 июн 2014.

Загрузка
  1. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    223
    Версия XF:
    1.4.0
    Представляю Вашему вниманию часики для сайта. Часы не флеш, просто на яве.

    [​IMG]

    Для часов используется @font-face, скачать можно будет ниже.
    Редактируем шаблон header, вниз добавляем:
    Код:
    <div class="date"><span id="hours"</span></div>
    <script type="text/javascript">
    obj_hours=document.getElementById("hours");
    name_month=new Array ("01","02","03", "04","05", "06","07","08","09", "10","11","12");
    name_day=new Array ("Sun","Mon", "Tue","Wed","Thu", "Fri","Sat");
    function wr_hours()
    {
    time=new Date();
    time_sec=time.getSeconds();
    time_min=time.getMinutes();
    time_hours=time.getHours();
    time_wr=((time_hours<10)?"0":"")+time_hours;
    time_wr+=":";
    time_wr+=((time_min<10)?"0":"")+time_min;
    time_wr+=":";
    time_wr+=((time_sec<10)?"0":"")+time_sec;
    time_wr=""+name_day[time.getDay()]+" • "+time.getDate()+":"+name_month[time.getMonth()]+" • "+time.getFullYear()+" • "+time_wr;
    obj_hours.innerHTML=time_wr;
    }
    wr_hours();
    setInterval("wr_hours();",1000);
    </script>
    Затем в header.css:
    Код:
    @font-face {
        font-family: 'digifaw';
        src: url('../fonts/digifaw.eot');
        src: local('☺'), url('../fonts/digifaw.woff') format('woff'), url('../fonts/digifaw.ttf') format('truetype'), url('../fonts/digifaw.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    .date {
        position: absolute;
        top: 80px;
        right: 47px;
        background: rgba(126, 126, 126, 0.2) no-repeat;
        border: 1px solid #999999;
        border-radius: 3px;
        padding: 4px 6px;
        color: #043E57;
        text-decoration: none;
        font-family: digifaw;
        font-size: 11px;
    }
    В корне создаем папку fonts и заливаем в нее шрифты или просто кидаем папку из архива.
    Настройка вида часов не сложная. Можно подогнать под свой стиль. В CSS смотрим:
    background - цвет фона (у меня серый с прозрачностью 0,2 от 0 до 1)
    border - бордюрчик вокруг часов (толщиной 1 пиксель, сплошной линией, серый)
    border-radius - закругления уголков (у меня 3 пикселя)
    color - цвет шрифта
    font-family - шрифт (у меня digifaw, подключенный @font-face)
    font-size - размер шрифта.

    Позиционирование часов absolute, это значит можно их перегнать в любое место, с помощью:
    top - отступ от верха и right - отступ справа.

    Да, чуть не забыл, :) Дни недели можно сделать на русском, но только не с этим шрифтом, в нем нет кириллицы. Пробовал шрифт DS crystal, аналогичный этому с кириллицей, но он мне не понравился, там цифры 1 и 7 почти одинаковые, да и вообще. Дам и его. Дни меняются с скрипте, строчка:
    Код:
    name_day=new Array ("Sun","Mon", "Tue","Wed","Thu", "Fri","Sat");
    Сокращения для дней недели РУС/ENG

    — — — — — — — — — — — — — — — — —
    1 Понедельник | Пнд | Пн |
    2 Вторник | Втр | Вт |
    3 Среда | Срд | Ср |
    4 Четверг | Чтв | Чт |
    5 Пятница | Птн | Пт |
    6 Суббота | Сбт | Сб |
    7 Воскресенье | Вск | Вс |
    — — — — — — — — — — — — — — — — —
    1 Monday | Mon | Mo |
    2 Tuesday | Tue | Tu |
    3 Wednesday | Wed | We |
    4 Thursday | Thu | Th |
    5 Friday | Fri | Fr |
    6 Saturday | Sat | Sa |
    7 Sunday | Sun | Su |
    — — — — — — — — — — — — — — — — —
     

    Вложения:

    Последнее редактирование: 30 июн 2014
    Anklave, Alex777, aligon7 и ещё 1-му нравится это.

Поделиться этой страницей