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

傷城~ 2022-06-17 08:11 215阅读 0赞

### 效果图 ###

![效果图][SouthEast]

--------------------

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

[SouthEast]: /images/20220617/ed2cb2feb1664ced940346e997668edf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS实现HTM搜索关键词高亮显示

> 如何利用JS实现HTML搜索关键词高亮显示呢？目录一、优化前的写法二、优化后的方法三、程序运行效果 -------------------- ![393

灰太狼/ 2023年09月29日 13:46/ 0 赞/ 22 阅读

相关 php js导航高亮显示,js实现当前导航菜单高亮显示

为了增加用户体验度，增加网页的易用性和美观度，往往需要把当前导航菜单以特殊方式显示，通常是高亮显示或有不同于其它菜单的背景，有两种方法可以实现，第一种是用纯css来实现，二是

短命女/ 2023年01月17日 08:25/ 0 赞/ 210 阅读

相关 [转]JS,HTML高亮显示

[http://tool.92798.net/more/codelight\_js.html][http_tool.92798.net_more_codelight_js.ht

妖狐艹你老母/ 2022年09月19日 10:47/ 0 赞/ 153 阅读

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

效果图 ![效果图][SouthEast] -------------------- <body> <div id="root"></div>

傷城~/ 2022年06月17日 08:11/ 0 赞/ 216 阅读

相关 js之实现表格高亮显示

步骤：第一步：确定事件(onmouseover和onmouseout)并分别为其绑定一个函数第二步：获取鼠标移上去的那行，对其设置背景颜色 js代码：

谁借莪１个温暖的怀抱￠/ 2022年05月31日 08:53/ 0 赞/ 270 阅读

相关 js实现高亮显示鼠标所在行

行： <tr id="data_${stat.index}" class="main_trbg" align="center"> Js: / 给数据行绑定

痛定思痛。/ 2022年05月23日 21:18/ 0 赞/ 185 阅读

相关 Eclipse 高亮显示

Eclipce选中一个变量时，所以引用和声明变量的地方都会高亮代码显示，很方便，但有时没这个功能了。。采取如下操作： Toggle Mark Occurrences(Al

Bertha 。/ 2022年05月16日 10:52/ 0 赞/ 300 阅读

相关 C语言打印空心正方形

一道小题目，打印一个空心正方形，头文件只要<stdio.h> include <stdio.h> int main() { i

Myth丶恋晨/ 2022年03月29日 10:48/ 0 赞/ 390 阅读

相关 js实现关键字高亮

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>j

约定不等于承诺〃/ 2021年12月22日 06:11/ 0 赞/ 440 阅读

相关 js实现关键字匹配高亮显示

需求：用户输入文字之后，调用后台接口查询匹配关键字（模糊搜索），并把匹配到的关键字进行高亮显示。实现思路：将拿到的数据进行拆分，例如：用户输入“羽毛球“，接口返回数据...

你的名字/ 2021年01月19日 17:30/ 0 赞/ 1096 阅读