Question

做一个评价的页面，后台传值1到5，jsp页面得到几就亮几颗星星。。。急急急

Answer 1

　　首先你得会用CSS、HTML制作星星和星星高亮的效果，知道实现方式，其实很简单，方式也有很多。懒得制作星星图片什么的了，用方块代替。下面是HTML和CSS的代码：　

　<style>
　　.star {
　　    border: 1px solid #000;
　　    height: 18px;
　　    width: 18px;
　　    display: block;
　　    float: left;
　　    margin-left: 5px;
　　    z-index: 3;
　　}
　　.highlight {
　　    background: #000000;
　　}
　　</style>
　　<div class="star_bg" id="starContainer">
	<a class="star highlight "></a>
	<a class="star"></a>
	<a class="star"></a>
	<a class="star"></a>
	<a class="star"></a>
    </div>

想要星星亮起来就给星星添加highlight样式。然后就是动态控制，方式也有很多。主要两种，一种是用JS代码控制，比较灵活，结合Ajax比较常见，下面是JS代码：

function highlightStar(num){
    var starBg = document.getElementById("starContainer");
    var stars = starBg.getElementsByTagName("a");
    for(var i = 0 ; i < num ; i++){
        stars[i].className = "star highlight";
    }
}
//调用方法，想要亮几颗就传入几
highlightStar(2);

然后就是在JSP中动态拼写JS代码，很简单就是把highlightStar方法的调用语句中的参数替换为JSP中的变量输出语句就行：

highlightStar(<%=highlighSstarNum%>);

还有一种方法就是直接在JSP中控制输出样式，把上面的starContainer的div中内容替换为下面的代码：

<div class="star_bg" id="starContainer">
    <%
        for(int i = 0 ; i < highlightStarNum ; i++){
            out.println("<a class='star highlight''>");
        }
    %>
</div>

这种功能很简单，实现方案结合自己的需求变动，掌握原理才是王道。