JavaScript 및 HTML이 포함된 그라데이션 색상 생성기

이 문서에서 JavaScript를 사용하여 그라데이션 색상 생성기를 만드는 방법을 보여 드리겠습니다.일찍이, 나는 당신들과 어떻게 더 많은 종류의 무작위 색 생성기를 만드는지 공유했다.단, 이 항목에서는 선택한 색을 수동으로 만들 수 있습니다.
Watch its live demo 그것의 작업 원리를 이해한다.HTML 색상을 사용하여 선택 색상을 입력하는 방법은 다음과 같습니다.이것은 점차적인 색을 만들기 위해 선택한 색을 선택하고 다른 각도와 결합시킬 수 있도록 합니다.
그라데이션을 수동으로 작성할 수 있습니다.하지만 이 프로젝트는 완벽한 색깔을 만드는 데 도움을 줄 것이다.기본 HTML, CSS, 자바스크립트를 알아야 합니다.여기서, 나는 완전한 단계 강좌와 필요한 원본 코드를 제시했다.
우선 나는 상자를 하나 만들었는데, 상자 안에 작은 모니터가 하나 있다.색상은 디스플레이에서 볼 수 있습니다.그리고 색 코드를 찾을 수 있는 상자입니다.HTML 도움말 아래에 두 개의 색상 입력 상자가 만들어졌습니다.각도를 선택할 선택 상자가 생성되었습니다.

그래디언트 색상 생성기의 HTML 코드

다음 코드는 이 그래디언트 색상 생성기를 만드는 데 필요한 HTML 코드입니다.다음은 분해된 모든 코드를 보여 드리겠습니다.하지만 모든 코드를 동시에 얻으려면 이 링크download source code를 통해 도움을 받을 수 있습니다.
기본 구조
다음 HTML 코드는 기본 구조를 만드는 데 도움이 됩니다.

<div class="random-color">

</div>

컬러 디스플레이
다음 코드를 사용하여 디스플레이를 만들었습니다.이 모니터에서 점차적인 색을 볼 수 있다.

<!-- color Display -->
<div class="display" id="gradient"></div>

컬러 카트리지
현재 나는 색 코드를 볼 수 있는 상자를 만들었다.

<!-- color code box -->
<div class="codess"></div>

색상 입력
현재 나는 이미 색 입력 상자를 만들었다.html에서 우리는 많은 유형의 입력을 얻는다.여기서 색상은 입력입니다.

<!-- color input -->
<input type="color" class="color1" name="color1" value="#FFAAAA">
<input type="color" class="color2" name="color2" value="#734C8F">

HTML 선택 상자
현재 나는 서로 다른 각도를 가진 선택 상자를 만들었다.따라서 선택한 각도를 선택하고 두 가지 색상을 추가할 수 있습니다.

<!-- select box -->
<select name="toDirection">
  <option value="to right">to right</option>
  <option value="to left bottom">to left bottom</option>
  <option value="to left top">to left top</option>
  <option value="to bottom">to bottom</option>
  <option value="to top">to top</option>
  <option value="to right bottom">to right bottom</option>
  <option value="to right top">to right top</option>
  <option value="to left">to left</option>
</select>

그래디언트 색상 생성기의 CSS 코드

우리는 이미 위의 HTML 코드를 사용했지만, 지금은 CSS 코드로 HTML을 설계할 때가 되었다.
다음 CSS 코드를 사용하여 웹 페이지를 디자인합니다.

html {
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat:no-repeat;
}

body {
  color: #035aab;
  text-align: center;
}

나는 아래의 css로 이 상자를 설계했다.상자 너비: 350px, 높이: 400px.나는 여기에 어떤 배경색도 사용하지 않았기 때문에 테두리 그림자를 추가했다.

.random-color{
  width: 350px;
  box-shadow: 0 0 20px rgba(0,139,253,0.25);
  margin: 50px auto;
  padding: 20px; 
  height: 400px;
}

지금 나는 이미 모니터를 설계했다.모니터width: 350px 및 height: 200px.여기에 사용된 배경 그라데이션은 정상적인 상황에서 볼 수 있다.입력 함수의 값을 변경하면 이 색상이 변경됩니다.

.display{
  width: 350px;
  height: 200px;
  border: 2px solid white;
  box-shadow: 0 0 20px rgba(1,1,1,0.35);
  background: linear-gradient(to right, #FFAAAA, #734C8F)
}

현재 이 상자는 색깔 코드를 볼 수 있도록 설계되었다.그것은 내부 용량에 따라 자신의 크기를 확정할 것이다.

.codess{
  padding: 5px;
  margin-top: 30px;
  margin-bottom: 30px;
  font-family: sans-serif;
  letter-spacing: 1px;
  box-shadow: 0 0 20px rgba(0,139,253,0.25);
}

현재 색상 입력 공간이 이미 설계되었다.이 두 입력 상자의 너비: 70px, 높이: 40px, float: left 는 왼쪽을 유지하는 데 사용됩니다.

.color1,.color2{
  width: 70px;
  height: 40px;
  float: left;
  margin: 10px;
  margin-top: 20px;
}

현재 나는 이미 선택 상자의 몇 가지 기본 설계를 완성했다.상자width: 130px와 height: 35px.

select{
 float: right;
 margin-top: 25px;
 width: 130px;
 height: 35px;
}

JavaScript를 사용하여 색상 구성기 활성화

이상에서 우리는 이미 점변 색 발생기의 기본 설계를 완성하였다.하지만 이제는 자바스크립트의 도움으로 이 색 생성기를 실현할 때가 됐다.
먼저 일부 ID 및 클래스 함수의 글로벌 상수를 결정합니다.

//Some classes and html functions need to determine a constant
var css = document.querySelector(".codess") // color code
var color1 = document.querySelector(".color1") // 1st color
var color2 = document.querySelector(".color2") // 2nd color
var bodys = document.getElementById("gradient") // color display
var linearDirection = document.getElementsByName("toDirection")[0]  //Select box

현재 나는 이미 모니터에 색 코드를 표시하도록 안배했다.디스플레이에서 볼 수 있는 색은 코드 상자에서 CSS 코드로 볼 수 있다고 지적합니다.GetPropertyValue 이 일을 완성하는 데 도움을 주었다.getPropertyValue() 메소드 인터페이스는 지정된 CSS 속성 값을 포함하는 DOMstring을 반환합니다.
그리고 나는 textContent의 도움으로 상자 안의 모든 정보를 보여 주었다.

function currentSettings() {
    var CSSprop = window.getComputedStyle(bodys,null).getPropertyValue("background-image")
   // console.log(CSSprop)
    css.textContent = CSSprop
}

currentSettings()

나는 이미 이 코드 상자에서 볼 수 있는 색 코드의 형식 설명을 제시했다.이런 형식에 따라 상자에서 색 코드를 볼 수 있다.
이것만 있으면 나는 모니터의 색깔을 볼 수 있다."bodys.style.background"에 모든 형식을 추가했습니다.그것의 색깔은 모니터에서 찾을 수 있다.이것은 그것이 두 가지 일을 동시에 할 것이라는 것을 의미한다.
이 형식에서 값은​​이들 요소 중 하나는 모두 추가됩니다.따라서 입력 값을 변경할 때 코드 상자의 정보는 계속 변경됩니다.

 function returnColor(){

  bodys.style.background =
    "linear-gradient("
    + linearDirection.value
    + ", "
    + color1.value
    + ","
    + color2.value
    + ")";

    currentSettings()

}

지금 나는 이미 모든 입력 함수와 위의 계산을 연결시켰다."ReturnColor" 도움이 됩니다.따라서 입력란을 변경하면 위의 모든 시스템이 변경됩니다.

document.querySelector('select[name="toDirection"]').onchange=returnColor;
color1.addEventListener("input", returnColor)
color2.addEventListener("input", returnColor)

전체 JavaScript
다음은 전체 JavaScript입니다. 이 코드를 더 잘 이해할 수 있도록 도와줍니다.

//Some classes and html functions need to determine a constant
var css = document.querySelector(".codess") // color code
var color1 = document.querySelector(".color1") // 1st color
var color2 = document.querySelector(".color2") // 2nd color
var bodys = document.getElementById("gradient") // color display
var linearDirection = document.getElementsByName("toDirection")[0]  //Select box



function currentSettings() {
    var CSSprop = window.getComputedStyle(bodys,null).getPropertyValue("background-image")
   // console.log(CSSprop)
    css.textContent = CSSprop
}

currentSettings()


 function returnColor(){

  bodys.style.background =
    "linear-gradient("
    + linearDirection.value
    + ", "
    + color1.value
    + ","
    + color2.value
    + ")";

    currentSettings()

}


document.querySelector('select[name="toDirection"]').onchange=returnColor;
color1.addEventListener("input", returnColor)
color2.addEventListener("input", returnColor)

위의 JavaScript를 이해해 주시기 바랍니다.만약 어떤 문제가 있다면, 너는 동영상 강좌를 빌릴 수 있다.
만약 당신이 이 강좌를 좋아한다면, 당신은 must like the article.당신의 취향을 평론해 주세요.필요한 경우 다운로드complete source code할 수 있습니다.
너는 나의 블로그를 방문해서 더 많은 유사한 강좌를 얻을 수 있다.😊
https://www.foolishdeveloper.com/