如何通过颜色选择器选择背景颜色？

在这个项目中，我们将在拾色器的帮助下更改背景颜色。

项目概况：

方法：

• 创建一个 HTML 文件，我们将在其中添加文本和一个有助于更改网页背景颜色的颜色选择器。
• 创建一个 CSS 样式，为网页元素提供一些动画效果。
• 创建一个 JavaScript 文件，用于添加可以检测鼠标移动的事件侦听器。

例子：

HTML：

• 首先，创建一个 HTML 文件 (index.html)。
• 然后我们将提供所有动画效果的 CSS (style.css) 文件链接到我们的 HTML 页面。这也位于 标记之间。
• 我们添加了来自 Google Fonts 的链接，以便在我们的项目中使用不同类型的字体系列。
• 然后我们必须添加一个输入标签，以便我们可以使用颜色选择器！
• 在 body 标签的末尾，我们必须添加 2 个          

        Choose the color from the selector       to change the bg-color                    

      

---

style.css

/* restoring all the default 
   properties of the browser */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
/* all similar effects of the web page 
   so we applied them to the body */
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
/* css effects for the color picker */
input{
    margin: 2em;
    width: 3em;
    height: 3em;
    border: .4em solid black;
    border-radius: 20%;
    outline: none;
    cursor: pointer;
    box-shadow: 0 0 .5em #111;
}
  
/* for the icon that we have added */
.fas{
    margin: 1em;
}
  
/* hover effects on color picker */
input:hover{
    animation: round 2s infinite;
}
  
/* animation for our color picker */
@keyframes round{
    0%{
        transform: rotate(0deg);
    }
    10%{
        transform: rotate(60deg);
    }
    20%{
        transform: rotate(120deg);
    }
    40%{
        transform: rotate(180deg);
    }
    60%{
        transform: rotate(240deg);
    }
    80%{
        transform: rotate(300deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

index.js

// Selection of id's and classes from html document
const bgclr = document.getElementById("clr");
const headingg = document.querySelector(".head");
  
// Here we are adding event listener which 
// is used to detect the mouse movement
bgclr.addEventListener("input", () => {
  // This updates the background color which is 
  // picked by the user from the picker
  document.body.style.backgroundColor = bgclr.value;
  
  // This is the conditional statement that is used
  // to change the text color from BLACK to WHITE
  // when the background color changes to dark!
  if (
    bgclr.value.includes("00") ||
    bgclr.value.includes("0a") ||
    bgclr.value.includes("0b") ||
    bgclr.value.includes("0c") ||
    bgclr.value.includes("0d") ||
    bgclr.value.includes("0e") ||
    bgclr.value.includes("0f")
  ) {
    headingg.style.color = "#fff";
  } else {
    headingg.style.color = "#000";
  }
});