js仿淘寶和百度文庫(kù)的評(píng)分功能
本文實(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)文章
一文帶你理解微信小程序中RPC通信的實(shí)現(xiàn)
在微信小程序開(kāi)發(fā)中,要實(shí)現(xiàn)兩個(gè)線程之間的通信是一項(xiàng)重要的任務(wù),所以本文就來(lái)講講如何使用小程序的?postMessage?和?addListener?API?來(lái)實(shí)現(xiàn)在兩個(gè)線程之間進(jìn)行高效的?RPC?通信吧2023-06-06微信小程序購(gòu)物商城系統(tǒng)開(kāi)發(fā)系列-目錄結(jié)構(gòu)介紹
這篇文章主要介紹了微信小程序購(gòu)物商城系統(tǒng)開(kāi)發(fā)系列-目錄結(jié)構(gòu)介紹,有興趣的可以了解一下。2016-11-11基于JS分頁(yè)控件實(shí)現(xiàn)簡(jiǎn)單美觀仿淘寶分頁(yè)按鈕效果
這篇文章主要介紹了基于JS分頁(yè)控件實(shí)現(xiàn)簡(jiǎn)單美觀仿淘寶分頁(yè)按鈕效果的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11Javascript 事件捕獲的備忘(setCapture,captureEvents)
Javascript 事件捕獲的備忘(setCapture,captureEvents)...2006-09-09JavaScript實(shí)現(xiàn)的簡(jiǎn)單煙花特效代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的簡(jiǎn)單煙花特效代碼,涉及JavaScript數(shù)學(xué)運(yùn)算及頁(yè)面元素基于定時(shí)函數(shù)運(yùn)動(dòng)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10javascript之通用簡(jiǎn)單的table選項(xiàng)卡實(shí)現(xiàn)(二)
上篇中的選項(xiàng)卡存在這樣的問(wèn)題:把邏輯封裝在table.js中,不夠靈活,也就是說(shuō)如果某個(gè)選項(xiàng)卡是實(shí)現(xiàn)異步請(qǐng)求或者跳轉(zhuǎn),而非div的顯隱切換,那么就得修過(guò)table.js來(lái)達(dá)到目的,顯然不是我所需要的。2010-05-05原生JS實(shí)現(xiàn)動(dòng)態(tài)添加新元素、刪除元素方法
這篇文章主要介紹了原生js實(shí)現(xiàn)動(dòng)態(tài)添加新元素、刪除元素方法 ,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05