JavaScript实现星级评分
程序员文章站
2022-06-13 14:56:34
事件onmouseover
事件onmouseover
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>javascript星级评分</title> <style type="text/css"> *{margin:0;padding:0;} .wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;} </style> <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 gettds() { var tbl = document.getelementbyid("tblmain"); var tds = tbl.getelementsbytagname("td"); return tds; } function initevent() { var tds=gettds(); for (var i = 0; i < tds.length; i++) { var td = tds[i]; td.onmouseover = tdonclick; td.style.cursor = "pointer"; } } function tdonclick() { var tds = gettds(); var index = arrayindexof(tds, this); for (var i = 0; i <=index; i++) { var td = tds[i]; td.innerhtml = "★"; } for (var j = index + 1; j < tds.length; j++) { var td = tds[j]; td.innerhtml = "☆"; } } </script> </head> <body onload="initevent()" class="wrapper"> <table id="tblmain"> <tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr> </table> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
下一篇: linux设置tomcat自启动的方法