从白天到夜晚——用 JavaScript 创建交互式调色板

现在您已经用 HTML 和 CSS 完成了迷你城市的设置，您是否想过迷你城市在夜晚会是什么样子？让我们用 JavaScript 添加按钮，实现从白天到夜晚的调色板变化！JavaScript 是一种编程语言，用于创建交互式设计，例如按钮、弹出窗口等，并为 Web 开发项目带来用户交互。

在本教程中，您将学习如何执行以下操作：

使用 HTML 创建按钮
使用 CSS 对元素进行样式化
使用 JavaScript 添加交互性

在 HTML 和 CSS 中设置元素

HTML 代码

在我们开始使用 JavaScript 将交互性融入我们的迷你城市之前，我们首先需要通过添加到我们的 HTML 代码来设置这些元素。

为了从日间调色板切换到夜间调色板，我们将创建两个可点击的按钮，分别标记为“白天”和“夜晚”，以便我们选择所需的设置。为此，我们将为元素<button></button>中的每个按钮添加一组标签body：

...
<!--HTML-->
  <body>
    <button>day</button>
    <button>night</button>
...

为了准备我们计划的颜色变化，我们需要id为所涉及的每个元素分配一个属性，这允许这些元素在 CSS 中进行样式化并在 JavaScript 中进行操作。

为了为我们的迷你城市创建一个可以变月亮的太阳，我们将添加一个名为“sun”<div>的元素id。要改变天空的颜色，我们必须访问background-color该body元素的属性，因此我们将设置一个id名为“body”的元素。向该元素添加以下代码body：

...
<!--HTML-->
  <body>
    ....
    <div id = "sun"></div>   
    <body id = "body"></body>   
...

我们对 HTML 代码添加完毕后的样子如下：

...
<!--HTML-->
  <body>
    <button>day</button>
    <button>night</button>

    <div id = "sun"></div>   
    <body id = "body"></body>   
...

到目前为止，我们的迷你城市应该是这样的：

CSS 代码：太阳和月亮元素

现在我们已经在 HTML 中设置了元素，我们可以开始在 CSS 中调整和设置它们的样式。

对于我们的太阳元素，我们将#id在 CSS 代码中添加一个选择器：

...
<style TYPE="text/css">
    ...
    #sun {

    }
</style>
...

这种选择器访问id在标签后列出的元素，因此我们在此选择器中添加的任何内容都会影响sun我们在 HTML 代码中声明的元素。

对于我们的#sun选择器，我们将首先使用以下属性创建太阳的形状和颜色：

...
#sun {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background: radial-gradient(#FFF89E, #FFDE45);
}
...

由于我们的width和height属性长度相同，因此默认创建的形状是正方形。border-radius属性定义了太阳角的半径，将此属性设置为 50% 将创建一个完美的圆形。然后，在background属性中，我们可以使用该函数来确定太阳的颜色radial-gradient，该函数会创建颜色的渐变过渡——第一个声明的颜色（浅柔和的黄色）将是太阳中心的颜色，第二个颜色（更明亮的暖黄色）将是太阳边缘的颜色。

然后，我们将通过添加以下属性来确定太阳的位置：

...
#sun {
    ...
    position: absolute;
    left: 350px;
    bottom: 75px;
}
...

与迷你城市中的其他元素类似，我们将声明absolute太阳position属性的值，该值允许元素随网页文档主体一起移动。该left属性通过将太阳推向侧面来影响元素的水平位置，而bottom属性通过将太阳向上抬起来影响元素的垂直位置。

我们的迷你城市中的太阳应该是这样的：

为了准备从白天到夜晚的变化，我们还可以使用与元素相同的代码模板来创建月亮元素sun：

...
#sun {
    ...
}

#moon {
    position: absolute;
    left: 350px;
    bottom: 75px;
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background: radial-gradient(#D3D3D3, #555AA6);
}
...

对于我们的月亮，我们将使用一个新的选择器标签#moon并改变功能中的颜色radial-gradient- 我们月亮中心的颜色将是浅冷灰色，边缘的颜色将是深灰紫色。

此时，我们还无法查看 moon 元素，因为我们还没有<div>在 HTML 代码中为它声明一个元素。我们不需要声明它，因为我们只需要在这两个选择器之间来回切换，稍后我们会用 JavaScript 来实现。

这就是我们完成的#sun元素#moon应该的样子：

...
#sun {
    position: absolute;
    left: 350px;
    bottom: 75px;
    background: radial-gradient(#FFF89E, #FFDE45);
    width: 115px;
    height: 115px;
    border-radius: 50%;
}

#moon {
    position: absolute;
    left: 350px;
    bottom: 75px;
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background: radial-gradient(#D3D3D3, #555AA6);
}
...

CSS 代码：白天和夜晚按钮

为了开始设计按钮的属性，我们将button在代码中添加一个选择器：

...
<style TYPE="text/css">
    ...
    button {

    }
</style>
...

此选择器访问<button>HTML 代码中声明的所有元素，即我们的day和night按钮。

首先，我们将使用以下属性调整按钮的颜色和位置：

...
button {
    position: relative;
    top: -40px;
    right: -360px;
    background-color: #FFFFFF;
}
...

通过将position属性设置为relative，我们可以调整按钮的“正常”位置（即网页中心），使用top和right属性——我们输入的值将按钮移动到太阳下方的区域。我们还将使用background-color属性将按钮的颜色设置为白色。

然后，我们通过添加以下属性为按钮添加边框：

...
button {
    ...
    border-style: solid;
    border-width: 2px;
    border-color: #FF8080;
    border-radius: 10px;
}
...

要显示所有边框属性，border-style必须先设置属性。上面，我们将按钮的边框设置为，solid这样会生成纯色边框。您可以随意尝试此CSS 边框样式列表中不同类型的边框。至于其他边框属性，border-width分别border-color调整边框的粗细和颜色，以及border-radius调整边框角的圆度——此特定属性最多允许四个值，每个值分别访问元素的每个角。

最后，我们将使用以下最后两个属性更改按钮文本的字体：

...
button {
    ...
    font-size: 15px;
    font-family: "Consolas";
}
...

该font-size属性将调整按钮字体的大小。此外，您还可以通过测试此CSS 字体列表中的字体并将其设置为您的font-family属性来自定义按钮字体。您还可以添加其他属性，例如font-style和font-weight，以进一步提升按钮的风格。

我们的完成的button元素应该是这样的：

...
button {
    position: relative;
    top: -40px;
    right: -360px;
    background-color: #FFFFFF;

    border-style: solid;
    border-width: 2px;
    border-color: #FF8080;
    border-radius: 10px;

    font-size: 15px;
    font-family: "Consolas";
}
...

到目前为止，我们的迷你城市应该是这样的：

使用 JavaScript 添加交互性

JavaScript 代码

为了能够在我们的 HTML 文件中使用 JavaScript 编写代码，我们将在 HTML 代码的元素<script></script>中插入一组标签body，位于我们上面添加的代码下方：

...
<!--HTML-->
  <body>
      <button>day</button>
      <button>night</button>

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

      <script>
      </script>
...

如果我们想要操纵太阳/月亮元素和背景的颜色，我们必须分别通过调用它们的来检索我们的sun和元素。bodyid

为此，我们将为元素和元素声明一个或变量，var然后使用该方法访问每个元素：circlesunskybodydocumentgetElementById()

...
<script>
    var circle = document.getElementById("sun");
    var sky = document.getElementById("body");
</script>
...

由于我们已经确定了moon计划的调色板变化的元素，我们还应该选择我们想要的夜空的颜色。

为此，我们将创建一个名为的数组colors，其中包含白天天空和夜晚天空的颜色：

...
<script>
    var circle = document.getElementById("sun");
    var sky = document.getElementById("body");
    var colors = ["#D5F3FE","#343F8A"];
</script>
...

数组中的第一个颜色是我们默认的白天颜色，即我们当前设置的浅蓝色，第二个颜色是我们的夜间调色板，即深冷蓝色。

现在，为了设置我们的白天和夜晚的调色板，我们将设置两个标记为day和的功能night：

...
<script>
    ...
    function day() {

      }
    function night() {

      }
</script>
...

对于每个功能，我们需要建立两个变化：一个用于太阳到月亮的转换，另一个用于白天到夜晚的颜色变化。

为了在白天显示太阳，在夜晚显示月亮，我们将使用变量上的方法来从#sun和元素中获取信息。对于两个必需参数，我们将此变量的设置为和元素，分别用于白天和夜晚的调色板：#moonsetAttribute()circleidsunmoon

...
function day() {
    circle.setAttribute("id", "sun");
}
function night() {
    circle.setAttribute("id", "moon");
}
...

为了设置白天和夜晚的天空颜色，我们将通过附加变量访问元素backgroundColor的属性，以检索和操作此变量的 CSS 属性。然后，我们将其设置为数组中白天和夜晚调色板的相应颜色（数组的索引始终从数字开始，因此表示白天颜色，表示夜晚颜色）：bodysky.style.backgroundColorcolors0colors[0]colors[1]

...
function day() {
    circle.setAttribute("id", "sun");
    sky.style.backgroundColor = colors[0];
}
function night() {
    circle.setAttribute("id", "moon");
    sky.style.backgroundColor = colors[1];
}
...

完成的 JavaScript 代码应如下所示：

...
<script>
    var circle = document.getElementById("sun");
    var sky = document.getElementById("body");
    var colors = ["#D5F3FE","#343F8A"];

    function day() {
        circle.setAttribute("id", "sun");
        sky.style.backgroundColor = colors[0];
      }
      function night() {
        circle.setAttribute("id", "moon");
        sky.style.backgroundColor = colors[1];
      }
</script>
...

为了将所有内容联系在一起，我们需要回到 HTML 代码，通过向每个按钮添加事件，将我们的day()和night()函数分别链接到我们的day和按钮：nightonclick

...
<!--HTML-->
  <body>
    <button onclick = "day()">day</button>
    <button onclick = "night()">night</button>
...

现在，您可以通过单击按钮更改一天的时间来与您的迷你城市进行互动：

结论

恭喜您为您的迷你城市添加了交互式色彩组件！

在本教程中，我们用 JavaScript 设计了按钮，并学习了如何在 HTML 和 CSS 中对这些元素进行样式化和链接。

您可以随意为按钮添加更多装饰功能，或在白天和夜晚功能下实现更多操作，从而在一天中的时间变化之间创建更清晰的切换。虽然本博客系列可能只是对这些编程工具的简单介绍，但希望这个项目能够激发您的兴趣并/或增强您对 Web 开发和设计的信心。

文章来源：https://dev.to/bitproject/from-day-to-night-creating-interactive-color-palettes-with-javascript-o3b