javascript模拟评分控件实现方法

时间：2021-05-26

本文实例讲述了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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章