평점 ★★☆☆☆ 이런 형태로 출력 [text,js,ie,ff] > script

예전의 꼼수 스크립트입니다. 제대로 쓰려면 좀 더 다듬어야 합니다.

...

이게 뭐하는 스크립트냐 하면... 예를 드는게 가장 빠르겠죠.

http://movie.naver.com/movie/bi/mi/basic.nhn?code=39841

↑ 네이버 영화 홈페이지에 있는 "괴물"에 대한 정보입니다.

이 화면 우측에 보면 평점이라는게 있습니다.

★★★★☆
8.81/10

10점 만점(★★★★★)에 34911명의 평균 점수가 8.81이라 약 4개 반 정도가
색칠된 것을 볼 수 있습니다.

이런 것을 간단히 구현해주는 스크립트입니다.

...

뭐 예전에 테이블 태그만 가지고 바(Bar) 형태로 간단히 만들어 보던 것과 비슷합니다.
여기에 배경 이미지를 이용하는게 그 다음이고...
아무튼 원리는 꽤나 간단합니다. -0-);

1.
레이어(div),테이블(table) 태그 등을 활용해 겹치는 ★★★★★을 출력합니다.
배경의 회색 별과, 위쪽의 빨간 별... ^^);
[★이 마음에 안들면 다른 텍스트 쓰면 됩니다. ♠,◆,♣,♥,... 등으로...]

2.
해당 테이블의 넓이를 구해줍니다. (obj.offsetWidth)

3.
인자로 넘겨받은 퍼센트에 해당하는 넓이를 구해줍니다. 깔끔하게 반올림해서;;;

4.
위쪽 빨간별이 속한 레이어의 넓이를 3에서 구한 넓이로 지정해줍니다.
이 레이어는 지정한 길이 이외의 내용은 hidden 처리하고 있습니다.
그럼 끝이죠. -0-);;;

이해 안되세요??? T^T);;;


출처 : http://dreamphp.com/sample_point.html