滑鼠劃過星級評分效果詳解

admin發表於2018-11-22

星級評分效果大家一定不會陌生，下面就通過程式碼例項詳細介紹一下它的實現過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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 index = 0;
  var len = star_li.length;
  var word = ["很差", "差", "一般", "好", "很好"];
  var clickIndex = -1;
  for(index=0; index<len; index++){
    star_li[index].index = index;
    star_li[index].onmouseover = function(){
      star_word.style.display = "block";
      star_word.innerHTML = word[this.index];
      for(index=0; index<=this.index; index++){
        star_li[index].className = "act";
      }
    }
    star_li[index].onmouseout = function(){
      star_word.style.display = "none";
      if (this.index <= clickIndex) {
        return;
      } else {
        for (var index = clickIndex + 1; index <= this.index; index++) {
          star_li[index].className = "";
        }
      }
    }
    star_li[index].onclick = function(){
      result.innerHTML = (this.index + 1) + "分";
      clickIndex = this.index;
      for (index = 0; index < len; index++) {
        star_li[index].className = "";
      }
      for (index = 0; index <= this.index; index++) {
        star_li[index].className = "act";
      }
    }
  }
}
</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>

上面的程式碼實現了星級評分效果，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var star = document.getElementById("star")，獲取id屬性值為star的元素物件。

（3）.var star_li = star.getElementsByTagName("li")，獲取所有的li元素。

（4）.var star_word = document.getElementById("star_word");，獲取id屬性值為star_word元素物件。

（5）.var result = document.getElementById("result")，獲取id屬性值為result的元素物件。

（6）.var i=0，宣告一個變數用來作為索引。

（7）.var len = star_li.length，獲取li元素的數目。

（8）.var word = ['很差','差','一般',"好","很好"]，建立一個陣列，用來儲存評價等級。

（9）.var clickIndex = -1，宣告一個變數並賦初值為-1，用來存放最後點選的li元素的索引值，由於li元素最小索引值是0，所以權且用-1表示從來沒有點選過li元素。

（10）.for(index=0; index<len; index++){}，遍歷每一個li元素。

（11）.star_li[index].index = index，為當前元素建立一個index屬性，並賦值為當前索引。

（12）.star_li[index].onmouseover = function(){}，為當前li元素註冊onmouseover事件處理函式。

（13）.star_word.style.display = "block"，顯示評價語。

（14）.star_word.innerHTML = word[this.index]，設定元素的內容，根據元素的索引來獲取陣列中的內容，因為評級和li元素的索引相對應。

（15）.for(index=0; index<=this.index; index++){

  star_li[index].className = "act";

}，將當前li元素和當前li元素之前的li元素class屬性值設定為"act"。

（16）.star_li[index].onmouseout = function(){}，為元素註冊mouseout事件處理函式。

（17）.star_word.style.display = "none"，隱藏顯示評語的元素。

（18）.if (this.index <= clickIndex) {

  return;

} else {

  for (var index = clickIndex + 1; index <= this.index; index++) {

    star_li[index].className = "";

  }

}，判斷當前滑鼠離開的li元素的索引是否小於等於最近點選li元素的索引，如果滿足，則直接跳出函式。

如果大於最近點選的li元素的索引，那麼當滑鼠離開的時候，就會將最近點選li元素（不包括）與滑鼠離開的li元素（包括）之間的所有li元素的class屬性值清空。

（19）.star_li[index].onclick = function(){}，為li元素註冊click事件處理函式。

（20）.result.innerHTML = (this.index + 1) + "分"，評分，由於第一個li元素索引是0，所以加1，也就是點選第一個li元素評分為1，第二個評分為2，以此來推。

（21）.clickIndex = this.index，將當前點選li元素的索引賦值給變數clickIndex 。

（22）.for (index = 0; index < len; index++) {

  star_li[index].className = "";

}，首先清空所有li元素的class屬性值，否則點選選取索引較大的li元素之後，就無法再選取較小的li元素。

（23）.for (index = 0; index <= this.index; index++) {

  star_li[index].className = "act";

}，將當前點選li元素（包括）之前的所有li元素class屬性值設定為"act"。

二.相關閱讀:

（1）.getElementsByTagName()參閱document.getElementsByTagName()一章節。

（2）.innerHTML參閱JavaScript innerHTML一章節。

（3）className參閱JavaScript className一章節。

相關文章