Javascript制作的评星打分系统

前不久用JQuery做了个评星打分的小东东，这次用javascript重写一遍。JQuery在浏览器事件兼容判断方面为我们做了很多底层工作，的确是大大的方便开发和减少的很多代码量。不过Javascript毕竟是最基本的东西，还是不能忘记噢。JQuery版的地址在这里，大家可以对比着看看。

演示效果如下：

#xzw_starSys *{margin:0; padding:0}
#xzw_starSys ul, #xzw_starSys li { list-style-type:none}
#xzw_starSys{height:20px; width:500px; border:1px solid #cecece; margin:10px; padding:5px; font-size:12px; line-height:22px; overflow:hidden}
#xzw_starBox{position:relative; width:130px; float:left; }
#xzw_starSys .description {float:left; margin-left:20px}
#xzw_starSys .star { height:20px; width:130px; position:relative; background:url(http://images.cnblogs.com/cnblogs_com/miqi2214/163305/r_star.gif) left -40px repeat-x; cursor:pointer}
#xzw_starSys .star li { float:left; padding:0px; margin:0px}
#xzw_starSys .star li a { display:block; width:26px; height:20px; overflow:hidden; text-indent:-9999px; position:absolute; z-index:5; }
#xzw_starSys .star li a:hover {background:url(http://images.cnblogs.com/cnblogs_com/miqi2214/163305/r_star.gif) 0 -20px ; z-index:3; left:0; top:0 }
#xzw_starSys .star li a:focus {outline:none}
#xzw_starSys .star a.one-star {left:0; }
#xzw_starSys .star a.one-star:hover {width:26px;}
#xzw_starSys .star a.two-stars {left:26px; }
#xzw_starSys .star a.two-stars:hover {width:52px;}
#xzw_starSys .star a.three-stars {left:52px; }
#xzw_starSys .star a.three-stars:hover {width:78px;}
#xzw_starSys .star a.four-stars {left:78px; }
#xzw_starSys .star a.four-stars:hover {width:104px;}
#xzw_starSys .star a.five-stars {left:104px; }
#xzw_starSys .star a.five-stars:hover {width:130px;}
#xzw_starSys .current-rating{ background: url(http://images.cnblogs.com/cnblogs_com/miqi2214/163305/r_star.gif) left top; position: absolute; height: 20px; z-index: 1; top:0; left:0 }

1

2

3

4

5

Javascript代码：

1// JavaScript Document

2var descriptionTxt;

3var description = new Array("非常差，回去再练练","真的是差，都不忍心说你了","一般，还过得去吧","很好，是我想要的东西","太完美了，此物只得天上有，人间哪得几回闻!");

4

window.onload = changeStars;

HTML结构：

1<div id="xzw_starSys">

2 <div id="xzw_starBox">

3 <ul class="star" id="xzw_star">

4 <li><a href="#" title="1" class="one-star" hidefocus="true">1</a></li>

5 <li><a href="#" title="2" class="two-stars" hidefocus="true">2</a></li>

6 <li><a href="#" title="3" class="three-stars" hidefocus="true">3</a></li>

7 <li><a href="#" title="4" class="four-stars" hidefocus="true">4</a></li>

8 <li><a href="#" title="5" class="five-stars" hidefocus="true">5</a></li>

9 </ul>

<div class="current-rating" id="showb"></div>

</div>

<span id="description" class="description"></span>

</div>

CSS代码：

1#xzw_starSys *{}{margin:0; padding:0}

2#xzw_starSys ul, #xzw_starSys li {}{ list-style-type:none}

3#xzw_starSys{}{height:20px; width:500px; border:1px solid #cecece; margin:10px auto; padding:5px; font-size:12px; line-height:22px; overflow:hidden}

4#xzw_starBox{}{position:relative; width:130px; float:left; }

5#xzw_starSys .description {}{float:left; margin-left:20px}

6#xzw_starSys .star {}{ height:20px; width:130px; position:relative; background:url(images/star.gif) left -40px repeat-x; cursor:pointer}

7#xzw_starSys .star li {}{ float:left; padding:0px; margin:0px}

8#xzw_starSys .star li a {}{ display:block; width:26px; height:20px; overflow:hidden; text-indent:-9999px; position:absolute; z-index:5; }

9#xzw_starSys .star li a:hover {}{background:url(images/star.gif) 0 -20px ; z-index:3; left:0; top:0 }

#xzw_starSys .star li a:focus {}{outline:none}

#xzw_starSys .star a.one-star {}{left:0; }

#xzw_starSys .star a.one-star:hover {}{width:26px;}

#xzw_starSys .star a.two-stars {}{left:26px; }

#xzw_starSys .star a.two-stars:hover {}{width:52px;}

#xzw_starSys .star a.three-stars {}{left:52px; }

#xzw_starSys .star a.three-stars:hover {}{width:78px;}

#xzw_starSys .star a.four-stars {}{left:78px; }

#xzw_starSys .star a.four-stars:hover {}{width:104px;}

#xzw_starSys .star a.five-stars {}{left:104px; }

#xzw_starSys .star a.five-stars:hover {}{width:130px;}

#xzw_starSys .current-rating{}{ background: url(images/star.gif) left top; position: absolute; height: 20px; z-index: 1; top:0; left:0 }