CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 275   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

0

Цифровые часы на CSS и jQuery

Jemand 14904 , ,
CSS, JavaScript

1. CSS

.time span {
	display: inline-block;
	width: 20px;
	margin-right: 6px;
}
.time span.colon {
	width: 4px;
}
.time .colon b,
.time span b {
	float: left;
	width: 4px;
	height: 4px;
	overflow: hidden;
	visibility: hidden;
	background: #666;
}
.time .colon b {
	display: none;
	margin: 0 0 4px;
}
.time span.colon .c11,
.time span.colon .c12 {
	display: block;
	visibility: visible;
}
.d0 .c11, .d0 .c12, .d0 .c13, .d0 .c14, .d0 .c15, .d0 .c21, .d0 .c25, .d0 .c31, .d0 .c35, .d0 .c41, .d0 .c45, .d0 .c51, .d0 .c52, .d0 .c53, .d0 .c54, .d0 .c55 {visibility: visible;}
.d1 .c13, .d1 .c21, .d1 .c22, .d1 .c23, .d1 .c33, .d1 .c43, .d1 .c51, .d1 .c52, .d1 .c53, .d1 .c54, .d1 .c55 {visibility: visible;}
.d2 .c11, .d2 .c12, .d2 .c13, .d2 .c14, .d2 .c15, .d2 .c25, .d2 .c31, .d2 .c32, .d2 .c33, .d2 .c34, .d2 .c35, .d2 .c41, .d2 .c51, .d2 .c52, .d2 .c53, .d2 .c54, .d2 .c55 {visibility: visible;}
.d3 .c11, .d3 .c12, .d3 .c13, .d3 .c14, .d3 .c15, .d3 .c25, .d3 .c32, .d3 .c33, .d3 .c34, .d3 .c35, .d3 .c45, .d3 .c51, .d3 .c52, .d3 .c53, .d3 .c54, .d3 .c55 {visibility: visible;}
.d4 .c11, .d4 .c15, .d4 .c21, .d4 .c25, .d4 .c31, .d4 .c32, .d4 .c33, .d4 .c34, .d4 .c35, .d4 .c45, .d4 .c55 {visibility: visible;}
.d5 .c11, .d5 .c12, .d5 .c13, .d5 .c14, .d5 .c15, .d5 .c21, .d5 .c31, .d5 .c32, .d5 .c33, .d5 .c34, .d5 .c35, .d5 .c45, .d5 .c51, .d5 .c52, .d5 .c53, .d5 .c54, .d5 .c55 {visibility: visible;}
.d6 .c11, .d6 .c12, .d6 .c13, .d6 .c14, .d6 .c15, .d6 .c21, .d6 .c31, .d6 .c32, .d6 .c33, .d6 .c34, .d6 .c35, .d6 .c41, .d6 .c45, .d6 .c51, .d6 .c52, .d6 .c53, .d6 .c54, .d6 .c55 {visibility: visible;}
.d7 .c11, .d7 .c12, .d7 .c13, .d7 .c14, .d7 .c15, .d7 .c25, .d7 .c35, .d7 .c45, .d7 .c55 {visibility: visible;}
.d8 .c11, .d8 .c12, .d8 .c13, .d8 .c14, .d8 .c15, .d8 .c21, .d8 .c25, .d8 .c31, .d8 .c32, .d8 .c33, .d8 .c34, .d8 .c35, .d8 .c41, .d8 .c45, .d8 .c51, .d8 .c52, .d8 .c53, .d8 .c54, .d8 .c55 {visibility: visible;}
.d9 .c11, .d9 .c12, .d9 .c13, .d9 .c14, .d9 .c15, .d9 .c21, .d9 .c25, .d9 .c31, .d9 .c32, .d9 .c33, .d9 .c34, .d9 .c35, .d9 .c45, .d9 .c51, .d9 .c52, .d9 .c53, .d9 .c54, .d9 .c55 {visibility: visible;}

2. Подключение jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

3. JavaScript

<script type="text/javascript">
	function digitalClock() {
	var tag = 'div.time';
	var dots = digits = '';
	var digit = tag+' span';
	var span = digit+':nth-child';
	for (i=1; i<6; i++) for (k=1; k<6; k++) dots += '<b class="c'+i+k+'"/>';
	for (i=0; i<8; i++) digits += '<span/>';
	$(tag).append(digits);
	$(digit).append(dots);
	$(span+'(3), '+span+'(6)').removeAttr('class').addClass('colon');
	function time() {
		var date = new Date();
		var hou = date.getHours().toString();
		var min = date.getMinutes().toString();
		var sec = date.getSeconds().toString();
		hou = (hou<10)?0+hou:hou;
		min = (min<10)?0+min:min;
		sec = (sec<10)?0+sec:sec;
		$(digit+'.colon').css({opacity: 1}).each(function() {
			$(this).delay(400).animate({opacity: 0},250);
		})
		$(digit).removeAttr('class');
		$(span+'(1)').addClass('d'+hou.slice(0,1));
		$(span+'(2)').addClass('d'+hou.slice(1,2));
		$(span+'(3)').addClass('colon');
		$(span+'(4)').addClass('d'+min.slice(0,1));
		$(span+'(5)').addClass('d'+min.slice(1,2));
		$(span+'(6)').addClass('colon');
		$(span+'(7)').addClass('d'+sec.slice(0,1));
		$(span+'(8)').addClass('d'+sec.slice(1,2));
		setTimeout(time,1000);
	}
	time();
} /* end of digitalClock() */

(function($) {
$(function() {

digitalClock();

})
})(jQuery)
</script>

4. HTML

<div class="time"></div>

Демо

Рекламная пауза

Оставить комментарий