亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js仿淘寶和百度文庫(kù)的評(píng)分功能

 更新時(shí)間:2016年05月15日 16:30:02   投稿:lijiao  
這篇文章主要為大家詳細(xì)介紹了js仿淘寶和百度文庫(kù)的評(píng)分功能的相關(guān)代碼和實(shí)現(xiàn)思路,具有一定的參考價(jià)值,需要的朋友可以參考下

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

效果如圖:

五個(gè)五角星分別放在了一個(gè)table的五列中。下面是一個(gè)<p>,用來(lái)顯示評(píng)分結(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">您評(píng)了<label id="score"></label>分</p>

</body>

body的onload事件綁定的是一個(gè)方法,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() {  //為每個(gè)td設(shè)置獲得焦點(diǎn)屬性【也可以設(shè)置onclick屬性】
   var maintable = document.getElementById("maintable");  //獲取需要設(shè)置的表格
   var tds = maintable.getElementsByTagName("td");   //獲取表格下的所有單元格
   document.getElementById("result").style.display = "none"; //設(shè)置得分結(jié)果為隱藏
   for (var i = 0; i < tds.length; i++) {
    var td = tds[i];
    td.onfocus = getonfocus;
    td.style.cursor = "pointer";    //為了設(shè)置鼠標(biāo)放在五角星上呈手型
   }
    
  }
  function getonfocus(){  //設(shè)置td的焦點(diǎn)事件,
   var maintable = document.getElementById("maintable");
   var tds = maintable.getElementsByTagName("td");
   var index = getindex(tds, this);   //返回響應(yīng)事件的索引 用this代表觸發(fā)此事件的元素
   document.getElementById("result").style.display = "";  //得到分?jǐn)?shù)后把結(jié)果顯示出來(lái)
   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代碼主要有三個(gè)函數(shù)構(gòu)成;
  ①:changebg();body的onload事件綁定的函數(shù);為了實(shí)現(xiàn)對(duì)每個(gè)td元素綁定onfocus事件;
  ②:getonfocus();td元素onfocus事件的具體實(shí)現(xiàn);
  ③:getindex();有兩個(gè)參數(shù),一個(gè)是td元素的集合數(shù)組,一個(gè)是相應(yīng)事件的td元素,注意使用this關(guān)鍵字。主要返回相應(yīng)事件的元素的索引,為了把響應(yīng)事件元素之前的顏色顯示成紅色,后面的元素顯示成黑色;

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論