首先看下效果：
用函数：
写法：
1 <script type="text/javascript"> 2 var a = function(number){ //传入星级参数 3 var html=""; //定义显示内容 4 for(var i = 0;i < number; i++){ //循环加载黄星星
5 html += "<img src="+'images/star0.png'+">"; 6 } 7 for(var j = 0;j < 5-number;j++){ //循环加载白色星星 8 html += "<img src="+'images/star1.png'+">"; 9 } 10 document.getElementById("courseEst").innerHTML = html; //然后通过ID来选择这个要显示的位置 11 } 12 </script>
然后在html中的body中调用就行（<body onload="a(4)">）
这是用函数的方法来显示星级（用图片）
当然还有几种方法，如纯css或者是CSS+js。
纯css（不用图片）:
1 /*CSS Star start*/ 2 .star-rating 3 { 4 list-style: none; 5 margin: 0px; 6 padding: 0px; 7 100px; 8 height: 20px; 9 position: relative; 10 background: url(star_rating.gif) top left repeat-x; 11 } 12 .star-rating 13 { 14 padding: 0px; 15 margin: 0px; 16 float: left; 17 } 18 .star-rating a 19 { 20 display: block; 21 20px; 22 height: 20px; 23 text-decoration: none; 24 text-indent: -9000px; 25 z-index: 20; 26 position: absolute; 27 padding: 0px; 28 } 29 .star-rating a:hover 30 { 31 background: url(star_rating.gif) left bottom; 32 z-index: 1; 33 left: 0px; 34 } 35 .star-rating a.one-star 36 { 37 left: 0px; 38 } 39 .star-rating a.one-star:hover 40 { 41 20px; 42 } 43 .star-rating a.two-stars 44 { 45 left: 20px; 46 } 47 .star-rating a.two-stars:hover 48 { 49 40px; 50 } 51 .star-rating a.three-stars:hover 52 { 53 60px; 54 } 55 .star-rating a.three-stars 56 { 57 left: 40px; 58 } 59 .star-rating a.four-stars 60 { 61 left: 60px; 62 } 63 .star-rating a.four-stars:hover 64 { 65 80px; 66 } 67 .star-rating a.five-stars 68 { 69 left: 80px; 70 } 71 .star-rating a.five-stars:hover 72 { 73 100px; 74 }
当然还要加上HTML：
1 <div class='star-rating'> 2 <div><a href='#' title='一星' class='one-star'>1</a></div> 3 <div><a href='#' title='二星' class='two-stars'>2</a></div> 4 <div><a href='#' title='三星' class='three-stars'>3</a></div> 5 <div><a href='#' title='四星' class='four-stars'>4</a></div> 6 <div><a href='#' title='五星' class='five-stars'>5</a></div> 7 </div>
用js和CSS一起实现就不做说明了 这个比纯CSS简单多了 你们可以试试 不会的可以@我