zoukankan      html  css  js  c++  java
  • 评分系统

    一个评分的代码,很简单!

    <!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>
  • 相关阅读:
    23. Sum Root to Leaf Numbers
    22. Surrounded Regions
    21. Clone Graph
    19. Palindrome Partitioning && Palindrome Partitioning II (回文分割)
    18. Word Ladder && Word Ladder II
    14. Reverse Linked List II
    20. Candy && Gas Station
    16. Copy List with Random Pointer
    ubuntu 下建立桌面快捷方式
    java基础篇-jar打包
  • 原文地址:https://www.cnblogs.com/niubenbit/p/2765809.html
Copyright © 2011-2022 走看看