preface

We’re using some bit operations here, if you don’t know bit operations, bit operations

Hex (hexadecimal) : #FFF,# FFFFFF, etc hexadecimal colors

RGB: RGB (255,255,255), RGB (123,125,241), etc

The author encountered color conversion for the first time, meng, no ideas, harm, thinking of putting behind to see again, the results put put, oh clear, once again encountered it, alas, it was caught.

This problem, must be suppressed, not suppressed not good ah, code code looking at the problem, the result it came. Ha ha ha ha

Because I want to type hex or RGB and convert, I want to write an input field to get the color before and after the conversion.

design

  • The background color of test1 and test2 is determined by the input color and the converted color
  • I need an input field inChange for me to type in
  • Submit button colorBtn submit my input color

An HTML fragment:

<div class="box"> <div class="test1"> Input color </div> <div class="test2"> Convert color </div> </div> <div class="boxin"> <input Class ="inChange" type="text"> <button class="colorBtn"> </button> </div>Copy the code

CSS:

    * {
        padding: 0;
        margin: 0;
    }

    .box {
        display: flex;
        justify-content: center;
    }

    .test1,
    .test2 {
        width: 200px;
        height: 100px;
        text-align: center;
        border: 1px solid red;
        margin: 10px 20px;
    }

    .boxin {
        width: 100%;
        text-align: center;
    }
Copy the code

Js here I put the implementation of the conversion of the core code in the following comments to the segmentation, easy to copy

Note:

  • Hexadecimal takes up 4 bits per character, exceeding 32 bits overflow.
  • Hex has six hexadecimal characters of 24 bits.

js

/ / hex convert RGB function hexToRgb (hex) {/ / used to judge the hex format right let regExp = / ^ # ([0-9 a - F] {3} | [0-9 a - F] {6}) $/ I; // check whether the hex format is correct. regExp.test(hex)) { return false; } //-----hex = hex. Substr (1,); If (str.length == 3) {let tempStr = ""; if (STR. Length == 3) {let tempStr = ""; for (let i = 0; i < 3; i++) { tempStr += str[i] + str[i]; } str = tempStr; } // hexadecimal STR = "0x" + STR; // Each hexadecimal character is 4 bytes, 16/4=4, corresponding to (example: 0xAF54ff)af let r = STR >> 16; Let g = STR >> 8&0xff; // let b = STR & 0xff; let rgb = `rgb(${r}, ${g}, ${b})`; Document. querySelector(".test1").style.backgroundColor = hex; document.querySelector(".test1").innerHTML = hex; document.querySelector(".test2").style.backgroundColor = rgb; document.querySelector(".test2").innerHTML = rgb; } function rgbToHex(RGB) {// rgbToHex(RGB) {// rgbToHex(RGB) { Hey hey hey) let regExp = / ^ RGB (\ s * ((1 \ d {2} | 2 (5 [0 to 5] | \ [0-4] d)) | \ d {1, 2}) \ s * \ s * ((1 \ d {2} | 2 (5 [0 to 5] | \ [0-4] d)) | \ d {1, 2}) \ s * \ s * ((1 \ d {2} | 2 (5 [0 to 5] | 0 to 4 \ d )) | \ d {1, 2}) \ s *) $/ I; // check whether RGB format is correct if (! regExp.test(rgb)) { return false; } / / -- -- -- -- - / / RGB to convert hex core code for RGB digital let arr = RGB. The split (", "); let r = + arr[0].split("(")[1]; let g = + arr[1]; let b = + arr[2].split(")")[0]; Let value = (1 << 24) + (r << 16) + (g << 8) + b; // There are only 24 bits, but there are 25 bits, and there is an extra 1 after the hexadecimal number. let hex = "#" + value.toString(16).slice(1); Document.queryselector (".test1").style.backgroundcolor = RGB; document.querySelector(".test1").innerHTML = rgb; document.querySelector(".test2").style.backgroundColor = hex; document.querySelector(".test2").innerHTML = hex; } function hexOrRgb() {let val = document.querySelector(".inchange ").value; / / call, not execute the next hexToRgb (val) | | rgbToHex (val). } function init() {let BTN = document.querySelector(".colorbtn "); btn.addEventListener("click", () => { hexOrRgb(); }); } // entry init();Copy the code

conclusion

Demo address

Hope friends in the written test to meet this kind of question, minutes to pick ~