Js实现网站常用的评分效果!

Js实现网站常用的评分效果!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>
上一篇:imtoken钱包创建/备份/删除/导入教程,你的第一个智能数字钱包


下一篇:设计师进阶必读的设计书都在这里了(上部)