JavaScript 生成RGB顏色

antzone發表於2017-04-17
JavaScript

分享一段程式碼例項，它實現了自定義RGB顏色值效果。

通過拖動滑動條即可實現生成，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
main{
  border-radius: 10px;
  background-color: gray;
  overflow: hidden;
  width: 240px;
  padding: 5px;
  margin: 0 auto;
  border: 2px solid #000;
}
.colbox{
  margin-top: 5px;
  width: 238px;
  height: 238px;
  border-radius: 5px;
  border: 1px solid gold;
}
.setbox{
  width: 235px;
  padding-top: 20px;
  padding-left: 5px;
  text-align: center;
}
.txt {
  float: left;
  padding-left: 20px;
  height: 20px;
}
input[type=range]{
  width: 180px;
  display: inline-block;
  margin-top: 10px;
  margin-right: 10px;
  outline-style: none;
}
input[type=text]{
  width: 105px;
  height: 21px;
  text-align: center;
}
input.paste {
  padding-left: 10px;
  margin-top: 10px;
  width: 159px;
  text-align: left;
}
span {
  width: 40px;
  vertical-align: 6px;
  display: inline-block;
  text-align: left;
}
span.prompt {
  width: 100%;
  margin-top: 14px;
  font-size: 12px;
  text-align: center;
}
</style>
<script>
window.onload = function() {
  var coldiv = document.querySelector(".colbox");
  var title = document.querySelector("h2");
  var inps = document.querySelectorAll("input[type=range]");
  var txt = document.querySelector("input[type=text]");
  var copy = document.querySelector("input[type=button]");
  var spans = document.querySelectorAll("span");
  setRgb();
  for (var index = 0; index < inps.length; index++) {
    inps[index].onmousedown = function () {
      document.onmousemove = function() {
        setRgb();
      };
    };
    inps[index].onfocus = function () {
      document.onkeydown = function(e) {
        if (e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40) {
          setRgb();
        }
      }
    }
  }
  copy.onclick = function() {
    txt.select();
    document.execCommand("copy");
  }
 
  function setRgb() {
    var r = inps[0].value;
    var g = inps[1].value;
    var b = inps[2].value;
    spans[0].innerHTML = "r:" + r;
    spans[1].innerHTML = "g:" + g;
    spans[2].innerHTML = "b:" + b;
    coldiv.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
    txt.value = "rgb(" + r + "," + g + "," + b + ")";
    title.style.color = "rgb(" + r + "," + g + "," + b + ")";
  }
  document.onmouseup = function() {
    document.onmousemove = null;
  }
}
</script>
</head>
<body>
<main>
  <h2>自制取色器</h2>
  <div class="colbox"></div>
  <div class="setbox">
    <input type="range" min="0" max="255" value="0" /><span></span>
    <input type="range" min="0" max="255" value="0" /><span></span>
    <input type="range" min="0" max="255" value="0" /><span></span>
    <input type="text">
    <input type="button" value="點選複製" />
    <input type="text" class="paste" placeholder="在此貼上檢視複製內容" />
  </div>
</main>
</body>
</html>

RGB顏色值，由三個0-255數字組成的一個顏色值，比如rgb(160,100,150)。

所以拖動滑動條生一個0-255的數字，然後組合起來即可。

相關閱讀：

（1）.document.querySelector()參閱document.querySelector()一章節。

（2）.onmousedown事件參閱JavaScript mousedown事件一章節。

（3）.onmousemove事件參閱JavaScript mousemove事件一章節。

（4）.onfocus事件參閱JavaScript focus事件一章節。

（5）.onkeydown事件參閱JavaScript keydown事件一章節。

（6）.keyCode參閱JavaScript  event.keyCode屬性一章節。

相關文章