论坛 › 马黑黑教程专版 › RGB线性渐变调色器（预览）

马黑黑 发表于 2022-5-11 20:16

RGB线性渐变调色器（预览）

本帖最后由 马黑黑 于 2022-5-11 20:19 编辑 <br /><br /><style>
        #mama { left: -214px; display: flex; flex-wrap: wrap; gap: 20px; width: 1024px; font: normal 15px sans-serif; background: #fff; box-shadow: 1px 1px 2px #666; position: relative; }
        #mama fieldset { width: 280px; padding: 6px; margin: 4px 0; }
        #mama input { outline: none; cursor: pointer; }
        #mama input { width: 100px; }
        #xiaoguo1 { height: 100%; }
        #xiaoguo2 { height: 100%; }
        #linearset{ width: 100%; height: 100%; }
        #linearxg { width: 100%; height: 100%; }
        #codeTips { margin: 20px auto 0; width: 1024px; cursor: pointer; }
        #codeTips::before { content: '代码：'; }
</style>

<div id="mama">
        <fieldset id="rgbset">
                <legend>RGBA颜色配置</legend>
                <p>红色（R）<input id="R" type="range" max="255" min="0" value="0" step="1" /> <span id="sR">0</span></p>
                <p>绿色（G）<input id="G" type="range" max="255" min="0" value="0" step="1" /> <span id="sG">0</span></p>
                <p>蓝色（B）<input id="B" type="range" max="255" min="0" value="0" step="1" /> <span id="sB">0</span></p>
                <p>Alpha通道 <input id="A" type="range" max="1" min="0" value="1" step="0.05" /> <span id="sA">1</span></p>
                <p><input type="radio" value="1" name="group" checked="checked" />第一组 <input type="radio" value="2" name="group" />第二组</p>
        </fieldset>
                <fieldset>
                <legend>第一组预览</legend>
                <div id="xiaoguo1"></div>
        </fieldset>
        <fieldset>
                <legend>第二组预览</legend>
                <div id="xiaoguo2"></div>
        </fieldset>
        <fieldset>
                <legend>渐变参数</legend>
                <div id="linearset">
                        <input type="radio" value="to bottom" name="linear" checked="checked" /> to bottom（默认）<br />
                        <input type="radio" value="to top" name="linear" /> to top<br />
                        <input type="radio" value="to right" name="linear" /> to right<br />
                        <input type="radio" value="to left" name="linear" /> to left<br />
                        <input type="radio" value="to right top" name="linear" /> to right top<br />
                        <input type="radio" value="to right bottom" name="linear" /> to right bottom<br />
                        <input type="radio" value="to left top" name="linear" /> to left top<br />
                        <input type="radio" value="to left bottom" name="linear" /> to left bottom<br />
                </div>
        </fieldset>
        <fieldset style="flex-grow: 1;height: 400px;">
                <legend>线性渐变预览</legend>
                <div id="linearxg"></div>
        </fieldset>       
</div>
<div id="codeTips">background: rgba(0,0,0,1)</div>

<script>

let colorAr = ['0,0,0,1','255,255,255,1'];
let Dir = 'to bottom'; //渐变
let flag = 0; //一、二组
let xg1 = document.querySelector('#xiaoguo1');
let xg2 = document.querySelector('#xiaoguo2');
let tips = document.querySelector('#codeTips');
let linearDiv = document.querySelector('#linearxg');
let rangeAr = document.getElementById('rgbset').getElementsByTagName('input');
let rangeLinearAr = document.getElementById('linearset').getElementsByTagName('input');

resetState(1);
resetState(0);

Array.from(rangeAr).forEach(function(item){ item.onchange = function(){ setColor(item);} });
Array.from(rangeLinearAr).forEach(function(item){ item.onchange = function(){ setLinear(item);} });

tips.onclick = function(){ navigator.clipboard.writeText(this.innerText); }

function setColor(ele){
        flag = document.getElementsByName('group').checked ? 0 : 1;
        if(ele.type == 'range'){
                let id = '#s' + ele.id;
                document.querySelector(id).innerText = ele.value;
                colorAr = `${rangeAr.value},${rangeAr.value},${rangeAr.value},${rangeAr.value}`;
        }
        resetState(flag);
}

function resetState(idx){
        let divColor = idx == 0 ? xg1 : xg2;
        let valAr = colorAr.split(',');
        for(j=0; j<4; j++){
                let spanId = '#s' + rangeAr.id;
                rangeAr.value = valAr;
                document.querySelector(spanId).innerText = valAr;
        }
        divColor.style.background = `rgba(${colorAr})`;
        linearDiv.style.background = `linear-gradient(${Dir},${xg1.style.background}, ${xg2.style.background})`
        tips.innerText = 'background: ' + linearDiv.style.background;
}

function setLinear(ele){
        Dir = ele.value;
        resetState(flag);
}

</script>

马黑黑 发表于 2022-5-11 22:13

核心代码基本定型，渐变的基本功能算是有了吧。尚未差错，尚未美化，还有deg角度渐变未加入。

这是双色线性渐变，做多色渐变代码量会增大许多，双色的做成后有兴趣再继续

红影 发表于 2022-5-11 22:53

又是个互动的，这个真好，能直接看到渐变效果，还能直接切换渐变方向，太棒了{:4_199:}

马黑黑 发表于 2022-5-11 23:00

红影 发表于 2022-5-11 22:53
又是个互动的，这个真好，能直接看到渐变效果，还能直接切换渐变方向，太棒了

基本的功能，还不完整，所以叫预览

红影 发表于 2022-5-13 14:06

马黑黑 发表于 2022-5-11 23:00
基本的功能，还不完整，所以叫预览

已经很好了，非常直观{:4_187:}

马黑黑 发表于 2022-5-13 19:15

红影 发表于 2022-5-13 14:06
已经很好了，非常直观

这是本意。这个可以换下来了

加林森 发表于 2022-5-13 19:22

谢谢老黑！

加林森 发表于 2022-5-13 19:22

谢谢老黑！

马黑黑 发表于 2022-5-13 19:24

加林森 发表于 2022-5-13 19:22
谢谢老黑！

甭客气

加林森 发表于 2022-5-13 20:36

马黑黑 发表于 2022-5-13 19:24
甭客气

嗯嗯。

红影 发表于 2022-5-14 11:02

马黑黑 发表于 2022-5-13 19:15
这是本意。这个可以换下来了

嗯嗯，这个已经换下来了{:4_173:}

马黑黑 发表于 2022-5-14 12:15

红影 发表于 2022-5-14 11:02
嗯嗯，这个已经换下来了

挺好

查看完整版本: RGB线性渐变调色器（预览）