如何使用 JavaScript 根据鼠标位置更改背景颜色？(1)

📌 相关文章

📜 如何使用 JavaScript 根据鼠标位置更改背景颜色？(1)

📅 最后修改于: 2023-12-03 15:23:53.299000 🧑 作者: Mango

如何使用 JavaScript 根据鼠标位置更改背景颜色？

在本文中，我们将探讨如何使用 JavaScript 根据鼠标位置更改背景颜色。

HTML

首先让我们创建一个 HTML 文件，包含一个 <div> 元素和一个引用外部 JavaScript 的 <script> 标签。在这个简单的示例中，我们将通过 CSS 使 <div> 元素撑满整个页面，并为其设置一些基础样式，如背景颜色和边框。

<!DOCTYPE html>
<html>
  <head>
    <style>
      body, html {
        height: 100%;
        margin: 0;
      }

      #container {
        height: 100%;
        background-color: #333;
        border: 1px solid #000;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>

    <script src="script.js"></script>
  </body>
</html>

JavaScript

接下来我们要编写 JavaScript 代码来实现根据鼠标位置更改背景颜色的功能。首先，我们需要获取鼠标位置。在 JavaScript 中，我们可以使用 event.clientX 和 event.clientY 属性来获取鼠标在浏览器窗口的 X 和 Y 坐标。我们将在 <div> 元素上添加 mousemove 事件监听器来实现根据鼠标位置更改背景颜色的功能。

var container = document.getElementById('container');

container.addEventListener('mousemove', function(event) {
  var x = event.clientX;
  var y = event.clientY;

  // 根据鼠标位置更新背景颜色
  var r = Math.round(x / 5);
  var g = Math.round(y / 5);
  var b = 150;

  container.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
});

完整代码

最终的 HTML 和 JavaScript 代码片段如下所示：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body, html {
        height: 100%;
        margin: 0;
      }

      #container {
        height: 100%;
        background-color: #333;
        border: 1px solid #000;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>

    <script>
      var container = document.getElementById('container');

      container.addEventListener('mousemove', function(event) {
        var x = event.clientX;
        var y = event.clientY;

        // 根据鼠标位置更新背景颜色
        var r = Math.round(x / 5);
        var g = Math.round(y / 5);
        var b = 150;

        container.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
      });
    </script>
  </body>
</html>

这将使您的 <div> 元素随着鼠标的移动而动态更改背景颜色。