Verwenden von CSS3 und JavaScript zum Entwickeln von Beispielcode für die Web-Farbauswahl

<div Klasse="Farbcontainer">
  <div class="main_wrap"> <!--Farbauswahlbereich-->
    <div Klasse="main_drag" id="mainDrag"></div>
    <div Klasse="main_con" id="mainCon">
      <div Klasse="left_white_bg bg"></div>
      <div Klasse="bottom_black_bg bg"></div>
    </div>
  </div>
  <div class="side_wrap"> <!--Farbbereich-->
    <div Klasse="side_drag" id="sideDrag"></div>
    <div Klasse="side_con" id="sideCon"></div>
  </div>
  <div class="show_color" id="findColor"><!--Anzeigebereich-->
    <div Klasse="color_full" id="colorFull"></div>
    <div Klasse="Farbtext" id="Farbtext">
      R:<Eingabetyp="Text" schreibgeschützt>
      G:<Eingabetyp="Text" schreibgeschützt>
      B:<Eingabetyp="Text" schreibgeschützt>
    </div>
  </div>
</div>

.color_container {width:610px;background:#333;padding:10px;font-size:0;margin:30px auto;}
.color_container>div{Anzeige:inline-block;Hintergrund:#fff;vertical-align:top;box-shadow:0px 0px 5px 0px #999;}
.Farbcontainer .main_con{Breite:550px;Höhe:430px;}
.color_container .main_con .bg{position:absolute;oben:0;rechts:0;unten:0;links:0;}

.color_container .side_con{Breite:50px;Höhe:430px;}
.Farbcontainer .Hauptwrap, .Farbcontainer .Seitenwrap{Position:relative;}
.color_container .side_wrap{margin-left:10px;}
.color_container .main_drag,.color_container .side_drag{position:absolut;border:1px solid #fff;hintergrund:rgba(0,0,0,.3);cursor:zeiger;}
.color_container .main_drag{Breite:12px;Höhe:12px;Randradius:50%;z-index:3;links:-7px;oben:-7px;}
.color_container .side_drag{Höhe:6px;Breite:54px;Rahmenradius:2px;links:-3px;oben:-4px;}
.color_container .find_color{Breite:60px;Höhe:60px;Position:absolut;oben:0;links:-70px;Hintergrund:#fff;}
.color_container .show_color{Anzeige:Block;Rand:10px 0 0;Höhe:auto;Padding:10px;}
.color_container .color_full{Anzeige: Inline-Block;Breite: 58px;Höhe: 58px;Rahmen: 1px durchgezogen #ccc;}
.color_container .color_text{Anzeige: Inline-Block;Rand links:30px;Höhe:60px;Zeilenhöhe:60px;Textausrichtung:Mitte;Schriftgröße:14px;Vertikalausrichtung:oben;}
.color_container .color_text Eingabe {Breite: 24px;Rand: 0 15px 0 5px;}

.color_container .side_con{Hintergrund:linearer Farbverlauf(nach unten,Rot 0 %,#ff0 17 %,Hellgrün 33 %,Cyan 50 %,Blau 66 %,#f0f 83 %,Rot 100 %)}

.color_container .main_con{Hintergrund:rot;}

.color_container .main_con .left_white_bg{Hintergrund:linearer Farbverlauf(nach rechts,#fff 0%,transparent 100%)}
.color_container .main_con .bottom_black_bg{Hintergrund:linearer Farbverlauf(nach unten,transparent 0%,#000 100%);}

//Farbreihenspeicherdaten var aColorSeries = {
  r:[255],g:[0],b:[0]
}
//Farbdatenänderungen var aColorVary = ['g','r','b','g','r','b'];
//Farbserienelemente var eSeries = document.getElementById('sideCon');
//Anzahl der Farbwechsel für jedes Farbsystem var nSeriesLen = Math.floor(eSeries.offsetHeight / 6);
//Ändern Sie den Schrittwert jedes Mal var nStep = Math.floor(255 / nSeriesLen);
// Verbleibender Schrittwert value var nStepRemainder = 255 / nSeriesLen - nStep;
//Schleife zum Speichern der RGB-Farbwerte des Farbsystems for(let i=0;i<aColorVary.length;i++){
  let add = (i % 2); //Da die Höhe nicht gleichmäßig aufgeteilt werden kann, muss das endgültige Farbsystem mit Elementen gefüllt werden let nFull = 0; //Berechne den verbleibenden Schrittwert for(let j=0;j<nSeriesLen+add;j++){
    nVoll += nSchrittrest;
    sei nAddStep = nStep;
    if(nFull>1){ //Wenn der verbleibende Schrittwert 1 überschreitet, erhöhe den Schrittwert jedes Mal um 1
      nAddStep = nStep + 1;
      nVoll = nVoll - 1;
    }
    //Durchlaufe das Farbreihendatenobjekt, um Farbwerte hinzuzufügen für (let k in aColorSeries){
      sei nVal = 0;
      let nOldVal = eineFarbserie[k][eineFarbserie[k].length-1];
      wenn(k==aColorVary[i]){
        if(add==0){ //Beurteilen, ob der Farbwert die Richtung ändert, um zuzunehmen oder abzunehmen nVal = nOldVal + nAddStep;
        }anders{
          nVal = nOldVal – nAddStep;
        }
        if(nVal > 255){ //Begrenzung des Maximalwertes auf 255
          nVal = 255;
        }else if(nVal < 0){ //Begrenzung des Minimalwertes auf 0
          nVal = 0;
        }
      }anders{
        nVal = nAlterVal;
      }
      aFarbseries[k].push(nVal);
    }
  }
}

 Code kopieren
 Der Code lautet wie folgt:
 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::

//Farbelementbindung Klickereignis eSeries.addEventListener('click',function(event){
  //Klickposition abrufen let nY = event.offsetY - nSideDragH/2;
  //Übergangsstil hinzufügen, damit der Strohhalm einen Gleiteffekt hat. eSideDrag.style.transition = '.1s';
  //Übergangsstil löschen setTimeout(e=>{
    eSideDrag.style.transition = "erben";
  },100)
  //Position des Farbstrohhalms ändern eSideDrag.style.top = nY + 'px';
  
  //Hintergrundfarbe des Farbauswahlbereichs ändern let n = nY + nSideDragH / 2;
  Farbe = {r:aFarbserie.r[n],g:aFarbserie.g[n],b:aFarbserie.b[n]};
  eMainCon.style.background = `rgb(${color.r},${color.g},${color.b})`;
});

//Farbe des Farbauswahlbereichs var aColorMainStore = [];
//Breite und Höhe des Farbauswahlbereichs abrufen var nMainW = eMainCon.offsetWidth;
var nMainH = eMainCon.offsetHeight;

Funktion fnColorSet(Farbe){
  //Setze die Farbdaten des Farbauswahlbereichs zurück aColorMainStore = [];

  //Die linke Seite kann standardmäßig auf Weiß geändert werden. var oLeftColor = {r:255,g:255,b:255};
  //Die rechte Seite hat eine variable Farbe. Da der Farbparameter ein String ist, muss er in ein Array umgewandelt werden var oRightColor = JSON.parse(JSON.stringify(color));
  //Die untere Farbe ist auf Schwarz festgelegt var oBottomColor = {r:0,g:0,b:0};
  //Da die Farbe des Farbblocks in der oberen linken Ecke beginnt, ist die Standardeinstellung Weiß. var oMainColor = {r:255,g:255,b:255};
  //Schrittwert der Y-Achse var oYStep = {
    lStep: Math.floor(256 / nMainH), //Die linke Seite ändert sich allmählich von oben nach unten von Weiß zu Schwarz, daher wird der feste Schrittwert berechnet lRemainder: 256 / nMainH - Math.floor(256 / nMainH), //Der verbleibende Wert des linken Schrittes lAdd:0, //Zusätzlicher Wert im Gradientenprozess}
  //Zähle den rechten Gradientenschrittwert von unten nach unten auf und addiere ihn, den verbleibenden Wert und den hinzugefügten Wert für (let k in oRightColor){
    oYStep[k+'Schritt'] = Math.floor((oRightColor[k]-oBottomColor[k]+1) / nMainH);
    oYSchritt[k+'Rest'] = (oRechteFarbe[k]-oUntereFarbe[k]+1) / nHauptH - Math.floor((oRechteFarbe[k]-oUntereFarbe[k]+1) / nHauptH);
    oYSchritt[k+'Add'] = 0;
  }

  //Jede Reihe von Farbblöcken in einer Schleife abarbeiten for(let i=0;i<nMainH;i++){
    //Da die Farbe jeder Spalte nach unten hin allmählich dunkler wird, müssen die linken und rechten Farben für jede Zeile außer der ersten Zeile geändert werden if(i>0){
      oYStep.lAdd += oYStep.lRest;
      für (let k in oLeftColor) {
        //Ändere die linke Farbe if(oYStep.lAdd>1){
          oLeftColor[k] = oLeftColor[k] - (oYStep.lStep + 1);
        }anders{
          oLeftColor[k] = oLeftColor[k] - oYStep.lStep;
        }
        //Die richtige Farbe ändern oYStep[k+'Add'] += oYStep[k+'Remainder'];
        wenn(oYSchritt[k+'Hinzufügen']>1){
          oRechteFarbe[k] = oRechteFarbe[k] - (oYSchritt[k+'Schritt'] + 1);
          //Den Additionswert ändern oYStep[k+'Add'] = oYStep[k+'Add'] - 1;
        }anders{
          oRechteFarbe[k] = oRechteFarbe[k] - oYSchritt[k+'Schritt'];
        }
      }
      //Den hinzugefügten Wert ändern if(oYStep.lAdd>1){
        oYStep.lAdd = oYStep.lAdd - 1;
      }
    }
    
    //Die Farbe jeder Reihe von Farbblöcken wird separat in einem neuen Array gespeichert aColorMainStore.push([]);
    //Bei jedem Durchlauf des Farbblocks muss dieser auf die linke Farbe zurückgesetzt werden. oMainColor = JSON.parse(JSON.stringify(oLeftColor));

    //Schrittwert der x-Achse let oXStep = {}
    für (let k in oLeftColor) {
      oXStep[k+'Schritt'] = Math.floor((oLeftColor[k]-oRightColor[k]) / nMainW);
      oXStep[k+'Rest'] = (oLinkeFarbe[k]-oRechteFarbe[k]) / nMainW - Math.floor((oLinkeFarbe[k]-oRechteFarbe[k]) / nMainW);
      oXStep[k+'Add'] = 0;
    }
    
    //Durchlaufe jede Spalte mit Farbblöcken in jeder Zeile for(let j=0;j<nMainW;j++){
      if(j!=0&&j!=nMainW-1){ //Die erste und die letzte Farbe des Farbblocks müssen nicht geändert werden //Farbverlauf von links nach rechts for(let k in oMainColor){
          //Die Farbe schrittweise ändern oXStep[k+'Add'] += oXStep[k+'Remainder'];
          wenn(oXStep[k+'Add']>1){
            oHauptfarbe[k] = oHauptfarbe[k] - (oXStep[k+'Step'] + 1);
            oXStep[k+'Hinzufügen'] = oXStep[k+'Hinzufügen'] - 1;
          }anders{
            oHauptfarbe[k] = oHauptfarbe[k] - oXStep[k+'Schritt'];
          }
        }
      }
      wenn(j==nMainW-1){
        //Die endgültige Farbe wird auf den richtigen Farbwert eingestellt oMainColor = JSON.parse(JSON.stringify(oRightColor));
      }
      
      //Farbblockfarben speichern aColorMainStore[i].push(JSON.stringify(oMainColor));
    }
  }
}

//Die Standard-Hintergrundfarbe ist Rot fnColorSet({r:255,g:0,b:0});

//Den Anzeigefarbblock abrufen var eColorFull = document.getElementById('colorFull');
var eColorText = document.getElementById('colorText');
var aColorInput = eColorText.getElementsByTagName('Eingabe');
Funktion fnColorFull(Farbe){
  //Der Farbparameter ist ein String und muss in ein Array konvertiert werden var color = JSON.parse(color);
  // Anzeigefarbe ändern eColorFull.style.background = 'rgb('+color.join(',')+')';
  //RGB-Farbwert ändern for(let i=0;i<aColorInput.length;i++){
    aColorInput[i].Wert = Farbe[i];
  }
}
//Standardanzeige ist weiß fnColorFull('[255,255,255]');

//Strohelement abrufen var eMainDrag = document.getElementById('mainDrag');
//aMainColorStore-Array-Farbzeilenindex var nSX = 0;
//aMainColorStore-Array-Farbspaltenindex var nSY = 0;
//Höhe des Strohhalms abrufen var nMainDragH = eMainDrag.offsetHeight;
//Holen Sie sich die Strohhalm-Grenzbreite var nMainLimitW = nMainW - nMainDragH / 2;
//Holen Sie sich die maximale Strohhöhe var nMainLimitH = nMainH - nMainDragH / 2;
eMainDrag.addEventListener('Maus gedrückt',Funktion(Ereignis){
  //Klickposition der Maus initialisieren, um mit dem Ziehen zu beginnen var nInitX = event.clientX;
  var nInitY = event.clientY;
  //Strohposition initialisieren var nInitTop = this.offsetTop;
  var nInitLeft = this.offsetLeft;
  //Nachdem Sie den Strohhalm ausgewählt haben, binden Sie das Mausbewegungsereignis an das Dokument. document.onmousemove = event=>{
    //Das Standardverhalten beim Bewegen der Maus abbrechen, um die Auswahl anderer Elemente oder von Text zu vermeiden event.preventDefault();
    //Mausposition abrufen let nX = event.clientX - nInitX + nInitLeft;
    sei nY = event.clientY - nInitY + nInitTop;
    //Die folgenden Bedingungen werden verwendet, um zu verhindern, dass der Strohhalm aus dem Farbauswahlbereich herauswandert, wenn (nY >= nMainLimitH-1) {
      nY = nHauptGrenzeH-1;
    }
    wenn(nY <= -nMainDragH/2){
      nY = -nMainDragH/2;
    }
    wenn(nX <= -nMainDragH/2){
      nX = -nMainDragH/2;
    }
    wenn(nX>=nMainLimitW-1){
      nX = nHauptGrenzeW-1;
    }
    //Da die Pfeilfunktion verwendet wird, zeigt dies immer noch auf den Strohhalm. Ändere die Position des Strohhalms this.style.top = nY + 'px';
    dieser.Stil.links = nX + 'px';
    //Farbzuweisung, da es keine Möglichkeit gibt, die letzte Farbe auszuwählen, fügen Sie daher diese Formel hinzu, sodass einige Farben in der Mitte nicht ausgewählt werden können nSX = nX + nMainDragH/2;
    nSY = nY + nMainDragH/2;
    // Aktuelle Positionsfarbe abrufen let oColor = JSON.parse(aColorMainStore[nSY][nSX]);
    //Den Anzeigefarbbereich füllen fnColorFull(JSON.stringify([oColor.r,oColor.g,oColor.b]));
  }
  //Nach dem Loslassen der Maus das Ereignis im Dokument auslösen document.onmouseup = event=>{
    Dokument.onmouseup = null;
    Dokument.onmousemove = null;
  } 
});
//Farbauswahlbereich, Bindung, Klickereignis eMainCon.addEventListener('click',function(event){
  //Klickposition abrufen let nX = event.offsetX - nMainDragH/2
  sei nY = event.offsetY - nMainDragH/2;
  //Übergangsstil hinzufügen, damit der Strohhalm einen Gleiteffekt hat eMainDrag.style.transition = '.1s';
  //Übergangsstil löschen setTimeout(e=>{
    eMainDrag.style.transition = "erben";
  },100)
  //Position des Farbpflückstrohhalms ändern eMainDrag.style.top = nY + 'px';
  eMainDrag.style.left = nX + 'px';
  //Farbzuweisung, da es keine Möglichkeit gibt, die letzte Farbe auszuwählen, fügen Sie daher diese Formel hinzu, sodass einige Farben in der Mitte nicht ausgewählt werden können nSX = nX + nMainDragH/2;
  nSY = nY + nMainDragH/2;
  // Aktuelle Positionsfarbe abrufen let oColor = JSON.parse(aColorMainStore[nSY][nSX]);
  //Den Anzeigefarbbereich füllen fnColorFull(JSON.stringify([oColor.r,oColor.g,oColor.b]));    
});

//Binde das Mousedown-Ereignis an den Farbstrohhalm eSideDrag.addEventListener('mousedown',function(event){
  /*…*/
  
  //Maus loslassen-Ereignis document.onmouseup = event=>{
    Dokument.onmouseup = null;
    Dokument.onmousemove = null;
    //Farbe des Farbauswahlbereichs festlegen color&&fnColorSet(color);
    // Aktuelle Positionsfarbe abrufen let oColor = JSON.parse(aColorMainStore[nSY][nSX]);
    //Den Anzeigefarbbereich füllen fnColorFull(JSON.stringify([oColor.r,oColor.g,oColor.b]));
  }
});
//Farbelementbindung Klickereignis eSeries.addEventListener('click',function(event){
  //*…*/

  //Übergangsstil löschen setTimeout(e=>{
    eSideDrag.style.transition = "erben";
    //Farbe des Farbauswahlbereichs festlegen color&&fnColorSet(color);
    // Aktuelle Positionsfarbe abrufen let oColor = JSON.parse(aColorMainStore[nSY][nSX]);
    //Den Anzeigefarbbereich füllen fnColorFull(JSON.stringify([oColor.r,oColor.g,oColor.b]));
  },100)
  
  /*…*/
});