写文章

JavaScript 生成RGB颜色

快乐打工仔 分类：实例代码

分享一段代码实例，它实现了自定义RGB颜色值效果。

通过拖动滑动条即可实现生成，代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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属性一章节。

JavaScript 生成RGB颜色，这样的场景在实际项目中还是用的比较多的，关于JavaScript 生成RGB颜色就介绍到这了。

JavaScript 生成RGB颜色属于前端实例代码，有关更多实例代码大家可以查看。

回复

我来回复

  • 暂无回复内容