zoukankan      html  css  js  c++  java
  • 网页中评分效果原理。

    哈哈,只是简单的原理(代码可能不是这样写的),明白原理就好~~~~~

        <title></title>
        <style type="text/css">
            td {
                font-size: 5px;
                cursor: default;
            }
        </style>
    </head>
    <body>
    
        <table id="Star">
            <tr>
                <td>☆</td>
            </tr>
    
            <tr>
                <td>☆</td>
            </tr>
    
            <tr>
                <td>☆</td>
            </tr>
    
            <tr>
                <td>☆</td>
            </tr>
    
            <tr>
                <td>☆</td>
            </tr>
        </table>
    </body>
    </html>
    <script type="text/javascript">
        ///未点击之前每个元素都有mouseover,mouseout事件,
        ///点击之后,每个元素都取消mouseover,mouseout事件,
        ///每个元素点击(包含此元素)之前变黑,之后(不包含)变白。
        var len = 0;
        //if (arguments[0].__proto__.constructor.name == 'MouseEvent') {
        //    idEnd = arguments[0].srcElement.id;
        //} if (arguments[0].__proto__.constructor.name == 'HTMLTableCellElement') {
        //    idEnd = arguments[0].id;
        //}
        var BGChangNull = function (low, high) {
            for (var i = low; i <= high; i++) {
                document.getElementById(i).innerHTML = '☆';
            }
        };
        var BGChangeValue = function (low, high) {
            for (var i = low; i <= high; i++) {
                document.getElementById(i).innerHTML = '★';
            }
        };
        var BGChangeAble = function (bool) {
            for (var i = 0; i < len; i++) {
                document.getElementById(i).onmouseover.disabled = bool;
                document.getElementById(i).onmouseout.disabled = bool;
            }
        };
        var BGChangeOver = function () {
            var idEnd = this.id;
            if (!this.onmouseover.disabled) {
                BGChangeValue(0, idEnd);
            }
        };
        var TDChangeOut = function () {
            var idEnd = this.id;
            if (!this.onmouseout.disabled) {
                BGChangNull(0, idEnd);
                ////var idEnd = this.id;
                //BGChangNull(0, this.id);
                ////this.onmouseover.disabled = true;
            }
            //else {
            //    this.onmouseout.disabled = true;
            //}
        };
        var TDOnclick = function () {//点击后改变over事件
            var idEnd = this.id;
            BGChangeValue(0, idEnd);
            BGChangNull(++idEnd, len - 1);
            BGChangeAble(true);
            document.getElementsByTagName('span')[0].innerText = idEnd;
        };
        window.onload = function () {
            var tds = document.getElementById('Star').getElementsByTagName('td');
            len = parseInt(tds.length);
            for (var i = 0; i < len; i++) {
                tds[i].id = i;
                tds[i].onmouseover = BGChangeOver;
                tds[i].onmouseout = TDChangeOut;
                tds[i].onclick = TDOnclick;
            }
            var sp = document.createElement('span');
            document.body.appendChild(sp);
        };
    </script>

    百度浏览器效果图:

    JQuery代码:

    <style type="text/css">
            a {
                font-size: 25px;
                color: blue;
                cursor: default;
            }
        </style>
        <script src="JS/jquery-1.7.1.js"></script>
        <script type="text/javascript">
    
            $(function () {
                var bo = true;
                $('a').mouseover(function () {
                    if (bo)
                        $(this).text("").prevAll().text("").end().nextAll('a').text("");
                }).mouseout(function () {
                    if (bo)
                        $('a').text("");
                }).click(function () {
                    $('span').text($(this).prevAll().length + 1);
                    bo = !bo;
                    if (bo) {
                        $(this).mouseover();
                        bo = !bo;
                    }
                });
            });
        </script>
    </head>
    <body>
        <div>
            <a>☆</a><a>☆</a><a>☆</a><a>☆</a><a>☆</a><a>☆</a>
            <span></span>
        </div>
    </body>
    jquery-1.7.1.js文件官网:http://jquery.com/download/
  • 相关阅读:
    Python爬虫入门之Urllib库的高级用法
    Python爬虫入门之Urllib库的基本使用
    Python中对字符串的操作
    Python2.x爬虫入门之URLError异常处理
    Python编写的记事本小程序
    Python2.X和Python3.X中Tkinter模块的文件对话框、下拉列表的不同
    记录面试龙腾简合-java开发工程师经历
    解决npm ERR! Please try running this command again as root/Administrator. 问题
    ionic3/4 使用NavController 返回两层的方式
    点击iframe窗口里的超链接,打开新页面的方式
  • 原文地址:https://www.cnblogs.com/wjshan0808/p/3550198.html
Copyright © 2011-2022 走看看