導航:首頁 > 源碼編譯 > js顏色演算法
js顏色演算法
發布時間：2022-12-22 23:04:54❶ 求js中顏色值變淺的演算法，類似於下圖
首先你的了解顏色的概念
下面我簡單介紹下顏色概念在32位系統上我們所看到的顏色由RGB三原色顯示再加上一個透明度通道就形成了多種多樣的顏色
多的我就不多說了下面直接寫一份演示代碼
<!DOCTYPEhtml>
<html>
<head>
<title>test</title>
<style>
.tsetDiv{
width:40px;
height:40px;
border-radius:100%;
font-size:0;
display:inline-block;
margin-left:10px;
vertical-align:middle;
}
#boxF{
width:300px;
font-size:0;
height:auto;
}
</style>
</head>
<body>
<divid="boxF"></div>
<scripttype="text/javascript">
varboxf=document.getElementById("boxF");
vardivC=null;
varr=0;
varg=0;
varb=0;
for(vari=0;i<10;i++){
for(varj=0;j<10;j++){
divC=document.createElement("div");
divC.style.backgroundColor="rgb("+r+","+g+","+b+")";
divC.setAttribute("class","tsetDiv");
boxf.appendChild(divC);
}
//修改rgb加的不同值可以得到不同的效果rgb最大值為255所以不用擔心超過不顯示
r+=15;
g+=25;
b+=35;
}
</script>
</body>
</html>
運行效果為下圖
❷ JavaScript如何計算兩個顏色之間的漸變色值
動態漸變
<span style="font-size:12px;"><html>
...
<body>
<center>
<div id="fade" style="width:600px;height:200px;"></div>
</center>
</body>
</html></span>為了方便查看，使用內嵌樣式，還是推薦使用外鏈樣式的使用啊，接下來進行簡單編寫動態實現漸變效果
<span style="font-size:12px;"><script type="text/javascript">
var node=document.getElementById("fade");
var color="#0000";
var level=1;window.load=function fading(){
node.style.background=color.+level.toString()+level.toString();
level++;
if(level>16){
clearTimeOut(fading);
}else{
setTimeOut(fading,300);
}
}
<script></span>靜態漸變
在css樣式中添加：
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff));
簡單解釋下：
linear：這個就碰到了線性漸變和徑向漸變的兩個概念，無非是在一條線上進行變化的線性和像圓一樣向四周擴散的徑向；
後面的四個值：分別代表相應方向的px值，可以從左順時針轉的順序記憶，但是它代表的是to，截止到的顏色
from：這就是開始的顏色了
to：和from是同時出現的，最後漸變結束的顏色
而color-stop：則是指在變化到線的哪個位置的時候會出現什麼顏色，當然是從周圍過渡過去的，相當於from，to過渡點，from過渡點，to；附送下簡單的其他的基本代碼
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8);/*IE6*/
background:-moz-linear-gradient(left,#ffffff,#ff0000);/*非IE6的其它*/
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff));/*非IE6的其它*/
❸ 求js顏色轉換演算法
(function(d){function h(a,b,e){var c="rgb"+(d.support.rgba?"a":"")+"("+parseInt(a[0]+e*(b[0]-a[0]),10)+","+parseInt(a[1]+e*(b[1]-a[1]),10)+","+parseInt(a[2]+e*(b[2]-a[2]),10);d.support.rgba&&(c+=","+(a&&b?parseFloat(a[3]+e*(b[3]-a[3])):1));return c+")"}function f(a){var b;return(b=/#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/.exec(a))?[parseInt(b[1],16),parseInt(b[2],16),parseInt(b[3],16),1]:(b=/#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/.exec(a))?[17*parseInt(b[1],16),17*parseInt(b[2],
16),17*parseInt(b[3],16),1]:(b=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(a))?[parseInt(b[1]),parseInt(b[2]),parseInt(b[3]),1]:(b=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9\.]*)\s*\)/.exec(a))?[parseInt(b[1],10),parseInt(b[2],10),parseInt(b[3],10),parseFloat(b[4])]:l[a]}d.extend(!0,d,{support:{rgba:function(){var a=d("script:first"),b=a.css("color"),e=!1;if(/^rgba/.test(b))e=!0;else try{e=b!=a.css("color","rgba(0, 0, 0, 0.5)").css("color"),
a.css("color",b)}catch(c){}return e}()}});var k="color backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor outlineColor".split(" ");d.each(k,function(a,b){d.Tween.propHooks[b]={get:function(a){return d(a.elem).css(b)},set:function(a){var c=a.elem.style,g=f(d(a.elem).css(b)),m=f(a.end);a.run=function(a){c[b]=h(g,m,a)}}}});d.Tween.propHooks.borderColor={set:function(a){var b=a.elem.style,e=[],c=k.slice(2,6);d.each(c,function(b,c){e[c]=f(d(a.elem).css(c))});var g=f(a.end);
a.run=function(a){d.each(c,function(d,c){b[c]=h(e[c],g,a)})}}};var l={aqua:[0,255,255,1],azure:[240,255,255,1],beige:[245,245,220,1],black:[0,0,0,1],blue:[0,0,255,1],brown:[165,42,42,1],cyan:[0,255,255,1],darkblue:[0,0,139,1],darkcyan:[0,139,139,1],darkgrey:[169,169,169,1],darkgreen:[0,100,0,1],darkkhaki:[189,183,107,1],darkmagenta:[139,0,139,1],darkolivegreen:[85,107,47,1],darkorange:[255,140,0,1],darkorchid:[153,50,204,1],darkred:[139,0,0,1],darksalmon:[233,150,122,1],darkviolet:[148,0,211,1],fuchsia:[255,
0,255,1],gold:[255,215,0,1],green:[0,128,0,1],indigo:[75,0,130,1],khaki:[240,230,140,1],lightblue:[173,216,230,1],lightcyan:[224,255,255,1],lightgreen:[144,238,144,1],lightgrey:[211,211,211,1],lightpink:[255,182,193,1],lightyellow:[255,255,224,1],lime:[0,255,0,1],magenta:[255,0,255,1],maroon:[128,0,0,1],navy:[0,0,128,1],olive:[128,128,0,1],orange:[255,165,0,1],pink:[255,192,203,1],purple:[128,0,128,1],violet:[128,0,128,1],red:[255,0,0,1],silver:[192,192,192,1],white:[255,255,255,1],yellow:[255,255,
0,1],transparent:[255,255,255,0]}})(jQuery);
與js顏色演算法相關的資料
- seal是不是對稱密鑰演算法
- 高中演算法語句
- mcu編譯成庫
- java九宮格演算法
- 憑訂單號抽獎源碼
- 函數未定義但是能編譯運行
- vs2019預編譯怎麼設置
- 卡爾曼濾波演算法書籍
- csk跟蹤演算法
- 數據挖掘中用到的演算法
- 員工福利系統源碼
- net編譯運行原理
- 可達性演算法根
- phprsa密碼演算法
- 人氣熱點個股的選股指標源碼
- udid定製源碼
- 全部編譯後標簽的軟元件
- ida反編譯和od
- 進化演算法屬於智能演算法嗎
- 編譯器c語言輸入中文
- 列印機的分配演算法
- jsp項目優秀源碼
- 小區物業管理系統編程源碼
- 小程序模板不給源碼靠譜嗎
- QQ飛車源碼更新
- 虛擬機中編譯器
- 台達PLC編譯按鈕在哪裡
- sparkcore源碼
- 編譯過程之後是預處理嗎
- 人人影視路由器固件編譯
- 邏輯開發編譯環境
- ce自己編譯
- 個人發卡網彈窗源碼
- 程序編譯時形成邏輯地址嗎
- 卷積編解碼設計
- 代碼可以編譯運行
- 222乘104列是演算法
- 四川音樂類投檔線的演算法
- c語言編譯器怎麼打不開
- 許振民編譯局
- 編譯器研究的難點
- 易語言加殼怎麼編譯