js实现页面动态显示星级评价

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/crush1988/article/details/77620533

最近做了一个页面显示了一条数据详细信息的星级评价,自己在网上也查找了相关资料,最后实现了如下效果,做个笔记:

1.css

 .dim{/*默认是灰色的星星*/
    float: left;
	width: 20px;
	height: 20px;
	background: url('../plug-in/score/img/start1.png');
	background-size: 100%;
  }
  .highlight{/*评论是几就会点亮几颗星星*/
    float: left;
	width: 20px;
	height: 20px;
	background: url('../plug-in/score/img/start2.png');
	background-size: 100%;
  }


2.显示评分的区域:

 <div class="commentScore" id="starContainer">
							    <a  class="dim"></a>
							    <a  class="dim"></a>
							    <a  class="dim"></a>
							    <a  class="dim"></a>
						        <a  class="dim"></a>
					        </div>
3.js部分:

  /**默认显示当前数据的处理状态*/
		$(document).ready(function() {
			  var score='${reservationPage.commentScore}';//用户评分
			 
		         /*调用方法,想要亮几颗就传入几*/
		        highlightStar(score);
			 
		});
		function highlightStar(num){
		    var starBg = document.getElementById("starContainer");
		    var stars = starBg.getElementsByTagName("a");
		    for(var i = 0 ; i < num ; i++){
		        stars[i].className = 'highlight';
		    }
		}


阅读更多
换一批

没有更多推荐了,返回首页