评分系统

最新推荐文章于 2024-02-27 16:57:31 发布

weixin_30820077

最新推荐文章于 2024-02-27 16:57:31 发布

阅读量369

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/niubenbit/archive/2012/11/12/2765809.html

版权

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

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

转载于:https://www.cnblogs.com/niubenbit/archive/2012/11/12/2765809.html

weixin_30820077

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
评分系统

一个评分的代码，很简单！<!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> ...
复制链接

扫一扫