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颜色属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容