Новое
На Зефире прошла небольшая реорганизация. Подробности читайте в теме Вестника

● Смена дизайна! Выражаем благодарность tørst vinden!

Зефир

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

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Зефир » Архив выполненной верстки » [часы] Силион: ветры небылиц

[часы] Силион: ветры небылиц

Страница: 1

Сообщений 1 страница 17 из 17

1

  • Автор: Anegel
  • Участник
  • Anegel
  • Зарегистрирован: 2014-09-02
  • Приглашений: 0
  • Сообщений: 151
  • Уважение: [+9/-0]
  • Позитив: [+16/-0]
  • Провел на форуме:
    4 дня 0 часов
  • Последний визит:
    2017-05-12 11:23:45

1. Название ролевой, ссылка:

Силион: ветры небылиц
http://silion.rolka.su/

2. Что требуется:

Создать часы которые будут помещаться в кругу наверху форума (позицианирование тоже нужно)

3. Дополнительно:

0

2

  • Автор: Anegel
  • Участник
  • Anegel
  • Зарегистрирован: 2014-09-02
  • Приглашений: 0
  • Сообщений: 151
  • Уважение: [+9/-0]
  • Позитив: [+16/-0]
  • Провел на форуме:
    4 дня 0 часов
  • Последний визит:
    2017-05-12 11:23:45

Коды есть здесь: http://ruseller.com/lessons.php?rub=1&id=1406

Надо только их скомпоновать под мой дизайн

0

3

  • Автор: Патему
  • Участник
  • Патему
  • Зарегистрирован: 2014-06-03
  • Приглашений: 0
  • Сообщений: 87
  • Уважение: [+2/-0]
  • Позитив: [+1/-0]
  • Провел на форуме:
    2 дня 7 часов
  • Последний визит:
    2016-08-22 16:15:11

Anegel,
Добрый день  http://sa.uploads.ru/wWxDv.png

Попробуйте так.

В таблицу, в самое начало:

Код:
<div style="position: absolute; top: 110px; left: 310px; width: 260px; height: 260px;" class="clocks"> <canvas id="canvas" width="260" height="260"></canvas></div>

В html-низ:

Код:
<style>
#html-header {
position: relative;
}
</style>

<script type="text/javascript">
// Внутренние переменные
var canvas, ctx;
var clockRadius = 250;
var clockImage;

// Функции рисования:
function clear() { // Очистка поля рисования
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // Основная функция drawScene
    clear(); // Очищаем поле рисования

    // Получаем текущее время
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    hours = hours > 12 ? hours - 12 : hours;
    var hour = hours + minutes / 60;
    var minute = minutes + seconds / 60;

    // Сохраняем текущий контекст
    ctx.save();

    // Рисуем изображение часов (как фон)
    ctx.drawImage(clockImage, 0, 0, 500, 500);

    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.beginPath();

    // Рисуем цифры
    ctx.font = '36px Arial';
    ctx.fillStyle = '#000';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    for (var n = 1; n <= 12; n++) {
        var theta = (n - 3) * (Math.PI * 2) / 12;
        var x = clockRadius * 0.7 * Math.cos(theta);
        var y = clockRadius * 0.7 * Math.sin(theta);
        ctx.fillText(n, x, y);
    }

    // Рисуем часовую стрелку
    ctx.save();
    var theta = (hour - 3) * 2 * Math.PI / 12;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -5);
    ctx.lineTo(-15, 5);
    ctx.lineTo(clockRadius * 0.5, 1);
    ctx.lineTo(clockRadius * 0.5, -1);
    ctx.fill();
    ctx.restore();

    // Рисуем минутную стрелку
    ctx.save();
    var theta = (minute - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -4);
    ctx.lineTo(-15, 4);
    ctx.lineTo(clockRadius * 0.8, 1);
    ctx.lineTo(clockRadius * 0.8, -1);
    ctx.fill();
    ctx.restore();

    // Рисуем секундную стрелку
    ctx.save();
    var theta = (seconds - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -3);
    ctx.lineTo(-15, 3);
    ctx.lineTo(clockRadius * 0.9, 1);
    ctx.lineTo(clockRadius * 0.9, -1);
    ctx.fillStyle = '#0f0';
    ctx.fill();
    ctx.restore();

    ctx.restore();
}

// Инициализация
$(function(){
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    // var width = canvas.width;
    // var height = canvas.height;

clockImage = new Image();
clockImage.src = 'images/cface.png';

    setInterval(drawScene, 1000); // Циклическое выполнение функции drawScene
});

</script>

0

4

  • Автор: Anegel
  • Участник
  • Anegel
  • Зарегистрирован: 2014-09-02
  • Приглашений: 0
  • Сообщений: 151
  • Уважение: [+9/-0]
  • Позитив: [+16/-0]
  • Провел на форуме:
    4 дня 0 часов
  • Последний визит:
    2017-05-12 11:23:45

Патему,  Спасибо, что взялись.  Таким вариантом не работает. Можете попробовать как-нибудь иначе?

0

5

  • Автор: Патему
  • Участник
  • Патему
  • Зарегистрирован: 2014-06-03
  • Приглашений: 0
  • Сообщений: 87
  • Уважение: [+2/-0]
  • Позитив: [+1/-0]
  • Провел на форуме:
    2 дня 7 часов
  • Последний визит:
    2016-08-22 16:15:11

Anegel, совсем не работает? Ничего не отображается?

0

6

  • Автор: Anegel
  • Участник
  • Anegel
  • Зарегистрирован: 2014-09-02
  • Приглашений: 0
  • Сообщений: 151
  • Уважение: [+9/-0]
  • Позитив: [+16/-0]
  • Провел на форуме:
    4 дня 0 часов
  • Последний визит:
    2017-05-12 11:23:45

Патему, Да

0

7

  • Автор: Патему
  • Участник
  • Патему
  • Зарегистрирован: 2014-06-03
  • Приглашений: 0
  • Сообщений: 87
  • Уважение: [+2/-0]
  • Позитив: [+1/-0]
  • Провел на форуме:
    2 дня 7 часов
  • Последний визит:
    2016-08-22 16:15:11

Anegel, поняла в чем дело. Попробуйте так

В html-низ

Код:
<style>
#html-header {
position: relative;
}
</style>

// inner variables
var canvas, ctx;
var clockRadius = 120;
var clockImage;

// draw functions :
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // main drawScene function
    clear(); // clear canvas

    // get current time
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    hours = hours > 12 ? hours - 12 : hours;
    var hour = hours + minutes / 60;
    var minute = minutes + seconds / 60;

    // save current context
    ctx.save();

    // draw clock image (as background)
    ctx.drawImage(clockImage, 0, 0, 250, 250);

    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.beginPath();

    ctx.font = '18px Arial';
    ctx.fillStyle = '#000';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    for (var n = 1; n <= 12; n++) {
        var theta = (n - 3) * (Math.PI * 2) / 12;
        var x = clockRadius * 0.7 * Math.cos(theta);
        var y = clockRadius * 0.7 * Math.sin(theta);
        ctx.fillText(n, x, y);
    }

    // draw hour
    ctx.save();
    var theta = (hour - 3) * 2 * Math.PI / 12;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -5);
    ctx.lineTo(-15, 5);
    ctx.lineTo(clockRadius * 0.5, 1);
    ctx.lineTo(clockRadius * 0.5, -1);
    ctx.fill();
    ctx.restore();

    // draw minute
    ctx.save();
    var theta = (minute - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -4);
    ctx.lineTo(-15, 4);
    ctx.lineTo(clockRadius * 0.8, 1);
    ctx.lineTo(clockRadius * 0.8, -1);
    ctx.fill();
    ctx.restore();

    // draw second
    ctx.save();
    var theta = (seconds - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -3);
    ctx.lineTo(-15, 3);
    ctx.lineTo(clockRadius * 0.9, 1);
    ctx.lineTo(clockRadius * 0.9, -1);
    ctx.fillStyle = '#0f0';
    ctx.fill();
    ctx.restore();

    ctx.restore();
}

// initialization
$(function(){
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    // var width = canvas.width;
    // var height = canvas.height;

clockImage = new Image();
clockImage.src = 'http://savepic.su/4514348.png';

    setInterval(drawScene, 1000); // loop drawScene
});

0

8

  • Автор: Anegel
  • Участник
  • Anegel
  • Зарегистрирован: 2014-09-02
  • Приглашений: 0
  • Сообщений: 151
  • Уважение: [+9/-0]
  • Позитив: [+16/-0]
  • Провел на форуме:
    4 дня 0 часов
  • Последний визит:
    2017-05-12 11:23:45

Патему, Не работает всё равно. Я сам пытался что-то сделать. Когда я рапоковал файл и удалил всё лишнее, то оказалось, что без папки img ничего не работает. Может и тут аналогичная проблема

0

9

  • Автор: Патему
  • Участник
  • Патему
  • Зарегистрирован: 2014-06-03
  • Приглашений: 0
  • Сообщений: 87
  • Уважение: [+2/-0]
  • Позитив: [+1/-0]
  • Провел на форуме:
    2 дня 7 часов
  • Последний визит:
    2016-08-22 16:15:11

Anegel, да, это все учтено) И картинка под ваши размеры изменена.
Демка

Поставьте мой код и не убирайте пока не скажу) А то я так гадать долго могу почему не работает)
Я сейчас вижу только часть, которая над таблицей. Скрипта же на форуме нет.

Отредактировано Патему (2014-12-08 21:50:38)

0

10

  • Автор: Anegel
  • Участник
  • Anegel
  • Зарегистрирован: 2014-09-02
  • Приглашений: 0
  • Сообщений: 151
  • Уважение: [+9/-0]
  • Позитив: [+16/-0]
  • Провел на форуме:
    4 дня 0 часов
  • Последний визит:
    2017-05-12 11:23:45

Патему,  код поставил обратно

Отредактировано Anegel (2014-12-08 21:54:01)

0

11

  • Автор: Патему
  • Участник
  • Патему
  • Зарегистрирован: 2014-06-03
  • Приглашений: 0
  • Сообщений: 87
  • Уважение: [+2/-0]
  • Позитив: [+1/-0]
  • Провел на форуме:
    2 дня 7 часов
  • Последний визит:
    2016-08-22 16:15:11

Хех, забыла обрамить скрипт тегом)

Код:
<style>
#html-header, #pun-announcement .container .html-box {
position: relative;
}

</style>
<script type="text/javascript">
// inner variables
var canvas, ctx;
var clockRadius = 120;
var clockImage;

// draw functions :
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // main drawScene function
    clear(); // clear canvas

    // get current time
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    hours = hours > 12 ? hours - 12 : hours;
    var hour = hours + minutes / 60;
    var minute = minutes + seconds / 60;

    // save current context
    ctx.save();

    // draw clock image (as background)
    ctx.drawImage(clockImage, 0, 0, 250, 250);

    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.beginPath();

    ctx.font = '18px Arial';
    ctx.fillStyle = '#000';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    for (var n = 1; n <= 12; n++) {
        var theta = (n - 3) * (Math.PI * 2) / 12;
        var x = clockRadius * 0.7 * Math.cos(theta);
        var y = clockRadius * 0.7 * Math.sin(theta);
        ctx.fillText(n, x, y);
    }

    // draw hour
    ctx.save();
    var theta = (hour - 3) * 2 * Math.PI / 12;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -5);
    ctx.lineTo(-15, 5);
    ctx.lineTo(clockRadius * 0.5, 1);
    ctx.lineTo(clockRadius * 0.5, -1);
    ctx.fill();
    ctx.restore();

    // draw minute
    ctx.save();
    var theta = (minute - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -4);
    ctx.lineTo(-15, 4);
    ctx.lineTo(clockRadius * 0.8, 1);
    ctx.lineTo(clockRadius * 0.8, -1);
    ctx.fill();
    ctx.restore();

    // draw second
    ctx.save();
    var theta = (seconds - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -3);
    ctx.lineTo(-15, 3);
    ctx.lineTo(clockRadius * 0.9, 1);
    ctx.lineTo(clockRadius * 0.9, -1);
    ctx.fillStyle = '#0f0';
    ctx.fill();
    ctx.restore();

    ctx.restore();
}

// initialization
$(function(){
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    // var width = canvas.width;
    // var height = canvas.height;

clockImage = new Image();
clockImage.src = 'http://savepic.su/4514348.png';

    setInterval(drawScene, 1000); // loop drawScene
});
</script>

И поменяйте код в таблице. Он оказался немного не там где рассчитывала)

Код:
<div style="position: absolute; top: -432px; left: 294px; width: 260px; height: 260px;" class="clocks"> часы
<canvas id="canvas" width="260" height="260"></canvas></div>

0

12

  • Автор: Патему
  • Участник
  • Патему
  • Зарегистрирован: 2014-06-03
  • Приглашений: 0
  • Сообщений: 87
  • Уважение: [+2/-0]
  • Позитив: [+1/-0]
  • Провел на форуме:
    2 дня 7 часов
  • Последний визит:
    2016-08-22 16:15:11

Блин, забыла убрать надпись =_=  Сорри)

Код:
<<div style="position: absolute; top: -426px; left: 296px; width: 260px; height: 260px;" class="clocks">
<canvas id="canvas" width="260" height="260"></canvas></div>

Отредактировано Патему (2014-12-08 22:11:40)

0

13

  • Автор: Anegel
  • Участник
  • Anegel
  • Зарегистрирован: 2014-09-02
  • Приглашений: 0
  • Сообщений: 151
  • Уважение: [+9/-0]
  • Позитив: [+16/-0]
  • Провел на форуме:
    4 дня 0 часов
  • Последний визит:
    2017-05-12 11:23:45

Патему,  Ура! Теперь всё работает. А не могли бы Вы ещё заменить цвет стрелок на #1c1c30 и убрать фон.

0

14

  • Автор: Патему
  • Участник
  • Патему
  • Зарегистрирован: 2014-06-03
  • Приглашений: 0
  • Сообщений: 87
  • Уважение: [+2/-0]
  • Позитив: [+1/-0]
  • Провел на форуме:
    2 дня 7 часов
  • Последний визит:
    2016-08-22 16:15:11
Код:
<style>
#html-header, #pun-announcement .container .html-box {
position: relative;
}

</style>
<script type="text/javascript">
// inner variables
var canvas, ctx;
var clockRadius = 120;
var clockImage;

// draw functions :
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // main drawScene function
    clear(); // clear canvas

    // get current time
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    hours = hours > 12 ? hours - 12 : hours;
    var hour = hours + minutes / 60;
    var minute = minutes + seconds / 60;

    // save current context
    ctx.save();

    // draw clock image (as background)
    ctx.drawImage(clockImage, 0, 0, 250, 250);

    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.beginPath();

    ctx.font = '18px Arial';
    ctx.fillStyle = '#000';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    for (var n = 1; n <= 12; n++) {
        var theta = (n - 3) * (Math.PI * 2) / 12;
        var x = clockRadius * 0.7 * Math.cos(theta);
        var y = clockRadius * 0.7 * Math.sin(theta);
        ctx.fillText(n, x, y);
    }

    // draw hour
    ctx.save();
    var theta = (hour - 3) * 2 * Math.PI / 12;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -5);
    ctx.lineTo(-15, 5);
    ctx.lineTo(clockRadius * 0.5, 1);
    ctx.lineTo(clockRadius * 0.5, -1);
    ctx.fillStyle = '#1c1c30';
    ctx.fill();
    ctx.restore();

    // draw minute
    ctx.save();
    var theta = (minute - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -4);
    ctx.lineTo(-15, 4);
    ctx.lineTo(clockRadius * 0.8, 1);
    ctx.lineTo(clockRadius * 0.8, -1);
    ctx.fillStyle = '#1c1c30';
    ctx.fill();
    ctx.restore();

    // draw second
    ctx.save();
    var theta = (seconds - 15) * 2 * Math.PI / 60;
    ctx.rotate(theta);
    ctx.beginPath();
    ctx.moveTo(-15, -3);
    ctx.lineTo(-15, 3);
    ctx.lineTo(clockRadius * 0.9, 1);
    ctx.lineTo(clockRadius * 0.9, -1);
    ctx.fillStyle = '#1c1c30';
    ctx.fill();
    ctx.restore();

    ctx.restore();
}

// initialization
$(function(){
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    // var width = canvas.width;
    // var height = canvas.height;

clockImage = new Image();
clockImage.src = 'http://savepic.su/4514348.png';

    setInterval(drawScene, 1000); // loop drawScene
});
</script>

0

15

  • Автор: Патему
  • Участник
  • Патему
  • Зарегистрирован: 2014-06-03
  • Приглашений: 0
  • Сообщений: 87
  • Уважение: [+2/-0]
  • Позитив: [+1/-0]
  • Провел на форуме:
    2 дня 7 часов
  • Последний визит:
    2016-08-22 16:15:11

И ещё раз код в таблице поправьте

Код:
<div style="position: absolute; top: -425px; left: 298px; " class="clocks">
<canvas id="canvas" width="250" height="250"></canvas></div>

0

16

  • Автор: Anegel
  • Участник
  • Anegel
  • Зарегистрирован: 2014-09-02
  • Приглашений: 0
  • Сообщений: 151
  • Уважение: [+9/-0]
  • Позитив: [+16/-0]
  • Провел на форуме:
    4 дня 0 часов
  • Последний визит:
    2017-05-12 11:23:45

Патему, Теперь всё идеально. Большое спасибо!

0

17

  • Автор: Нафаня
  • Я ухожу в себя и открываю целый мир.
  • Нафаня
  • Зарегистрирован: 2014-02-27
  • Приглашений: 0
  • Сообщений: 5595
  • Уважение: [+268/-4]
  • Позитив: [+309/-0]
  • Пол: Женский
  • Возраст: 32 [1992-04-07]
  • Провел на форуме:
    1 месяц 6 дней
  • Последний визит:
    2020-12-31 16:58:02

http://zephyr.f-rpg.ru/files/0013/e6/99/52870.png
Спасибо, Anegel, что воспользовались нашими услугами! Если вам понравилась работа Верстальщика или же наоборот, оставьте свой отзыв в теме "Отзывы заказчиков о выполненной работе", нам важно знать ваше мнение.

0

Страница: 1

Вы здесь » Зефир » Архив выполненной верстки » [часы] Силион: ветры небылиц

Рейтинг форумов | Создать форум бесплатно