最最简单的七彩霓虹背景实现七彩霓虹背景。我正在参加码上掘金体验活动，详情：show出你的创意代码块一起养成写作习惯！

我正在参加码上掘金体验活动，详情：show出你的创意代码块

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

大家好，我是程序员_随心，希望能够通过自己的学习输出给你带来帮助。

前言

最近官方推送了一条关于码上掘金的消息，我就来了。今天给大家简单的介绍一下我的作品：最最简单的七彩霓虹背景。 code.juejin.cn/pen/7087845…

思路

我们每2秒改变<body></body>标签的背景颜色，并添加一个过渡效果，让它颜色变化的时候不那么楞。

大家都知道background-color属性可以使用标准的RGB立体坐标（RGB cubic-coordinate）系统，即rgb()。其中rgb()接收三个参数，每个参数的值为0~255之间，那么我们的思路是利用Math.random()函数动态生成这三个参数的值。

ok，直接展示代码：

    const body = document.querySelector('body')!;

    function changeColor() {
      let r, g, b;
      r = Math.random() * 256;
      g = Math.random() * 256;
      b = Math.random() * 256;
      return `rgba(${r},${g},${b})`;
    }

    function changeBodyColor() {
      body.style.backgroundColor = changeColor();
      body.style.transition = "background-color 2s";
    }

    changeBodyColor();

    setInterval(() => {
      changeBodyColor();
    }, 2000)

是不是超简单？哈哈哈!

最后

您的每一个点赞及评论都是对我坚持写作最大的支持！ 另外希望各位朋友和我交流讨论，如有不对的地方，更希望批评指正！

我是程序员_随心，希望能够通过自己的学习输出给你带来帮助。