js实现跑马灯

最新推荐文章于 2024-01-22 19:19:52 发布

stll love

最新推荐文章于 2024-01-22 19:19:52 发布

阅读量1.3k

点赞数

文章标签： javascript java 开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/h220801__zzl/article/details/129287838

版权

文章介绍了如何利用JavaScript的闭包功能，结合给定的颜色和时间数组，实现一个元素背景颜色按照指定时间间隔循环改变的跑马灯效果。代码示例中，定义了一个函数fn，它通过修改div元素的背景色并设置定时器来达到循环播放的效果。

摘要由CSDN通过智能技术生成

要求：按给定数组，实现循环跑马灯

 let arr = [
        { color: "red", time: 2000 },
        { color: "blue", time: 1000 },
        { color: "pink", time: 3000 },
        { color: "green", time: 4000 },
      ];

思路：使用闭包

 let arr = [
        { color: "red", time: 2000 },
        { color: "blue", time: 1000 },
        { color: "pink", time: 3000 },
        { color: "green", time: 4000 },
      ];
      let div = document.querySelector(".light");
      let time1 = null;

      function fn(b) {
        if (b > arr.length-1) {
          b = 0;
        }
        clearTimeout(time1);
        time1 = setTimeout(() => {
          div.style.backgroundColor = arr[b].color;
          return fn(b + 1);
        }, arr[b].time);
      }
      fn(0);

效果图：