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