별 등급 effect_javascript 기술을 달성하는 js 방법-JS 튜토리얼-php.cn

별 등급 effect_javascript 기술을 달성하는 js 방법

WBOY

풀어 주다： 2016-05-16 16:04:53

원래의

1238명이 탐색했습니다.

이 기사의 예에서는 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 프로그래밍 설계에 도움이 되기를 바랍니다.