zoukankan html css js c++ java

js 简易评分控件

页面代码：

View Code

<body>
    <table id="rating">
        <tr>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
            <td id="score"></td>
        </tr>
    </table>
</body>

js代码：

View Code

<script type="text/javascript">
        window.onload = function () {
            //找到rating table下的 td
            var table = document.getElementById("rating");
            var tds = table.getElementsByTagName("td");
            //给每个td添加onmouseover事件
            for (var i = 0; i < tds.length; i++) {
                //给每个td添加id
                if (tds[i].id != "score") {
                    tds[i].id = i;
                    tds[i].onmouseover = function () {
                        this.style.cursor = "pointer";
                        var index = this.id;
                        //将鼠标前面的所有五角星变成实心的
                        for (var j = 0; j <= parseInt(index); j++) {
                            tds[j].innerHTML = "★";
                        }
                        //将鼠标后面的所有五角星变成空心
                        for (var i = parseInt(index) + 1; i < tds.length; i++) {
                            if (tds[j].id != "score") {
                                tds[i].innerHTML = "☆";
                            }
                        }
                        //添加评分
                        document.getElementById("score").innerHTML = parseInt(this.id)+1;
                    }
                }
            }

        }
    </script>

查看全文

相关阅读:
函数模板
 三次握手四次分手
 多态
 函数指针与多态
 继承和派生
 使用ntp 实现时间同步
 Hadoop之Mapreduce 程序
 hadoop学习笔记二
 hadoop学习笔记一
 大数据知识和资料总结

原文地址：https://www.cnblogs.com/nianlee/p/2966592.html