评分系统

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

<!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 {

                width: 150px;

                margin: 10px auto;

                overflow: hidden;

            }

            

            #pingfen li {

                width: 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>

你可能感兴趣的:(系统)