评分系统

一个评分的代码，很简单！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <style>
            #pingfen ul {
                 150px;
                margin: 10px auto;
                overflow: hidden;
            }
            
            #pingfen li {
                 20px;
                float: left;
                height: 20px;
                cursor: pointer;
                background: blue;
                border: 5px solid #fff;
                list-style: none;
            }
            
            #pingfen .active {
                background: red;
            }
            
            #num {
                text-align: center;
                font-size: 14px;
                color: blue;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                try {
                    var oLi = document.getElementsByTagName('li');
                    var oNum = document.getElementById('num');
                    var num = 0;
                    var i = 0;
                    for (i = 0; i < oLi.length; i++) {
                        oLi[i].index = i;
                        oLi[i].onmouseover = function(){
                            for (i = 0; i < oLi.length; i++) {
                                oLi[i].className = '';
                            }
                            for (i = 0; i <= this.index; i++) {
                                oLi[i].className = 'active';
                            }
                        }
                        oLi[i].onmouseout = function(){
                            for (i = 0; i < oLi.length; i++) {
                                oLi[i].className = '';
                            }
                            for (i = 0; i <= num; i++) {
                                oLi[i].className = 'active';
                            }
                        }
                        oLi[i].onclick = function(){
                            num = this.index;
                            oNum.innerHTML = num + 1;
                            for (i = 0; i <= this.index; i++) {
                                oLi[i].className = 'active';
                            }
                        }
                    }
                } 
                catch (e) {
                    alert('页面异常');
                };
                }
        </script>
    </head>
    <body>
        <div id="pingfen">
            <ul>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
                <li>
                </li>
            </ul>
        </div>
        <p id="num">
            0
        </p>
    </body>
</html>

相关阅读:
simian 查找项目中的重复代码
 idea 启动 ShardingProxy
kafka 加密通信，python-kafka 访问加密服务器
 apt-get 修改源
 短轮询、长轮询、SSE 和 WebSocket
前端模块化：CommonJS,AMD,CMD,ES6
Set、Weak Set、Map、Weak Map学习笔记
 博客园应该如何运营
 Vue中Route的对象参数和常用props传参
 Dapper的新实践，Dapper.Contrib的使用与扩展
原文地址：https://www.cnblogs.com/niubenbit/p/2765809.html