Js实现网站常用的评分效果!
View Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>网站评分特效</title>
<style type="text/css">
*
{
font-size: 50px;
}
</style>
<script language="javascript" type="text/javascript">
function indexOf(arr, element) { //在Js中自己写indexOf方法；
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
return -1;
}
function CommentLevel() {
var CommentLevel = document.getElementById("CommentLevel");
var tds = document.getElementsByTagName("td"); //获取CommentLevel表格下的td，不处理其他表格中的td;
for (var i = 0; i < tds.length; i++) {
var td = tds[i]; //获取每个td;
td.onmouseover = TdOnClick;
td.style.cursor = "pointer";
}
}
function TdOnClick() {
var CommentLevel = document.getElementById("CommentLevel");
var tds = document.getElementsByTagName("td"); //获取CommentLevel表格下的td，不处理其他表格中的td;
var index = indexOf(tds, this); //获取当前点击位置；
for (var i = 0; i <= index; i++) { //点击之前的都变红；
tds[i].innerText="★";
}
for (var i = index + 1; i < tds.length; i++) { //点击之后的是白色；
tds[i].innerText="☆";
}
}
</script>
</head>
<body onload="CommentLevel()">
<table id="CommentLevel">
<tr>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>网站评分特效</title>
<style type="text/css">
*
{
font-size: 50px;
}
</style>
<script language="javascript" type="text/javascript">
function indexOf(arr, element) { //在Js中自己写indexOf方法；
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
return -1;
}
function CommentLevel() {
var CommentLevel = document.getElementById("CommentLevel");
var tds = document.getElementsByTagName("td"); //获取CommentLevel表格下的td，不处理其他表格中的td;
for (var i = 0; i < tds.length; i++) {
var td = tds[i]; //获取每个td;
td.onmouseover = TdOnClick;
td.style.cursor = "pointer";
}
}
function TdOnClick() {
var CommentLevel = document.getElementById("CommentLevel");
var tds = document.getElementsByTagName("td"); //获取CommentLevel表格下的td，不处理其他表格中的td;
var index = indexOf(tds, this); //获取当前点击位置；
for (var i = 0; i <= index; i++) { //点击之前的都变红；
tds[i].innerText="★";
}
for (var i = index + 1; i < tds.length; i++) { //点击之后的是白色；
tds[i].innerText="☆";
}
}
</script>
</head>
<body onload="CommentLevel()">
<table id="CommentLevel">
<tr>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
</tr>
</table>
</body>
</html>
