快捷導(dǎo)航

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

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

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

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

效果如圖：

五個(gè)五角星分別放在了一個(gè)table的五列中。下面是一個(gè)<p>,用來顯示評(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é)果顯示出來
   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)文章

js+div實(shí)現(xiàn)文字滾動(dòng)和圖片切換效果代碼
這篇文章主要介紹了js+div實(shí)現(xiàn)文字滾動(dòng)和圖片切換效果代碼,涉及javascript鼠標(biāo)事件及頁面元素圖片滾動(dòng)效果實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
JS 控件事件小結(jié)
事件對(duì)于控件來說至關(guān)重要，控件的消息通信機(jī)制使用事件的成本最低，但是對(duì)于JS控件來說有一些麻煩需要解決，JS類本身不支持事件，DOM模型支持的事件僅適應(yīng)于瀏覽器的DOM節(jié)點(diǎn)。所以創(chuàng)建一套事件是我們寫控件之前要做的
2012-10-10
基于Typescript與Axios的接口請(qǐng)求管理詳解
接口是一系列抽象方法的聲明,是一些方法特征的集合,這些方法都應(yīng)該是抽象的,需要由具體的類去實(shí)現(xiàn),然后第三方就可以通過這組抽象方法調(diào)用,讓具體的類執(zhí)行具體的方法,這篇文章主要給大家介紹了基于Typescript與Axios的接口請(qǐng)求管理的相關(guān)資料,需要的朋友可以參考下
2021-09-09
javascript游戲開發(fā)之《三國(guó)志曹操傳》零部件開發(fā)(四)用地圖塊拼成大地圖
小時(shí)候我們玩過拼圖游戲，是用自己的手去拼的。今天我們來研究研究用javascript來拼圖感興趣的朋友可以了解下,希望本文對(duì)你有所幫助
2013-01-01
JavaScript iframe數(shù)據(jù)共享接口實(shí)現(xiàn)方法
在iframe與父窗口或者與子窗口傳遞數(shù)據(jù)是一個(gè)麻煩的事情，如果我們能夠?qū)懸粋€(gè)一勞永逸的接口那就再方便不過了，下面就來簡(jiǎn)答介紹一下如何實(shí)現(xiàn)此功能，對(duì)js iframe相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
JS實(shí)現(xiàn)三級(jí)折疊菜單特效，其它級(jí)可自動(dòng)收縮
這篇文章主要介紹了JS實(shí)現(xiàn)三級(jí)折疊菜單特效，其它級(jí)可自動(dòng)收縮,需要的朋友可以參考下
2015-08-08
Js實(shí)現(xiàn)滾動(dòng)變色的文字效果
滾動(dòng)變色的文字js特效，可看到文字在交替變色顯示，以吸引人的注意，效果真心不錯(cuò)哦，需要的朋友可以參考下
2014-06-06
JavaScript實(shí)現(xiàn)繼承的7種方式總結(jié)
用官方點(diǎn)的話講繼承是面向?qū)ο笕筇卣髦?，可以使得子類具有父類的屬性和方法，同時(shí)還可以在子類中重新定義以及追加屬性和方法。本文整理了JavaScript實(shí)現(xiàn)繼承的7種方式，需要的可以了解一下
2023-04-04
你應(yīng)該了解的JavaScript Array.map()五種用途小結(jié)
大家都知道m(xù)ap() 方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。下面這篇文章主要給大家介紹了關(guān)于JavaScript Array.map()的五種用途，需要的朋友可以參考下
2018-11-11
JavaScript原型和原型鏈詳解
在面向?qū)ο蟮木幊陶Z言中,類和對(duì)象的關(guān)系是鑄模和鑄件的關(guān)系,對(duì)象總是從類創(chuàng)建而來,比如Java中,必須先創(chuàng)建類再基于類實(shí)例化對(duì)象,這篇文章主要介紹了JavaScript原型和原型鏈的相關(guān)知識(shí),需要的朋友可以參考下
2024-05-05