(jQuery) 티스토리 태그 목록 컬러풀하게~

준비물: (jQuery) 연결하기

미리보기
http://simulz.com/tag


새로고침 할 때마다 색상과 크기가 변한다.

많아야 5가지 색상과 크기뿐이었던 태그 목록을

랜덤 색상, 크기로 변경해보았다.

목록 섞기: (jQuery) 태그 목록 섞기

var getRandomRGB = function() { return '#' + Math.floor(Math.random()*16777216).toString(16); } var getRandomNumber = function(f, t) { var num = -1; while(f > num) num = Math.floor(Math.random() * (t+1)); return num; } $('.taglog li a').each(function() { $(this).css('color', getRandomRGB).css('font-size',getRandomNumber(8,24)+'pt'); });

$('.taglog li a')
taglog 클래스를 갖고 있는 요소의 자식 중에서 li 요소의 자식 중에서 a 요소들을 선택한다.

.each(function(index, Element))
매치된 요소마다 콜백 함수를 실행한다.

$(this)
this는 현재 대상을 나타내며 jQuery 객체로 만든다.

.css(key, value)
color 속성의 값을 getRandomRGB 함수 반환값으로 지정한다.
font-size 속성의 값을 getRandomNumber(from, to) 함수 반환값으로 지정한다.

Math.floor(Math.random()*16777216).toString(16)
Math.random() 은 1 미만의 소숫점 16자리의 실수로 반환되며 16진수 6자리의 10진수를 곱한 다음에 Math.floor()로 내림한다.
(반올림하면 0은 0.0000000000000000 ~ 0.4999999999999999 까지만 가능하다)
그 다음 toString(16)으로 16진수로 변환한다.