Jan 22 2012 at 07:06

Стрелочные часы на CSS

Invite pending

Доброго времени суток!
Встретил в интернете стрелочные часы, но решил сделать их с помощью CSS. Вместо цифр решил сделать засечки. Фреймворк для javascripta будем использовать jQuery v1.7.1.

Создадим нашу основу часов:

<!DOCTYPE html>
<html lang="ru">
<head>
	<title>Часы</title>
	<script src="js/jquery-1.7.min.js"></script>
</head>
    
<body>
	<article id="time">
		<div id="center"></div>
		<div id="second"></div>
		<div id="minute"></div>
		<div id="hour"></div>
		<div id="clock">clock</div>
	</article>
</body>

Стрелки делаем на псевдоклассах. CSS для часов выглядит следующим образом, пока без засечек:

*{
    margin: 0;
    padding: 0;
    font: 16px Arial, serif;
}
#time {
    position: relative;
    display: block;
    background: #478FDD;
    width: 120px;
    height: 120px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #ccc;
    margin: 20px auto;
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: 0 0 8px #000;
}
#center {
    position: absolute;
    left: 58px;
    top: 57px;
    content: "";
    padding: 3px;
    border-radius: 3px;
    background: #000;
    z-index: 5;
}
#second, #minute, #hour, #l1, #l2, #l3, #l4, #l5, #l6 {
    position: absolute;
    display: block;
    content: "";
    padding: 60px 1px;
}
#second:after, #minute:after, #hour:after {
    position: absolute;
    left: 0px;
    content: "";
}
#second { left: 60px; z-index: 4; } 
#second:after {
    top: 20px;
    padding: 20px 1px 20px 0px;
    background: #000;
}
#minute { left: 59px; z-index: 3; }
#minute:after {
    top: 30px;
    padding: 15px 1px;
    background: #F00;
}
#hour {    left: 59px; z-index: 2; }
#hour:after {
    top: 40px;
    padding: 10px 2px 10px 1px;
    border-radius: 2px 2px 0 0;
    background: #FF0;
}
#clock {
    position: absolute;
    left: 43px;
    top: 70px;
    font-size: 10px;
}

Движение часов управляется следующим javascript кодом.

$(document).ready(function($) {
    setInterval( function() {
    var seconds = new Date().getSeconds();
    var sdegree = seconds * 6;
    var srotate = 'rotate(' + sdegree + 'deg)';
    $('#second').css({'-moz-transform' : srotate, '-webkit-transform' : srotate, '-o-transform' : srotate});
    }, 1000 );

    setInterval( function() {
    var hours = new Date().getHours();
    var mins = new Date().getMinutes();
    var hdegree = hours * 30 + (mins / 2);
    var hrotate = 'rotate(' + hdegree + 'deg)';
    $('#hour').css({'-moz-transform' : hrotate, '-webkit-transform' : hrotate, '-o-transform' : hrotate});
    }, 1000 );

    setInterval( function() {
    var mins = new Date().getMinutes();
    var mdegree = mins * 6;
    var mrotate = 'rotate(' + mdegree + 'deg)';
    $('#minute').css({'-moz-transform' : mrotate, '-webkit-transform' : mrotate, '-o-transform' : mrotate});
    }, 1000 );
});

Тем самым мы заставили наши часы ходить. Далее создаем слои с засечками:

$(document).ready(function($) {
    for (i=1;i<=6;i++) {
        $('#center').before('<div id="l'+i+'"></div>');
    }

    for (i=1;i<=30;i++) {
        $('#center').before('<div id="ln'+i+'"></div>');
        $('#ln'+i).css({
            "-moz-transform" : "rotate(" + i*6 + "deg)", 
            "-webkit-transform" : "rotate(" + i*6 + "deg)", 
            "-o-transform" : "rotate(" + i*6 + "deg)", 
            "padding" : "60px 1px 60px 0", 
            "left" : "60px", 
            "position" : "absolute",
            "display" : "block",
            "content" : "",
       });
    }
});

С помощью псевдоклассов :before и :after мы делаем засечки с обоих сторон заполненные цветом.

#l1{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); }
#l2{ -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); }
#l3{ -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); }
#l4{ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); }
#l5{ -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); }
#l6{ -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -o-transform: rotate(150deg); }
#l1, #l2, #l3, #l4, #l5, #l6 { left: 59px; z-index: 5; }
#l1:before, #l1:after, #l2:before, #l2:after, #l3:before, #l3:after, #l4:before, #l4:after, #l5:before, #l5:after, #l6:before, #l6:after {
    position:absolute;
    content: "";
    left: 0;
    padding: 5px 2px 5px 1px;
    background: #000;
}
#l1::before, #l2::before, #l3::before, #l4::before, #l5::before, #l6::before { top: 5px; }
#l1::after, #l2::after, #l3::after, #l4::after, #l5::after, #l6::after { bottom: 5px; }
#ln1:before, #ln2:before, #ln3:before, #ln4:before, #ln5:before, #ln6:before, 
#ln7:before, #ln8:before, #ln9:before, #ln10:before, #ln11:before, #ln12:before, 
#ln13:before, #ln14:before, #ln15:before, #ln16:before, #ln17:before, #ln18:before, 
#ln19:before, #ln20:before, #ln21:before, #ln22:before, #ln23:before, #ln24:before, 
#ln25:before, #ln26:before, #ln27:before, #ln28:before, #ln29:before, #ln30:before {
    padding: 5px 1px 5px 0; 
    left: 0px;
    top: 0px; 
    background: #fff;
    position: absolute;
    display: block;
    content: "";
}
#ln1:after, #ln2:after, #ln3:after, #ln4:after, #ln5:after, #ln6:after, 
#ln7:after, #ln8:after, #ln9:after, #ln10:after, #ln11:after, #ln12:after, 
#ln13:after, #ln14:after, #ln15:after, #ln16:after, #ln17:after, #ln18:after, 
#ln19:after, #ln20:after, #ln21:after, #ln22:after, #ln23:after, #ln24:after, 
#ln25:after, #ln26:after, #ln27:after, #ln28:after, #ln29:after, #ln30:after {
    padding: 5px 1px 5px 0; 
    left: 0px;
    bottom: 0px; 
    background: #fff;
    position: absolute;
    display: block;
    content: "";
}

Пример на jsFiddle.
Спасибо за внимание!

Hubs:

Lumber room