怎么用js 中的定时器实现这种效果?

Posted 2023-04-03

大家好 看看这个效果用原生js 怎么实现，貌似是用定时器一秒切换一个class，而且前三个是红色，其余的都是灰色，想请教一下各位这个怎么实现?

定时器循环，逐个处理。事先弄个div，在需要的时候显示出来，设置它显示的位置。你要动手写，不要光问，写写就自然会明朗起来。 参考技术A 如果你是在学习JS，下面是这个效果的实现思路：
首先，css样式部分需要写两个单独的class，一个是设置背景色为红色，一个是设置背景色为灰色。比如：
.red background: red;
.gray background: gray;
这两条样式只设置背景色，用来给定时器切换使用。
然后是Js部分的定时器实现逻辑：
第一步，获取需要切换class的所有标签，假设上面效果中的选项都使用的是a标签，即 var allA = parent.getElementsByTagName('a'); (parent为所有a标签的父级标签，需要提前获取)
第二步，声明一个变量用来当作索引（用来标记第几个要添加背景色）
var index = 0;
第三步，使用循环定时器（setInterval），在定时器中，先清除所有a标签上的className，然后给需要添加背景的a标签添加class，添加的时候判断当前的标签是不是第一个，是就用red背景的class，不是则用gray背景的class。
for () allA[].className = ''
allA[index].className = index == 0 ? 'red' : 'gray';
通过以上三个步骤就可以实现你所说的效果了。
上面的代码是基本思路，有所简化，并不是完整代码，对于初学者应该是可以理解的。

js写导航栏hover效果

js写导航栏hover效果每个js定时器产生时会被系统分配一个id，这个id是正整数，而且一个页面里面的定时器id不重复，我们能用一个变量接收这个id，但是如果重复执行一条接收创建语句，那么你只能接收到最新创建的定时器的id，之前创建的定时器的id会被覆盖，但是定时器数量在增加，这就会导致界面一些功能错乱，解决方法就是在重复按开始按钮时，如果已经有了一个定时器那么就不执行语句，我列出了错误代码和三种解决方法，可以解决定时器重复创建问题。 参考技术A js写导航栏hover效果，首先这个逻辑是：添加一个类名，鼠标移动上的时候就添加这个类名，鼠标不在这个元素上就移除类名，根据这个原理去进行变色的样子