html取色器原理,前端开发自制取色器

最新推荐文章于 2024-12-10 16:53:08 发布

荔枝APP

最新推荐文章于 2024-12-10 16:53:08 发布

阅读量1k

点赞数

文章标签： html取色器原理

本文介绍了如何制作一个简单的HTML取色器。通过创建一个带有颜色框和滑块的界面，用户可以使用鼠标或键盘调整RGB值，实时预览并复制所选颜色的代码。取色器使用JavaScript实现颜色值的更新和同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/p>

Document

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;

}

自制取色器

type=”text”

class=”paste”

placeholder=”在此粘贴查看复制内容”

(请使用鼠标拖动或方向键操作)

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 i = 0; i < inps.length; i++) {

inps[i].onmousedown = function() {

document.onmousemove = function() {

setRgb()

}

inps[i].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

}