méthode js pour obtenir des compétences en étoiles effect

méthode js pour obtenir des compétences en étoiles effect_javascript

WBOY

Libérer： 2016-05-16 16:04:53

original

1239 Les gens l'ont consulté

L'exemple de cet article décrit comment obtenir l'effet de notation par étoiles dans js. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

De nombreux sites Web ont des effets de notation par étoiles comme l'image ci-dessous. Aujourd'hui, nous verrons comment utiliser js pour obtenir l'effet de notation.

Explication détaillée de l'effet
1. Lorsque vous passez la souris, l'étoile s'allume et le texte ci-dessous s'affiche. Lorsque la souris est déplacée, l'étoile sera grise et le texte ci-dessous ne sera pas affiché.
2. Déplacez la souris sur une étoile et toutes les étoiles avant qu'elle s'allument.
3. Déplacez la souris sur une étoile et cliquez, les résultats du score seront affichés.

Le code est le suivant

<!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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.