js使用bind体验随机变色

大海里没有水

已于 2022-03-07 21:35:33 修改

阅读量203

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2022-03-07 21:34:08 首次发布

本文链接：https://blog.youkuaiyun.com/Anna_Liqi/article/details/123340532

版权

本文介绍了一个网页中如何使用JavaScript实现动态颜色切换，通过'tianxuanzhizi.com'示例，展示了如何创建Color对象并为不同元素设置随机背景色。重点在于前端编程技巧和随机颜色选取功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>tianxuanzhizi</h1>
    tianxuanzhizi.com
  </body>
  <script>
    function Color(elem) {
      this.elem = elem;
      this.colors = ["#1abc9c", "#f1c40f", "#8e44ad"];
      // 随机取颜色函数
      this.run = function () {
        setInterval(
          function () {
            console.log(this); //window. 我们可以使用bind, 这样， 就是 colors对象了
            let i = Math.floor(Math.random() * this.colors.length);
            console.log(i);
            // 当然，我们也可以取到传递过来的document.body
            this.elem.style.backgroundColor = this.colors[i];
          }.bind(this),
          1000
        );
      };
    }
    let obj = new Color(document.body);
    obj.run();
    let obj1 = new Color(document.querySelector('h1'));
    obj1.run();
  </script>
</html>

在这里插入图片描述