javascript鼠標(biāo)滑動(dòng)評(píng)分控件完整實(shí)例
本文實(shí)例講述了javascript鼠標(biāo)滑動(dòng)評(píng)分控件。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript鼠標(biāo)滑動(dòng)控件</title> <script type="text/javascript"> function ArrayIndexof(arr, inElement) { for (var i = 0; i < arr.length; i++) { if (arr[i] == inElement) { return i; } } return -1; } function GetTDS() { var tbl = document.getElementById("tblMain"); var tds = tbl.getElementsByTagName("td"); return tds; } function iniEvent() { var tds = GetTDS(); for (var i = 0; i < tds.length; i++) { td = tds[i]; td.onmouseover = TdOnMouseOver; } var tbl = document.getElementById("tblMain"); tbl.onmouseout = TableMouseOut; } function SetRating(tdTmp) { var tds = GetTDS(); var index = ArrayIndexof(tds, tdTmp); for (var i = 0; i <= index; i++) { td = tds[i]; td.innerHTML = "★"; } for (var i = index + 1; i < tds.length; i++) { td = tds[i]; td.innerHTML = "☆"; } } function TdOnMouseOver() { SetRating(this); } //鼠標(biāo)離開表格后自動(dòng)清除 function TableMouseOut() { var tds = GetTDS(); for (var i = 0; i < tds.length; i++) { td = tds[i]; td.innerHTML = "☆"; } } </script> </head> <body onload="iniEvent()"> <table id="tblMain" border="1"> <tr> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> </tr> </table> </body> </html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- js實(shí)現(xiàn)鼠標(biāo)拖拽div左右滑動(dòng)
- 基于JavaScript實(shí)現(xiàn)鼠標(biāo)向下滑動(dòng)加載div的代碼
- JS DOM實(shí)現(xiàn)鼠標(biāo)滑動(dòng)圖片效果
- JS將滑動(dòng)門改為選項(xiàng)卡(需鼠標(biāo)點(diǎn)擊)的實(shí)現(xiàn)方法
- js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左上角滑動(dòng)菜單效果代碼
- javascript實(shí)現(xiàn)百度地圖鼠標(biāo)滑動(dòng)事件顯示、隱藏
- js實(shí)現(xiàn)鼠標(biāo)感應(yīng)向下滑動(dòng)隱藏菜單的方法
- javascript table美化鼠標(biāo)滑動(dòng)單元格變色
- js自動(dòng)滑動(dòng)+鼠標(biāo)滑動(dòng)區(qū)域
- js實(shí)現(xiàn)鼠標(biāo)滑動(dòng)到某個(gè)div禁止?jié)L動(dòng)
相關(guān)文章
JS實(shí)現(xiàn)消息來時(shí)讓網(wǎng)頁標(biāo)題閃動(dòng)效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)消息來時(shí)讓網(wǎng)頁標(biāo)題閃動(dòng)效果的方法,實(shí)例分析了JavaScript基于時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素的技巧,并附帶了開心網(wǎng)的標(biāo)題閃動(dòng)解決方案,需要的朋友可以參考下2016-04-04JavaScript 就地編輯HTML節(jié)點(diǎn)實(shí)現(xiàn)代碼
JavaScript 就地編輯HTML節(jié)點(diǎn)實(shí)現(xiàn)代碼2009-07-07JavaScript中的property和attribute介紹
JavaScript中的property和attribute介紹,需要的朋友可以參考下。2011-12-12JS實(shí)現(xiàn)靜態(tài)頁面搜索并高亮顯示功能完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)靜態(tài)頁面搜索并高亮顯示功能,涉及javascript事件響應(yīng)、字符遍歷替換及頁面元素屬性動(dòng)態(tài)變換等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09JavaScript原生對(duì)象常用方法總結(jié)(推薦)
下面小編就為大家?guī)硪黄狫avaScript原生對(duì)象常用方法總結(jié)(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05JavaScript本地儲(chǔ)存:localStorage、sessionStorage、cookie的使用
這篇文章主要介紹了JavaScript本地儲(chǔ)存:localStorage、sessionStorage、cookie的使用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10JS簡(jiǎn)單獲得節(jié)點(diǎn)元素的方法示例
這篇文章主要介紹了JS簡(jiǎn)單獲得節(jié)點(diǎn)元素的方法,結(jié)合實(shí)例形式分析了javascript獲取頁面節(jié)點(diǎn)元素及修改元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-02-02