javascript模拟评分控件实现方法
2015-05-13 15:13
966 查看
本文实例讲述了javascript模拟评分控件实现方法。分享给大家供大家参考。具体实现方法如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态设置style(评分效果)</title> <script type="text/javascript"> //查找一个元素在数组中的索引位置 function ArrayIndexOf(arr, element) { for (var i = 0; i < arr.length; i++) { if (arr[i] == element) { return i; } } return -1; } function IniEvent() { var tbl = document.getElementById("tblRating"); var tds = tbl.getElementsByTagName("td"); for (var i = 0; i < tds.length; i++) { var td = tds[i]; td.onclick = tdOnClick; td.style.cursor = "pointer"; //设置光标手型 } } function tdOnClick() { var tbl = document.getElementById("tblRating"); var tds = tbl.getElementsByTagName("td"); //查找当前点击的td的索引 var index = ArrayIndexOf(tds, this); //之前的td改为红色 for (var i = 0; i <= index; i++) { tds[i].style.background = "red"; } //之后的td改为白色 for (var i = index + 1; i < tds.length; i++) { tds[i].style.background = "white"; } } </script> </head> <body onload="IniEvent()"> <table id="tblRating"> <tr> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> <td>☆</td> </tr> </table> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- javascript模拟评分控件实现方法
- JavaScript中模拟实现类似于Java的super关键字调用父类中同名方法
- JavaScript模拟实现继承的方法
- JavaScript实现MIPS乘法模拟的方法
- javascript实现模拟时钟的方法
- javascript实现模拟时钟的方法
- 对JavaScript的全文搜索实现相关度评分的功能的方法
- 对JavaScript的全文搜索实现相关度评分的功能的方法
- Android中通过WebView控件实现与JavaScript方法相互调用的地图应用
- 前台通过javascript模拟点击ASP按钮控件的方法
- JavaScript一点也不简单—实现“跨Frame的层模拟菜单”的方法(译文)
- 可编辑Select下拉列表控件实现方法(非DIV模拟)
- 多叉树结合JavaScript树形控件实现无限级树形菜单(一种构建多级有序树形结构JSON(或XML)数据源的方法)
- javascript实现评分控件
- JAVAScript js 模拟JAVA map类 实现put get 等JAVA map类方法
- javascript 模拟JQuery的Ready方法实现并出现的问题
- JavaScript:面向对象编程的模拟实现方法(一)
- JavaScript:面向对象编程的模拟实现方法(二)
- JavaScript:面向对象编程的模拟实现方法(三)
- javascript模拟select,jselect的方法实现