js实现星星打分效果的方法

本文实例讲述了js实现星星打分效果的方法。分享给大家供大家参考。具体分析如下：

很多网站都有如下图这样的星星打分效果，今天就看下用js怎么实现打分效果。

效果详解

1. 鼠标移上的时候星星点亮，下面的文字显示。鼠标移出的时候星星为灰，下面文字不显示。

2. 鼠标移到某个星星上，它之前的所有星星都会亮。

3. 鼠标移到某个星星上并点击，会显示打分结果。

代码如下

<!doctype html>

<html>

<head>

<meta charset="gbk">

<title>切换</title>

<style>

.wrapper{width:300px; margin:10px auto; font:14px/1.5 arial;}

/*tab*/

#star{overflow:hidden;}

#star li{

float:left;

width:20px;

height:20px;

margin:2px;

display:inline;

color:#999;

font:bold 18px arial;

cursor:pointer

}

#star .act{

color:#c00

}

#star_word{

width:80px;

height:30px;

line-height:30px;

border:1px solid #ccc;

margin:10px;

text-align:center;

display:none

}

</style>

<script>

window.onload = function(){

var star = document.getElementById("star");

var star_li = star.getElementsByTagName("li");

var star_word = document.getElementById("star_word");

var result = document.getElementById("result");

var i=0;

var j=0;

var len = star_li.length;

var word = ['很差','差','一般',"好","很好"]

for(i=0; i<len; i++){

star_li[i].index = i;

star_li[i].onmouseover = function(){

star_word.style.display = "block";

star_word.innerHTML = word[this.index];

for(i=0; i<=this.index; i++){

star_li[i].className = "act";

}

}

star_li[i].onmouseout = function(){

star_word.style.display = "none";

for(i=0; i<len; i++){

star_li[i].className = "";

}

}

star_li[i].onclick = function(){

result.innerHTML = (this.index+1)+"分";

}

}

}

</script>

</head>

<body>

<div class="wrapper">

打分结果

<span id="result"></span>

<ul id="star">

<li>★</li>

<li>★</li>

<li>★</li>

<li>★</li>

<li>★</li>

</ul>

<div id="star_word">一般</div>

</div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。