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

最新推荐文章于 2021-05-30 20:52:22 发布

巴依尔13

最新推荐文章于 2021-05-30 20:52:22 发布

阅读量1.9k

点赞数

分类专栏：前端开发文章标签： javascript 逻辑题

本文链接：https://blog.csdn.net/wds207207/article/details/70306143

版权

前端开发专栏收录该内容

20 篇文章 0 订阅

订阅专栏

效果图

<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>