一个js简单版星星评分
fwxstar 2018-06-27 624次浏览
摘要:
<div class="score">
<p class="score_stars"&...
<div class="score"> <p class="score_stars"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </p> <p class="score_text"> </p> </div>
var score=document.getElementsByClassName("score")[0]; var stars=score.getElementsByClassName("score_stars")[0]; var starSpan=stars.getElementsByTagName("span"); var len=starSpan.length; var scoreTxt=document.getElementsByClassName("score_text")[0]; var aTxt=['很差','一般','还行','推荐','力荐']; /*减去星星*/ var rStar= function () { for(var i= 0;i<len;i++){ starSpan[i].style.backgroundPosition = "-39px 0"; } scoreTxt.innerText = ''; }; for(var i=0;i<len;i++){ starSpan[i].index = i; starSpan[i].onmouseover= function () { rStar(); for(var i= 0;i<= this.index;i++){ starSpan[i].style.backgroundPosition = "-2px 0"; } scoreTxt.innerText = aTxt[i-1]; }; starSpan[i].addEventListener("mouseout", rStar, false); starSpan[i].onclick= function () { this.removeEventListener("mouseout", rStar, false); }; }
项目预览地址:http://jsrun.net/6WgKp/edit