颜色选择: ColorMatch 5K- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 颜色选择: ColorMatch 5K

Javascript: JS 参数传递的实际应用代码分析; prototype与jquery下Ajax实现的差别; 用JS写的简单的计算器实现代码; javascript 数组操作实用技巧; JavaScript 中级笔记第二章; JavaScript 中级笔记第三章; JavaScript 中级笔记第四章闭包; JavaScript 中级笔记第五章面向对象的基础; Mootools 1.2教程函数; Mootools 1.2教程事件处理; 通过Mootools 1.2来操纵HTML DOM元素; Mootools 1.2教程设置和获取样式表属性; Mootools 1.2教程输入过滤第一部分（数字）; Mootools 1.2教程输入过滤第二部分（字符串）; Mootools 1.2教程 Fx.Tween的使用; Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件; MooTools 1.2中的Drag.Move来实现拖放; Mootools 1.2教程正则表达式; Mootools 1.2教程定时器和哈希简介; Mootools 1.2教程滚动条（Slider）

No. « ‹ 184 185 186 187 › »

技术文章搜索

关键字

Javascript 中的颜色选择: ColorMatch 5K

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 245 ::

收藏到网摘: n/a

一些常用的Javascript函数 Javascript实现的分页函数

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="generator" content="WebWerx 2.5">
<meta name="keywords" content="colormatch,5k,color picker,color schemes,match,matching,colors,colours,palette,web design,free,freeware,online">
<meta name="description" content="Online tool for picking matching color schemes. Made in less than 5.120 bytes of code.">
<style>
body {background-color:#E6E6E6; font:10px tahoma; margin:30px; margin-top:20px; color:#323232; }
p {margin:0px; margin-bottom:4px; font:11px tahoma; line-height: 12px; }
td {vertical-align:top;}
h1 {font-size:12px; font-weight:bold margin:0px; margin-bottom:8px; }
</style>
</head>
<body>
<style>.s{border:inset 1;width:50}.s2{border:outset 1;width:19;height:19;background-color:#E6E6E6;position:absolute;left:1;top:1}.t{font:11px tahoma;color:#555555}.t2{font:bold 36px verdana}</style></head><script language="JavaScript">var mover=moveg=moveb=moveh=0;var hs=new Object();var rg=new Object();rg.r=rg.g=rg.b=0;function click(x,s){if(x<10){x=10};if(x>265){x=265}x-=10;eval("h"+s+".style").left=x+1;eval("rg."+s+"="+x);rg2hs(rg);ud("0",rg);sw.style.backgroundColor="rgb("+rg.r+","+rg.g+","+rg.b+")";dom();}function bclick(s){x=window.event.offsetX+eval("h"+s+".style.pixelLeft-1");click(x,s);}function sc(s){x=window.event.offsetX;click(x,s);}function movee(s){eval("move"+s+"=0")}function rc(x,m){if(x>m){return m}if(x<0){return 0}else{return x}}function rg2hs(rg){m=rg.r;if(rg.g<m){m=rg.g};if(rg.b<m){m=rg.b};v=rg.r;if(rg.g>v){v=rg.g};if(rg.b>v){v=rg.b};value=100*v/255;delta=v-m;if(v==0.0){hs.s=0}else{hs.s=100*delta/v};if(hs.s==0){hs.h=0}else{if(rg.r==v){hs.h=60.0*(rg.g-rg.b)/delta}else if(rg.g==v){hs.h=120.0+60.0*(rg.b-rg.r)/delta}else if(rg.b=v){hs.h=240.0+60.0*(rg.r-rg.g)/delta}if(hs.h<0.0){hs.h=hs.h+360.0}}hs.v=Math.round(value);hs.h=Math.round(hs.h);hs.s=Math.round(hs.s);return(true);}function rg2html(z){return "#"+d2h(z.r)+d2h(z.g)+d2h(z.b);}function d2h(d){hch="0123456789ABCDEF";a=d%16;b=(d-a)/16;return hch.charAt(b)+hch.charAt(a);}function c2r(d){k=window.event.srcElement.style.backgroundColor;j=(k.substr(4,k.indexOf(")")-4)).split(",");click(parseInt(j[0])+10,"r");click(parseInt(j[1])+10,"g");click(parseInt(j[2])+10,"b");}function h2r(hs){var rg=new Object();if(hs.s==0){rg.r=rg.g=rg.b=Math.round(hs.v*2.55);return rg;}hs.s=hs.s/100;hs.v=hs.v/100;hs.h/=60;i=Math.floor(hs.h);f=hs.h-i;p=hs.v*(1-hs.s);q=hs.v*(1-hs.s*f);t=hs.v*(1-hs.s*(1-f));switch(i){case 0:rg.r=hs.v;rg.g=t;rg.b=p;break;case 1:rg.r=q;rg.g=hs.v;rg.b=p;break;case 2:rg.r=p;rg.g=hs.v;rg.b=t;break;case 3:rg.r=p;rg.g=q;rg.b=hs.v;break;case 4:rg.r=t;rg.g=p;rg.b=hs.v;break;default:rg.r=hs.v;rg.g=p;rg.b=q;}rg.r=Math.round(rg.r*255);rg.g=Math.round(rg.g*255);rg.b=Math.round(rg.b*255);return rg;}function ps(x){document.write('<td><div style="width:53;height:53;background-color:rgb(0,0,0);cursor:hand" class=s id="sw'+x+'" onClick="c2r()" title="Click to promote to primary color"></div></td>');}function ph(x){document.write('<td><div class=t id="hc'+x+'">#000000</div></td>');}function ud(x,c){eval("sw"+x).style.backgroundColor="rgb("+c.r+","+c.g+","+c.b+")";eval("hc"+x).innerHTML=rg2html(c)}function pl(t,c,l){document.write('<div style="position:absolute;left:30;top:'+t+';background-color:black"><div class=s style="width:276;height:21;background-color:'+c+';filter:alpha(style=1,startx=360,finishx=0);" onMouseDown="move'+l+'=1;sc(\''+l+'\');" onMouseMove="if(move'+l+'==1){sc(\''+l+'\');}"></div><div class=s2 id=h'+l+' onMouseDown="move'+l+'=1;bclick(\''+l+'\');" onMouseUp="movee(\''+l+'\');" onMouseMove="if(move'+l+'==1){bclick(\''+l+'\');}"></div></div>')}function dom(){z=new Object();y=new Object();yx=new Object();y.s=hs.s;y.h=hs.h;if(hs.v>70){y.v=hs.v-30}else{y.v=hs.v+30};z=h2r(y);ud("1",z);if((hs.h>=0)&&(hs.h<30)){yx.h=y.h=hs.h+20;yx.s=y.s=hs.s;y.v=hs.v;if(hs.v>70){yx.v=hs.v-30}else{yx.v=hs.v+30}}if((hs.h>=30)&&(hs.h<60)){yx.h=y.h=hs.h+150;y.s=rc(hs.s-30,100);y.v=rc(hs.v-20,100);yx.s=rc(hs.s-70,100);yx.v=rc(hs.v+20,100);}if((hs.h>=60)&&(hs.h<180)){yx.h=y.h=hs.h-40;y.s=yx.s=hs.s;y.v=hs.v;if(hs.v>70){yx.v=hs.v-30}else{yx.v=hs.v+30}}if((hs.h>=180)&&(hs.h<220)){yx.h=hs.h-170;y.h=hs.h-160;yx.s=y.s=hs.s;y.v=hs.v;if(hs.v>70){yx.v=hs.v-30}else{yx.v=hs.v+30}}if((hs.h>=220)&&(hs.h<300)){yx.h=y.h=hs.h;yx.s=y.s=rc(hs.s-60,100);y.v=hs.v;if(hs.v>70){yx.v=hs.v-30}else{yx.v=hs.v+30}}if(hs.h>=300){if(hs.s>50){y.s=yx.s=hs.s-40}else{y.s=yx.s=hs.s+40}yx.h=y.h=(hs.h+20)%360;y.v=hs.v;if(hs.v>70){yx.v=hs.v-30}else{yx.v=hs.v+30}}z=h2r(y);ud("2",z);z=h2r(yx);ud("3",z);y.h=0;y.s=0;y.v=100-hs.v;z=h2r(y);ud("4",z);y.h=0;y.s=0;y.v=hs.v;z=h2r(y);ud("5",z);}</script><body onMouseUp="mover=moveg=moveb=0;" bgcolor=#E6E6E6 leftmargin=30 topmargin=30 class=t><div style="width:400"><span class=t2>ColorMatch 5K</span>
This utility will help you select a matching 6-color palette for your website.
Define a single color that you like. Matching colors will be calculated.
Click a color in the palette to promote it to the primary color.
<b>
I like this color:
6-color matching palette:</div><script>pl(170,"red","r");pl(200,"green","g");pl(230,"blue","b")</script><div class=s id=sw style="position:absolute;left:316;top:170;height:81;width:82;background-color:black;"></div><div style="position:absolute;left:20;top:290;"><table cellspacing=10 cellpadding=0><tr><script>ps(0);ps(1);ps(2);ps(3);ps(4);ps(5);</script></tr><tr><script>ph(0);ph(1);ph(2);ph(3);ph(4);ph(5);</script></tr></table></div>
<div style="width:500px; top:420px; position:absolute;">
<h1>About this page</h1>
The color selector on this site was submitted as an entry for the Danish 5KB (5.120 bytes) web competition in 2001.
Given the nature of the competition ?allowing only for 5.120 bytes to be used in total! ?I was not able to make it cross-browser compatible at the time. Despite the lack of compatibility beyond IE, the tool won the competition.
A lot of enthusiastic people around the World have not only made it more compatible, but also added even more features. <a target="_blank" href="http://www.google.com/search?q=colormatch+5k">Google will guide you to them!</a>
If you for some reason want to get in touch with me, please use the contact form at my site <a target="_top" href="http://port80.biz">Port80.biz</a>. ?Best regards, Kim Jensen aka kim^lwx
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

一些常用的Javascript函数 Javascript实现的分页函数

Javascript 中的 颜色选择: ColorMatch 5K

评论 (0) All

Javascript 中的颜色选择: ColorMatch 5K