js实现空心正方形边框循环高亮显示

来源：互联网发布：电脑微信多开软件编辑：程序博客网时间：2024/05/17 09:32
效果图

<body><div id="root"></div><script type="text/javascript">    var oRoot = document.getElementById('root');    function kongxinjuxing(n){                      //画出空心矩形        for(var i=1; i<=n; i++){            for(var j=1; j<=n; j++){                if(i==1 || i==n){                               oRoot.innerHTML += "<div class=\"black\"></div>";                }else if(j==1 || j==n){                oRoot.innerHTML += "<div class=\"black\"></div>";                }else{                oRoot.innerHTML += "<div class=\"white\"></div>";                }            }            oRoot.innerHTML += "<br/>";        }    }    kongxinjuxing(8);    var oDivs = oRoot.getElementsByClassName('black');      //获取所有黑色div    function changeBorder(obj){        var timer = null;        var i = 0;        timer = setInterval(function(){            for (var index = 0; index < obj.length; index++) {                var element = obj[index];                element.style.borderColor = '#ccc';            }            i %= obj.length;            console.log(i);            obj[i].style.borderColor = "#f00";            i++;            console.log(i);        }, 300);    }    function changeBorder2(obj){        var timer = null;        var i = 0;        var last = -1;        var edgelen = (obj.length+4)/4;        var op = [+1, +2, -1, -2, edgelen, -1*edgelen];        var opindex = 0;        timer = setInterval(function(){            if (last != -1)            {                obj[last].style.borderColor = '#ccc';            }            //i %= obj.length;            console.log(i);            obj[i].style.borderColor = "#f00";            last = i;            if(i == 0)            {                opindex = 0;            }            else if(i == edgelen-1)            {                opindex = 1;            }            else if(i == obj.length-1-edgelen)            {                opindex = 4;            }            else if(i == obj.length-1)            {                opindex = 2;            }            else if(i == obj.length-edgelen)            {                opindex = 3;            }            else if(i == edgelen)            {                opindex = 5;            }            i += op[opindex];        }, 1000);    }    changeBorder2(oDivs);</script></body>
0 0