zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    python模块学习第 0000 题
    报错The VMware Authorization Service is not running
    图像指纹的重复识别
    CSS预编译器配置-------LESS Sass Stylus webstorm
    CSS布局中的水平垂直居中
    进度与日程
    HTML5 application cache
    进度
    CC2530芯片介绍
    Linux命令工具 top详解
  • 原文地址:https://www.cnblogs.com/zhuiyi/p/2025955.html
Copyright © 2011-2022 走看看