前端开发者| web前端开发 教程 |
| 前端公众号开发教程 |
| 前端开发的基础教程 |
自制的一个取色器，原理比较简单，可以复制选中的rgb值（没有封装兼容）
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Document</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;
</p><p>
}
.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>
</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=”在此粘贴查看复制内容”
/>
<span class=”prompt”>（请使用鼠标拖动或方向键操作）</span>
</div>
</main>
<script>
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
}
</script>
</body>
</html>
| web 前端开发环境配置教程 |
| web前端开发cn教程 |
| web前端开发教程答案 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册