Круглые часы с настройкой цвета на jQuery и Canvas - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Скрипты для uCoz » Часы для сайта uCoz » Круглые часы с настройкой цвета на jQuery и Canvas

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Круглые часы с настройкой цвета на jQuery и Canvas

Круглые часы с настройкой цвета




Часы имеют круглую форму, внутреннюю расцветку часикам можно сделать любую какую захотите.Для подбора нужного цвета введите в поиске сайта слово "цвет", имеется достаточное количество инструментов для подбора цветовой палитры.Для работы часов требуется подключенная библиотека jQuery, версия библиотеки не имеет значения.Настройка цвета элементов часов производится в скрипте, места регулировок цветовой палитрой выделены комментариями в примере кода.Установить часы можно в любое место сайта поддерживающее HTML режим.





Код для расположения часов по центру


<div style="text-align:center;">
<script type="text/javascript" src="http://delaisait.ucoz.ru/js/jQuery/plugin/raphael-min.js"></script>
<script type="text/javascript">
window.onload = function(){
var canvas = Raphael("pane",0,0,500,500);
// Цвет окаёмки циферблата
canvas.circle(200,150,107).attr("stroke-width",2).attr("fill","#FF0000");
// Цвет внутреннего фона циферблата
canvas.circle(200,150,100).attr("stroke-width",2).attr("fill","#ebebeb");
// Цвет стрелок и цифр
canvas.circle(200,150,3).attr("fill","#000");
var angleplus = 360,rad = Math.PI / 180,
cx = 200,cy =150 ,r = 90,   
    startangle = -90,angle=30,x,y, endangle;
for(i=1;i<13;i++)
{
endangle = startangle + angle ;
x = cx + r  * Math.cos(endangle * rad);
y = cy + r * Math.sin(endangle * rad);
canvas.text(x,y,i+"");
startangle = endangle;
}
var hand = canvas.path("M200 70L200 150").attr("stroke-width",1);
var minute_hand = canvas.path("M200 100L200 150").attr("stroke-width",2);
var hour_hand = canvas.path("M200 110L200 150").attr("stroke-width",3);
var time = new Date();
angle = time.getSeconds() * 6;
minute_hand.rotate(6 * time.getMinutes(),200,150);
var hr = time.getHours();
if(hr>12)
hr = hr -11;
hour_hand.rotate(30 * hr,200,150);
var minute_angle= 6 + time.getMinutes()*6,hour_angle=0.5+ hr*30;
setInterval(function(){
angle = angle + 6;
if(angle>=360)
{
angle=0;
minute_hand.rotate(minute_angle,200,150);
minute_angle = minute_angle + 6;
hour_hand.rotate(hour_angle,200,150);
hour_angle = hour_angle + 0.6;
}
if(minute_angle>=360)
{
minute_angle=0;
}
hand.rotate(angle,200,150);
},1000);
};
</script>
<div id="pane" ></div>
</div>



Код часов для свободного расположения


<script type="text/javascript" src="http://delaisait.ucoz.ru/js/jQuery/plugin/raphael-min.js"></script>
<script type="text/javascript">
window.onload = function(){
var canvas = Raphael("pane",0,0,500,500);
// Цвет окаёмки циферблата
canvas.circle(200,150,107).attr("stroke-width",2).attr("fill","#FF0000");
// Цвет внутреннего фона циферблата
canvas.circle(200,150,100).attr("stroke-width",2).attr("fill","#ebebeb");
// Цвет стрелок и цифр
canvas.circle(200,150,3).attr("fill","#000");
var angleplus = 360,rad = Math.PI / 180,
cx = 200,cy =150 ,r = 90,   
    startangle = -90,angle=30,x,y, endangle;
for(i=1;i<13;i++)
{
endangle = startangle + angle ;
x = cx + r  * Math.cos(endangle * rad);
y = cy + r * Math.sin(endangle * rad);
canvas.text(x,y,i+"");
startangle = endangle;
}
var hand = canvas.path("M200 70L200 150").attr("stroke-width",1);
var minute_hand = canvas.path("M200 100L200 150").attr("stroke-width",2);
var hour_hand = canvas.path("M200 110L200 150").attr("stroke-width",3);
var time = new Date();
angle = time.getSeconds() * 6;
minute_hand.rotate(6 * time.getMinutes(),200,150);
var hr = time.getHours();
if(hr>12)
hr = hr -11;
hour_hand.rotate(30 * hr,200,150);
var minute_angle= 6 + time.getMinutes()*6,hour_angle=0.5+ hr*30;
setInterval(function(){
angle = angle + 6;
if(angle>=360)
{
angle=0;
minute_hand.rotate(minute_angle,200,150);
minute_angle = minute_angle + 6;
hour_hand.rotate(hour_angle,200,150);
hour_angle = hour_angle + 0.6;
}
if(minute_angle>=360)
{
minute_angle=0;
}
hand.rotate(angle,200,150);
},1000);
};
</script>
<div id="pane" ></div>



Библиотека jQuery для проверки скрипта в редакторе

Не устанавливайте скрипт библиотеки на свой сайт если он у Вас в системе uCoz, она нужна только для проверки работоспособности в редакторе



<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js"></script>



Часы в работе



HTML редактор для проверки примера

Поместите в редактор код из примера и добавьте скрипт библиотеки









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 1060 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: jquery, site, clock, Canvas

    Вы будете первый кто оставит комментарий

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]