<!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>网上评分设计</title>
<script type="text/javascript">
function indexOf(arr, element) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
return -1;
}
function initEvent() {
var rating = document.getElementById("Table1");
var tds = rating.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.style.cursor = 'pointer';
td.onmouseover = function() {
var rating = document.getElementById("Table1");
//不用担心和initEvent中的rating、tds变量冲突，因为他们是两个函数，只是写在了一起而已。
var tds = rating.getElementsByTagName("td");
var index = indexOf(tds, this);
rating.setAttribute("Rate",index+1);
for (var i = 0; i <= index; i++) {
tds[i].innerText = '★';
}
for (var i = index + 1; i < tds.length; i++) {
tds[i].innerText = '☆';
}
};
td.onclick = function() {
var rating = document.getElementById("Table1");
alert("您给出的分数是："+rating.getAttribute("Rate"));
};
}
}
</script>
</head>
<body>
<p>这是一个评分控件，在鼠标上悬停就可以设定分数，点击鼠标就可以选择你设定的分数。</p>
<table Rate="0" id="Table1"><tr style="font-size:xx-large;color:Green"><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table>
<script type="text/javascript">
initEvent();
</script>
</body>
</html>
浙公网安备 33010602011771号