RGBA双色线性渐变调配器（定稿）
<style>#outerBox { left: -59px; width: fit-content; display: flex;flex-direction: column; gap: 20px; border-radius: 4px; background: #eee; box-shadow: 1px 1px 2px gray; padding: 20px; position: relative; }
.mama { display: flex;gap: 20px; width: 100%; font: normal 15px sans-serif; }
.mama fieldset { width: 240px; padding: 10px; border: 1px solid #ddd; box-shadow: 1px 1px 1px #aaa; }
.mama input { outline: none; cursor: pointer; }
.mama input { width: 100px; }
#xiaoguo1 { height: 100%; cursor: pointer; }
#xiaoguo2 { height: 100%; cursor: pointer; }
#linearset{ width: 100%; height: 100%; }
#linearxg { margin: auto; width: 100%; height: 100%;cursor: pointer; }
#codeTips { margin: 8px 0; cursor: pointer; }
#codeTips::before { content: '复制代码：'; }
</style>
<div id="outerBox">
<div class="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>
</div>
<div class="mama">
<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 /><br />
<input id="deg" type="range" max="360" min="0" value="0" step="1" /> <span id="sDeg">0deg</span>
</div>
</fieldset>
<fieldset style="flex-grow: 1;height: 360px;">
<legend>线性渐变效果</legend>
<div id="linearxg"></div>
</fieldset>
</div>
<div id="codeTips">background: rgba(0,0,0,1)</div>
</div>
<script>
let colorAr = ['100,100,10,1','180,100,100,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);} });
xg1.onclick = function(){ flag = 0; rangeAr.checked = true; resetState(0); };
xg2.onclick = function(){ flag = 1; rangeAr.checked = true; resetState(1); };
tips.onclick = function(){ navigator.clipboard.writeText(this.innerText); }
linearDiv.onclick = function(){
this.style.borderRadius != '50%' ? (this.style.width = this.clientHeight + 'px',this.style.borderRadius = '50%') : (this.style.width = '100%',this.style.borderRadius = '0%');
}
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){
if(ele.type != 'range'){
Dir = ele.value;
} else {
Dir = ele.value + 'deg';
Array.from(rangeLinearAr).forEach(function(item){ item.checked = false; });
document.getElementById('sDeg').innerText = Dir;
}
resetState(flag);
}
</script> 这个更完美了，我把前面一个指定拿下来，把这个换上去了{:4_173:} 这个还可以在颜色一和颜色二里切换，还能调整方向和角度，真棒{:4_199:} 红影 发表于 2022-5-13 20:24
这个更完美了，我把前面一个指定拿下来，把这个换上去了
这是要做的 一帖尽显色彩融合的美妙{:4_204:} 红影 发表于 2022-5-13 20:26
这个还可以在颜色一和颜色二里切换，还能调整方向和角度，真棒
单击颜色块，不知道你发现木有 红影 发表于 2022-5-13 20:28
一帖尽显色彩融合的美妙
惊讶JS的能耐吧 马黑黑 发表于 2022-5-13 20:27
这是要做的
这个完美，什么功能都有了{:4_199:} 马黑黑 发表于 2022-5-13 20:28
单击颜色块，不知道你发现木有
发现了，开始就这么做的。后来才发现本来就设置了选择小圆点{:4_173:} 马黑黑 发表于 2022-5-13 20:29
惊讶JS的能耐吧
是的，JS太牛了{:4_199:} 红影 发表于 2022-5-14 11:14
是的，JS太牛了
它在前端的标签不错。它还有兄弟呢。 红影 发表于 2022-5-14 11:14
发现了，开始就这么做的。后来才发现本来就设置了选择小圆点
多重操作入口 红影 发表于 2022-5-14 11:13
这个完美，什么功能都有了
预期功能达到了，所以定稿了 马黑黑 发表于 2022-5-14 12:11
预期功能达到了，所以定稿了
黑黑真棒。辛苦了{:4_190:} 马黑黑 发表于 2022-5-14 12:10
多重操作入口
这个在我想来极难的事，在黑黑手下就这么轻松实现了{:4_199:} 马黑黑 发表于 2022-5-14 12:10
它在前端的标签不错。它还有兄弟呢。
哦？它的兄弟是谁啊？ 红影 发表于 2022-5-15 09:41
这个在我想来极难的事，在黑黑手下就这么轻松实现了
还是那句话：懂得原理，做起来就不难 红影 发表于 2022-5-15 09:42
哦？它的兄弟是谁啊？
这个说来话长，但可以大概这么理解，只要是脚本语言的，多少都有点亲戚关系 马黑黑 发表于 2022-5-15 09:42
还是那句话：懂得原理，做起来就不难
是这个理儿{:4_199:} 马黑黑 发表于 2022-5-15 09:57
这个说来话长，但可以大概这么理解，只要是脚本语言的，多少都有点亲戚关系
那它的兄弟很多呢{:4_173:}
页:
[1]
2