前端开发自制取色器

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前端开发教程答案
» 本文来自:前端开发者 » 《前端开发自制取色器》
» 本文链接地址:https://www.rokub.com/6941.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!