黑马程序员技术交流社区

标题: js实现简单的评分控件 [打印本页]

作者: 吴伟 时间: 2012-12-16 21:54
标题: js实现简单的评分控件
本帖最后由吴伟于 2012-12-16 21:57 编辑

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>模拟评分控件</title>
      <style type="text/css">
            #table1
            {
                     width:180px;
                     color:red;
                     font-size:30px;
                     font-weight:bold;
            }
            #table1 tr td
            {
                     cursor:pointer;
            }
      </style>
      <script type="text/javascript">
            var score;
            //onmouseover、onmouseout和onclick事件都由该事件处理程序处理
            //通过window.event.type或arguments[0].type来判断是哪个事件
            function eventHandle(){
                     if(score) return;
                     var tds=document.getElementById("table1").getElementsByTagName("td");
                     var eventType=window.event?window.event.type:arguments[0].type;
                     for(var i=0;i<tds.length;i++)
                     {
                              if(eventType=="mouseover")
                              {
                                    if(tds!=this)
                                    {
                                             tds.innerHTML="★";
                                    }
                                    else
                                    {
                                             this.innerHTML="★";
                                             return;
                                    }
                              }
                              else if(eventType=="mouseout")
                              {
                                    tds.innerHTML="☆";
                              }
                              else if(eventType=="click")
                              {
                                    if(tds==this)
                                    {
                                             score=i+1;
                                             return;
                                    }
                              }
                     }
            };

            window.onload=function(){
                     var tds=document.getElementById("table1").getElementsByTagName("td");
                     for(var i=0;i<tds.length;i++)
                     {
                              tds.onmouseover=eventHandle;
                              tds.onmouseout=eventHandle;
                              tds.onclick=eventHandle;
                     }
            };
      </script>
</head>
<body>
      <table id="table1">
            <tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
      </table>
</body>
</html>

作者: 许庭洲 时间: 2012-12-16 22:01
值得学习ing!

作者: 王晨 时间: 2012-12-16 22:35
学习了……挺实用的

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2