郭欣玫的沙龍

RGB to HEX

郭欣玫
郭欣玫
閱讀時間約 8 分鐘

如果製作一個RGB色碼轉換器，算是考驗操作DOM!
那把它分成三個目標來依序完成，

  1. 抓slider的數字，存放在每個滑塊右邊的格子
  • 透過 slider.addEventListener("input", function (event) {...}) 監聽滑塊變動事件。
  • 當事件被觸發時，取得事件目標元素，就是滑塊 let target = event.target
  • 獲得滑塊的當前值 let inputValue = target.value
  • 找到與該滑塊相鄰的 span 元素 let valueBox = target.nextElementSibling
  • 將滑塊的值顯示在相鄰的 span 元素中 valueBox.textContent = inputValue


  1. 再slider的數字轉換成十六進位並顯示於下面的格子
  • 根據滑塊的 ID#rgb-r、#rgb-g、#rgb-b，確定是哪個滑塊的值被改變。
  • 將該滑塊的數值轉換成十六進位。若數值小於 16，則在前面補 0 以確保每個數值都是兩位數 hex[0] = "0" + Number(target.value).toString(16) 或 hex[0] = Number(target.value).toString(16) 等
  • 更新對應的十六進位數值陣列 hex 中的值。
  • 組合成完整的十六進位色碼字串 newHexCode = "#" + hex[0] + hex[1] + hex[2]
  • 將十六進位色碼顯示在頁面下方的大格子中 hexCode.textContent = newHexCode


3. background-color會監聽格子裡的RGB色碼而改變


  • 在更新 HEX 色碼字串後，將色碼設置為頁面的背景顏色 document.body.style.backgroundColor = hexCode.textContent


以下示範請看~~


raw-image


<body>
  <div class="slider">
    <h1> RGB to HEX </h1>
    <div>
      <span class="red"> R </span>
      <input type="range" id="rgb-r" name="rgb-r" min="0" max="255" value="0">
      <span class="red" id="red"> 0 </span>
    </div>

    <div>
      <span class="green">G</span>
      <input type="range" id="rgb-g" name="rgb-g" min="0" max="255" value="0">
      <span class="green" id="green"> 0 </span>
    </div>

    <div>
      <span class="blue">B</span>
      <input type="range" id="rgb-b" name="rgb-b" min="0" max="255" value="0">
      <span class="blue" id="blue"> 0 </span>
    </div>

    <div>
      <h1 class="hexCode">#000000</h1>
    </div>
  </div>

  <body>


body {
  font-family: "Roboto", sans-serif;
  background-color: black;
  font-weight: bold;
}

nav {
  padding-top: 10px;
  font-size: 20px;
}

.slider {
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.red {
  border-radius: 20%;
  padding: 10px;
  background-color: red;
}

.green {
  padding: 10px;
  background-color: green;
  border-radius: 20%;
}

.blue {
  padding: 10px;
  background-color: blue;
  border-radius: 20%;
}

h1 {
  color: #ffffff;
  background-color: rgba(210, 155, 155, 0.5);
  border: 2px solid #000000;
  border-radius: 8px;
  margin: 10px 10px;
  padding: 5px 30px;
}


const slider = document.querySelector(".slider");
const hexCode = document.querySelector(".hexCode");
let newHexCode = "";
let hex = ["00", "00", "00"];

slider.addEventListener("input", function (event) {
  let target = event.target;
  let inputValue = target.value;
  let valueBox = target.nextElementSibling; // 滑塊後的 span
  valueBox.textContent = inputValue;
  if (target.matches("#rgb-r")) {
    if (target.value < 16) {
      hex[0] = "0" + Number(target.value).toString(16);
    } else {
      hex[0] = Number(target.value).toString(16);
    }
  } else if (target.matches("#rgb-g")) {
    if (target.value < 16) {
      hex[1] = "0" + Number(target.value).toString(16);
    } else {
      hex[1] = Number(target.value).toString(16);
    }
  } else {
    if (target.value < 16) {
      hex[2] = "0" + Number(target.value).toString(16);
    } else {
      hex[2] = Number(target.value).toString(16);
    }
  }
  newHexCode = "#" + hex[0] + hex[1] + hex[2];
  hexCode.textContent = newHexCode;
  document.body.style.backgroundColor = hexCode.textContent;
});




    郭欣玫的沙龍
    2會員
    13內容數
    留言0
    查看全部
    發表第一個留言支持創作者！
    郭欣玫的沙龍 的其他內容
    CSS-position
    閱讀時間約 3 分鐘
    CSS - margin、padding
    閱讀時間約 1 分鐘
    父子組件資料傳遞 props、emit
    閱讀時間約 5 分鐘
    Vue-依賴注入 provide & inject
    閱讀時間約 2 分鐘
    CSS 元素置中
    閱讀時間約 3 分鐘
    你可能也想看
    你了解色彩嗎？介紹Pantone、RGB、CMYK與AI應用工具色彩在設計和藝術中扮演著重要的角色，它們影響著我們的情緒和感知。在設計領域中，有幾種常見的色彩系統，包括Pantone、RGB和CMYK等。而隨著AI技術的發展，許多AI工具如Colormind和Khroma等應用AI來生成吸引人的色彩組合，為設計師帶來了更多可能性和便利。讓我們一同深入了解這些色彩
    Thumbnail
    avatar
    捷可印
    2023-09-12
    #設計#設計師#產業
    #26 電競必備RGB落地燈!RGB燈就不必多說了，就是潮!哈哈，不過這次只買小隻的，40公分的，不是80公分那種半身的，因為這樣比較有擺放的彈性! 為了我未來的電腦鋪路，(其實是因為買不起電腦先買這些快樂小東西哈哈) 而且呢這款落地燈同時也支援語音控制。
    Thumbnail
    avatar
    JoKi
    2023-09-10
    #22 RGB燈條的浪漫自從買了燈條，就有一種上癮的感覺，可以回顧一下這篇~，這次在3C賣場看到了很便宜的一條，想到可以給書房增加一點樂趣，到時候把桌機放上去後到處都會是RGB閃亮亮的哈哈。
    Thumbnail
    avatar
    JoKi
    2023-08-06
    #燈條#RGB#RGB燈條
    只要$199的SteelSeries RGB 電競滑鼠https://shope.ee/7KN8nhuEAC 這真的好便宜 只要$199就可以馬有RGB燈閃阿閃的電競滑鼠 原廠公司貨保固一年 RIVAL 105 採用電競級光學感應器，讓滑鼠的移動可以更精準。 滑鼠搭配Prism RPG功能，提供1680萬的燈光效果顏色隨你選擇。 微動開關，2000萬次
    Thumbnail
    avatar
    蝦皮盒子好物推薦
    2022-11-22
    #電競#滑鼠#RGB
    色彩學｜什麼是RGB色彩模式常常聽到的RGB色彩，是什麼呢？這篇超簡單說明給你~
    Thumbnail
    avatar
    Anita 裴恩
    2022-11-03
    #色彩模式#色彩知識#鳴之數位講堂
    陸續推出新指標RGB紅綠燈&產業指標 Red Alert XS雷達指標輔助程式均由Red Alert經驗使用XS撰寫演算回測而成，XS雷達指標程式相關準確性可靠性或有資訊延誤之情形，Red Alert亦不做任何保證或承擔，相關資訊還需依TWSE台灣證卷交易所及各大卷商資訊為主，Red Alert XS雷達指標輔助程式無任何影響個股股價之
    Thumbnail
    avatar
    Red Alert
    2022-10-30
    #指標#雷達#當沖
    death and the compass ending - what is the meaning of RGB Co
    avatar
    shirlie
    2022-05-07
    To：正在拉拔孩子長大的爸媽時光飛逝，才一晃眼，一個孩子就長大成人！有時不免思索：生命真奇妙。但，拉拔一個孩子長成，可從來都不是一件很容易的事！有了孩子之後，你或許會有著媽媽的味道、爸爸的模樣，但這些都不會阻礙你繼續自我成長，因為新世代的你，絕不會只將養大孩子，視為生活裡的唯一目標，或只想當個「以孩子的成就為成就」的父母。
    Thumbnail
    avatar
    陳之華
    2022-04-22
    白光Micro OLED與RGB Micro OLED之技術爭霸戰※本專欄之文章僅供參考之用，並不構成要約、招攬或邀請、誘使、任何不論種類或形式之申述或訂立任何建議及推薦，請讀者運用個人獨立思考能力，自行作出投資決定，如因相關建議招致損失，概與《麥斯產業前瞻分析》及作者無涉。
    Thumbnail
    avatar
    Maxwell 陳世芳
    2022-03-18
    #公司研究#投資趨勢#創業創新
    RGB to Hex color tablesomething about RGB
    Thumbnail
    avatar
    Jackie Lin
    2021-01-05
    #程式設計