JavaScript星级评分，仿百度，增强版

JavaScript星级评分，仿百度，增强版

<!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>JavaScript星级评分，仿百度，增强版</title>
    <style type="text/css">
    .wrapper{left:100px;top:100px}
    tr,td{font-size:66px;color:#000000;background:#ffffff;}
    </style>
    <script type="text/javascript">
        function ArrayIndexOf(arr, element) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == element) {
                    return i;
                }
            }
            return -1;
        }
        function GetTds() {
            var tbl = document.getElementById("tblMain");
            var tds = tbl.getElementsByTagName("td");
            return tds;
        }
        function InitEvent() {
           var tds=GetTds();
           for (var i = 0; i < tds.length; i++) {
               var td = tds[i];
               td.onmouseover = TdOnclick;
               td.style.cursor = "pointer";

            }
        }
        function TdOnclick() {
            var tds = GetTds();
            var index = ArrayIndexOf(tds, this);  //this用得传神
            if (index < 0) {
                return;
            }
            for (var i = 0; i <=index; i++) {
                var td = tds[i];
                td.innerHTML = "★";
                switch (i) {
                    case 0:
                        tds[5].innerText = "很差";
                        break;
                    case 1:
                        tds[5].innerText = "较差";
                        break;
                    case 2:
                        tds[5].innerText = "还行";
                        break;
                    case 3:
                        tds[5].innerText = "推荐";
                        break;
                    case 4:
                        tds[5].innerText = "力荐";
                        break;                       
                        
                }
            }
            for (var j = index + 1; j < tds.length-1; j++) {  //错误j写成了i
                var td = tds[j];
                td.innerHTML = "☆";
            }
        }
    
    </script>
</head>
<body  onload="InitEvent()" class="wrapper">
<table id="tblMain">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td style="font-size:30px;width:45px"></td></tr>
</table>
</body>
</html>
View Code

 

posted @ 2018-02-08 10:35  森林长  阅读(117)  评论(0)    收藏  举报