码迷,mamicode.com
首页 > 移动开发 > 详细

五角星随鼠标移动显示的效果

时间:2014-11-11 18:19:08      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:blog   io   ar   java   for   div   on   log   cti   

<!DOCTYPE html> 
<meta charset="UTF-8">
<html> 
<head> 
    <title></title> 
    <script type="text/javascript"> 
        var isclick = false; 
        function initEvent() { 
            var tableWjx = document.getElementById("tableWjx"); 
            var tds = tableWjx.getElementsByTagName("td"); 
            for (var i = 0; i < tds.length; i++) { 
                var td = tds[i]; 
                td.onmouseover = change; 
                td.onmouseout = repeal; 
                td.onclick = change1; 
            }        
        } 
        function change() { 
            if (!isclick) { 
                var tableWjx = document.getElementById("tableWjx"); 
                var tds = tableWjx.getElementsByTagName("td"); 
                var index = indexof(tds, this); 
                for (var i = 0; i < index + 1; i++) { 
                    var td = tds[i]; 
                    td.innerText = "★"; 
                } 
            } 
        } 
        function repeal() { 
            if (!isclick) { 
                var tableWjx = document.getElementById("tableWjx"); 
                var tds = tableWjx.getElementsByTagName("td"); 
                var index = indexof(tds, this); 
                for (var i = 0; i < index + 1; i++) { 
                    var td = tds[i]; 
                    td.innerText = "☆"; 
                } 
            } 
        } 
        function indexof(arr, ele) { 
            for (var i = 0; i < arr.length; i++) { 
                if (arr[i] == ele) { 
                    return i; 
                } 
            } 
            return -1; 
        } 
        function change1() { 
            if (!isclick) { 
                change(); 
                isclick = true; 
            } 
            else { 
                alert("Sorry,You had clicked me!"); 
            } 
        } 
    </script> 
</head> 
<body onload="initEvent()"> 
<table id="tableWjx"><tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table> 
</body> 
</html>

  

五角星随鼠标移动显示的效果

标签:blog   io   ar   java   for   div   on   log   cti   

原文地址:http://www.cnblogs.com/zlz-ling/p/4089959.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!