JavaScript实现星级评分
程序员文章站
2023-11-20 09:32:04
事件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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！