如何使用 HTML、CSS 和 JavaScript 创建线性渐变颜色生成器？

可以使用HTML 、 CSS和JavaScript来制作背景生成器。它将根据您选择的值生成渐变背景。我们将添加两个文件，即style.css和script.js，以将 CSS 和 JS 添加到我们的 HTML (index.html) 中。我们使用了一个空的 h3 标签，以便我们可以显示线性渐变颜色代码。

• HTML 代码：将代码保存为index.html文件。在index.html文件中，我们将使用两个“颜色”类型的输入来获取渐变的值。

  
  
    
  
      
  
    
  
      
  GeeksforGeeks
      
  Gradient color generator
    
      Current Colors for Gradient Background:
    
      
      
      
  
    
  
  

• CSS 代码：对于 CSS，我们只使用一些字体和默认背景色做了一些基本的样式处理。您可以使用以下样式表作为参考，通过更改某些字体和颜色来创建自己的自定义样式。

• JavaScript 代码：现在是 JavaScript 部分。我们所做的第一件事是使用document.querySelector()方法选择了 colour1 和 colour2 节点。使用相同的方法，我们还选择了 h3 和 body。如果您不知道 querySelector 是如何工作的，我们强烈建议您先了解一下。现在我们创建一个函数来将新选择的渐变设置为背景。在这个函数，我们简单地将使用 document.querySelector() 获得的值应用到后台。我们已经使用 css.textcontent 将 linear-gradient 的值分配给 h3 标签。

      var css = document.querySelector("h3");
      var color1 = document.querySelector(".color1");
      var color2 = document.querySelector(".color2");
      var body = document.querySelector(".change");
        
      // Changing color for the gradient
      function changeGradient() {
          body.style.background =
              "linear-gradient(to right, " 
                  + color1.value + ", " 
                  + color2.value + ")";
    
          css.textContent = body.style.background + ";";
      }
    
      color1.addEventListener("input", changeGradient);
    
      color2.addEventListener("input", changeGradient);

完整代码：是avobe三段代码的组合。

  

    Gradient color generator
  
    
        body {
            font: "Roboto";
            text-align: center;
            background: linear-gradient(to right,
                        #0000ff, #add8e6);
        }
      
        h1 {
            color: white;
        }
    

  

    GeeksforGeeks
    Gradient color generator
      
    Current Colors for Gradient Background:
      
    
    
    
  
    
        var css = document.querySelector("h3");
        var color1 = document.querySelector(".color1");
        var color2 = document.querySelector(".color2");
        var body = document.querySelector(".change");
  
        // Changing color for the gradient
        function changeGradient() {
            body.style.background =
                "linear-gradient(to right, " 
                    + color1.value + ", " 
                    + color2.value + ")";
  
            css.textContent = body.style.background + ";";
        }
  
        color1.addEventListener("input", changeGradient);
  
        color2.addEventListener("input", changeGradient);
    

  

输出：