“星星评级”样式表单设计

来源：互联网发布：vb.net sleep 编辑：程序博客网时间：2024/04/29 14:30

很多网页调查问卷中都经常使用这种形式，而且最常见的就是淘宝购物时的星级评价，下面自己动手实现一个星级评价样式的表单

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>问卷表单设计</title>    <style>        #frm{            float: left;            border: 2px solid #aaa;            padding:10px;            border-radius: 8px;        }        #frm #submit{            background: url(img/11.jpg);            width: 112px;            height: 36px;            border: none;            cursor: pointer;            color:#fff;            font-size: 18px;            font-weight: bold;            float: left;            clear: left;            border-radius: 5px;        }        #frm .vote label{            float: left;            width: 150px;            padding:6px 0;            font-size: 14px;            font-weight: bold;        }        .score{            width: 30px;            margin:0;            float: left;        }        .vote{            float: left;            clear: left;        }    </style>    <script>        function overhandle(obj){            var fnode = obj.parentNode;            var imglist = fnode.getElementsByTagName('img');            for(var i=0;i<imglist.length;i++){                imglist[i].src = 'img/start0.png';            }            var node = obj;            var index = 0;            while(node = node.previousSibling){                if(node.nodeType == 1){                    index ++;                }            }            node = obj;            for(;index>=2;){                if(node.nodeType == 1){                    node.src = 'img/start1.png';                    index--;                }                node = node.previousSibling;            }        }        function outhandle(obj){            var fnode = obj.parentNode;            var list = fnode.getElementsByTagName('input');            var imglist = fnode.getElementsByTagName('img');            for(var i=0;i<imglist.length;i++){                imglist[i].src = 'img/start0.png';            }            for(var i=0;i<list[0].value;i++){                imglist[i].src = 'img/start1.png';            }        }        function clickhandle(obj){            var fnode = obj.parentNode;            var list = fnode.getElementsByTagName('input');            var node = obj;            var index= 0;            while(node =  node.previousSibling){                if(node.nodeType == 1){                    index++;                }            }            list[0].value = index-1;        }    </script></head><body><form action="#" method="post" id="frm">    <div class="vote">        <label for="">服务满意度</label>        <input type="hidden" value="0" name="answ1">        <img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />        <img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />        <img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />        <img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />        <img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />    </div>    <div class="vote">        <label for="">书店环境满意程度</label>        <input type="hidden" value="0" name="answ2">        <img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />        <img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />        <img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />        <img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />        <img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />    </div>    <div class="vote">        <label for="">书籍质量满意度</label>        <input type="hidden" value="0" name="answ3">        <img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />        <img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />        <img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />        <img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />        <img src="img/start0.png" alt="" class="score" onmouseover = "overhandle(this)" onmouseout = "outhandle(this)" onclick="clickhandle(this)" />    </div>    <input type="submit" id="submit" value="确定提交"></form></body></html>

效果图：
初始效果

选择星级

代码剖析：
1.鼠标移动事件的处理：当某个img标签发生onmouseover事件时，执行overhandle()函数。该函数首先获得父节点，并将相应的所有的img的src属性设置为img/start0.png，接着所有previousSibling向前计算当前发生的onmouseover事件的是第几个标签节点（节点的nodeType属性为1的才是标签节点）。因为前两个标签节点为label和input，所以再将从第三个节点开始直到当前发生事件的节点的src属性设置为img/start1.png。
2.鼠标单击事件处理：当某个img标签发生onclick事件时，表示用户选择了当前的“星星评级”，这时执行clickhandle()函数。该函数先获得父节点下面的input标签，接着使用previousSibling属性来获得当前事件的发生标签，并将input的value属性设置为“星星评级”（即第几个img标签）。
3.鼠标移出事件处理：当某个img标签发生onmouseout事件时，这时执行outhandle()函数。该函数先获得父节点下面的input标签，因为之前必定发生了鼠标移动事件，所以img的src属性可能改变了，所以现在根据input标签的value属性的值来将src设置回正确的值。

阅读全文

0 0