導航:首頁 > 源碼編譯 > 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顏色演算法相關的資料
- 6軸機器人演算法
- 平方根的簡單演算法
- 人工峰群演算法的目標函數
- 編譯器開發屬於哪個方向
- 摘譯和編譯的英文
- 中華軟體庫源碼資源共享
- 霍夫曼編碼演算法
- 生成解決方案等於編譯加鏈接嗎
- 蚌埠力源碼頭租房
- 客戶端框架源碼
- 載入單頁源碼
- 按鍵壓槍源碼
- 演算法將所有的島嶼連通
- 博途如何編譯硬體
- 電池消耗演算法
- keytool加密演算法
- 微信小程序題庫源碼
- 溯源碼有分國家認證的嗎
- 驅動級進程代理源碼
- 最短路徑的生成演算法可用
- 又見金底副圖選股公式源碼
- 京東java演算法筆試題
- 娃娃智慧閱讀源碼
- 猴子吃桃遞歸演算法
- 源碼怎麼製作軟體app程序
- 免費的im聊天源碼
- app源碼開發後需要什麼條件
- 二分查找演算法php
- 美國好的源碼出售
- php開發oa系統源碼
- 雲南到河北源碼
- 有免稅標簽有溯源碼是假的嗎
- 查看源碼下載歌曲
- 電視ts源碼什麼意思
- 足跡動畫源碼
- 微信餐飲系統源碼
- 只編譯一個pbd可以運行嗎
- 排序演算法圖解
- 演算法如何規制
- 阿里安卓面試演算法題
- 數據挖掘常見演算法
- 抖音小店自動邀約達人軟體源碼