📌  相关文章
📜  使用 HTML CSS 和 JavaScript 设计背景颜色转换器(1)

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

使用 HTML CSS 和 JavaScript 设计背景颜色转换器

本文将向你介绍如何使用 HTML、CSS 和 JavaScript 设计一款简单的背景颜色转换器。

程序员的背景颜色转换器

在这个项目中，我们将创建一个程序员所需的背景颜色转换器。程序员需要一个能够提供不同背景颜色的工具，以便在阅读代码时减轻视觉疲劳。

HTML

首先，我们需要创建一个 HTML 结构。我们将创建一个包含两个输入框和一个按钮的表单。在第一个输入框中，用户将输入当前背景颜色的 HEX 值（例如，#FFFFFF）。在第二个输入框中，用户将输入他们想要转换为的背景颜色的 HEX 值。最后，我们将为按钮添加一个点击事件，以便在用户单击按钮时调用我们的 JavaScript 函数。

<form>
  <label for="current-color">当前背景颜色：</label>
  <input type="text" id="current-color">

  <label for="new-color">新背景颜色：</label>
  <input type="text" id="new-color">

  <button type="submit" id="submit">转换</button>
</form>
CSS

现在，我们需要为我们的表单添加一些 CSS 样式。我们可以使用 flexbox 来排列表单元素，并使用适当的字体和颜色属性来增强可读性。这里只给出一个简单的示例 CSS，你可以自由地根据你的喜好进行更改。

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50px auto;
  font-family: Arial, sans-serif;
}

label, input {
  margin: 10px;
  font-size: 18px;
  color: #333;
}

button {
  font-size: 20px;
  color: #fff;
  background-color: #007bff;
  border: 2px solid #007bff;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

button:hover {
  background-color: #0062cc;
}
JavaScript

现在，我们将使用 JavaScript 根据用户提供的输入转换背景颜色。我们将编写一个称为 convertColor() 的函数，该函数将获取用户输入的值，并将其传递给另一个函数 changeBackgroundColor()。changeBackgroundColor() 函数将接收两个 HEX 值，一个是当前的背景颜色，另一个是要转换为的新背景颜色。它将使用 document.body.style.backgroundColor 来将当前页面的背景颜色更改为新颜色。

function convertColor(event) {
  event.preventDefault();
  const currentColor = document.getElementById('current-color').value;
  const newColor = document.getElementById('new-color').value;
  changeBackgroundColor(currentColor, newColor);
}

function changeBackgroundColor(currentColor, newColor) {
  document.body.style.backgroundColor = newColor;
}

最后，我们需要将点击事件添加到按钮上，并调用 convertColor() 函数。我们可以使用 addEventListener 来添加事件监听器。此外，我们还需要将我们的 JS 代码括在一个标记为 script 的标签内，以便在 HTML 中加载该代码。

<script>
  const submitButton = document.getElementById('submit');
  submitButton.addEventListener('click', convertColor);
</script>

完整代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>程序员的背景颜色转换器</title>
  <style>
    form {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 50px auto;
      font-family: Arial, sans-serif;
    }

    label, input {
      margin: 10px;
      font-size: 18px;
      color: #333;
    }

    button {
      font-size: 20px;
      color: #fff;
      background-color: #007bff;
      border: 2px solid #007bff;
      border-radius: 5px;
      padding: 10px 20px;
      cursor: pointer;
    }

    button:hover {
      background-color: #0062cc;
    }
  </style>
</head>
<body>
  <form>
    <label for="current-color">当前背景颜色：</label>
    <input type="text" id="current-color">

    <label for="new-color">新背景颜色：</label>
    <input type="text" id="new-color">

    <button type="submit" id="submit">转换</button>
  </form>

  <script>
    function convertColor(event) {
      event.preventDefault();
      const currentColor = document.getElementById('current-color').value;
      const newColor = document.getElementById('new-color').value;
      changeBackgroundColor(currentColor, newColor);
    }

    function changeBackgroundColor(currentColor, newColor) {
      document.body.style.backgroundColor = newColor;
    }

    const submitButton = document.getElementById('submit');
    submitButton.addEventListener('click', convertColor);
  </script>
</body>
</html>

现在，我们可以将此代码保存为 HTML 文件，并在浏览器中打开它。我们将看到一个简单的表单来转换页面背景颜色，如下所示：

背景颜色转换器截图

至此，我们已经成功地使用 HTML、CSS 和 JavaScript 设计了一款背景颜色转换器。