js仿淘寶和百度文庫的評分功能

更新時間：2016年05月15日 16:30:02 投稿：lijiao

這篇文章主要為大家詳細介紹了js仿淘寶和百度文庫的評分功能的相關代碼和實現(xiàn)思路,具有一定的參考價值，需要的朋友可以參考下

本文實例為大家分享了類似于淘寶和百度文庫的評分功能，js實現(xiàn)，供大家參考，具體內(nèi)容如下

效果如圖：

五個五角星分別放在了一個table的五列中。下面是一個<p>,用來顯示評分結(jié)果的；代碼如下：

<body onload="changebg()">
 <table border="0" align="center" cellpadding="0" cellspacing="0" id="maintable">
  <tr style=" font-size:30px;">
   <td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
  </tr>
 </table>
 <p align="center" id="result">您評了<label id="score"></label>分</p>

</body>

body的onload事件綁定的是一個方法，js代碼如下：

<script type="text/javascript">
  function getindex(arr,element) {  //參數(shù)：數(shù)組，元素；返回兄弟元素的索引  
   for (var i = 0; i < arr.length; i++) {
    if (arr[i] == element) {
     return i;
    }
   }
   return -1;
  }

  function changebg() {  //為每個td設置獲得焦點屬性【也可以設置onclick屬性】
   var maintable = document.getElementById("maintable");  //獲取需要設置的表格
   var tds = maintable.getElementsByTagName("td");   //獲取表格下的所有單元格
   document.getElementById("result").style.display = "none"; //設置得分結(jié)果為隱藏
   for (var i = 0; i < tds.length; i++) {
    var td = tds[i];
    td.onfocus = getonfocus;
    td.style.cursor = "pointer";　　　　//為了設置鼠標放在五角星上呈手型
   }
    
  }
  function getonfocus(){  //設置td的焦點事件，
   var maintable = document.getElementById("maintable");
   var tds = maintable.getElementsByTagName("td");
   var index = getindex(tds, this);   //返回響應事件的索引 用this代表觸發(fā)此事件的元素
   document.getElementById("result").style.display = "";  //得到分數(shù)后把結(jié)果顯示出來
   document.getElementById("score").innerText = index + 1;
   for (var i = 0; i < index+1; i++) {
    tds[i].style.color = "red";
   }
   for (var i = index+1; i < tds.length; i++) {
    tds[i].style.color = "black";
   }

  }
 </script>

js代碼主要有三個函數(shù)構(gòu)成；
　　①：changebg()；body的onload事件綁定的函數(shù)；為了實現(xiàn)對每個td元素綁定onfocus事件；
　　②：getonfocus()；td元素onfocus事件的具體實現(xiàn)；
　　③：getindex()；有兩個參數(shù)，一個是td元素的集合數(shù)組，一個是相應事件的td元素，注意使用this關鍵字。主要返回相應事件的元素的索引，為了把響應事件元素之前的顏色顯示成紅色，后面的元素顯示成黑色；

以上就是本文的全部內(nèi)容，希望對大家學習javascript程序設計有所幫助。

您可能感興趣的文章: