HTML调色版

HTML调色版

< html >
< head >
< title ></ title >
< meta  http-equiv ="content-type"  content ="text/html; charset=gb2312" >
< style  type ="text/css" >
 body{}{}{}{background-color: buttonface; }
 input{}{}{}{font-size:9pt;font-family: "verdana,tahoma,arial,sans-serif";}
 button{}{}{}{height:24px;font-size:10pt;font-family: "verdana,tahoma,arial,sans-serif";}
</ style >
</ head >
< body  onSelectStart ="return false;"  style ="margin: 0px;padding: 0px;" >
< script  language ="JavaScript" >
document.title="颜色选择"+ document.title;
var iW = 30;//共有6种颜色，每种颜色的宽为iW。iW*6为色带的宽。
var iH = '152';//iH为色带的高。
var iT =20;
var iL = 0;
//var iT = (document.body.offsetHeight-iH)/2;
var H,S,V;
var sr,sg,sb;
var curColor="#000000";
</ script >
< table  cellspacing ="0"  cellpadding ="0" >
     < tr >  
         < td >     
             < input  type =text  disabled =true  size =9  id =ShowColor  style ="background-color:#000000;disabled:true;" >< input  type =text  disabled =true  size =15  id =SelColor  value ="#000000" >
     </ td >
   </ tr >
</ table >
< script  language ="Javascript" >
function SetColor(){
    SelColor.value=curColor.toUpperCase();
    ShowColor.style.background=curColor;
}
function HSV(){
    var pX = event.offsetX;
    var pY = event.offsetY;
    var HalfH = parseInt(iH/2);
    H = parseInt(pX*360/(iW*6));
    if(event.offsetY < HalfH){
        S = pY/HalfH;
        V = 1;
    }else{
        S = 1;
        V = (iH-pY)/HalfH;
    }
    HSVtoRGB();
    rgb=RGB2HTML();
    //HSV.value = 'H:'+H+'  S:'+parseInt(S*100)+'%   V:'+parseInt(V*100)+'%';
    //RGB.value = 'R:'+sr+'  G:'+sg+'   B:'+sb;
    SelColor.value="#"+rgb.toUpperCase();
    ShowColor.style.background= '#'+rgb;
}
function HSVtoRGB(){
    var r,g,b;
    var k = (H%60)/60;
    var c1 = V*(1-S);
    var c2 = V*(1-S*k);
    var c3 = V*(1-S*(1-k));
    switch(parseInt(H/60)){
        case 0 : r=V,g=c3;b=c1; break;
        case 1 : r=c2,g=V;b=c1; break;
        case 2 : r=c1,g=V;b=c3; break;
        case 3 : r=c1,g=c2;b=V; break;
        case 4 : r=c3,g=c1;b=V; break;
        case 5 : r=V,g=c1;b=c2; break;
    }
    sr = parseInt(r*255);
    sg = parseInt(g*255);
    sb = parseInt(b*255);
}
function RGB2HTML(){
    var r=(sr>=16)?sr.toString(16):('0'+sr.toString(16));
    var g=(sg>=16)?sg.toString(16):('0'+sg.toString(16));
    var b=(sb>=16)?sb.toString(16):('0'+sb.toString(16));
    return r+g+b;
}
function finsh(){
    window.returnValue = SelColor.value;
    window.close();
}
function window.onload(){
    var iHtml = '';
    var RainBow = [255,0,0,  255,255,0,  0,255,0,  0,255,255,  0,0,255,  255,0,255,  255,0,0];
    for(var i=0;i<6;i++){
        var R1 = RainBow[i*3];
        var G1 = RainBow[i*3+1];
        var B1 = RainBow[i*3+2];
        var R2 = RainBow[(i+1)*3];
        var G2 = RainBow[(i+1)*3+1];
        var B2 = RainBow[(i+1)*3+2];
        iHtml += "<span style='position:absolute;left:"+(i*iW+iL)+";top:"+iT+";width:"+iW+";height:"+iH+";background:rgb("+R1+","+G1+","+B1+");'></span><span style='position:absolute;left:"+(i*iW+iL)+";top:"+iT+";width:"+iW+";height:"+iH+";background:rgb("+R2+","+G2+","+B2+");filter:alpha(opacity=0,finishopacity=100,Style=1);'></span>"
    }
    iHtml += "<span style=position:absolute;left:"+iL+";top:"+iT+";width:"+iW*6+";height:"+iH/2+";background:rgb(255,255,255);filter:alpha(opacity=100,finishOpacity=0,style=1,starty=0,finishy=100,startx=0,finishx=0)></span><span style=position:absolute;left:"+iL+";top:"+(iT+iH/2)+";width:"+iW*6+";height:"+iH/2+";background:rgb(0,0,0);filter:alpha(opacity=0,finishOpacity=100,style=1,starty=0,finishy=100,startx=0,finishx=0)></span><span style='cursor:crosshair;position:absolute;left:"+iL+";top:"+iT+";width:"+iW*6+";height:"+iH+";' οnmοusemοve=HSV() οndblclick=finsh() οnclick='curColor=SelColor.value' οnmοuseοut=SetColor()></span>"
    document.body.innerHTML+=iHtml;
    SetColor();
}
</ script >
</ body >
</ html >

posted on 2005-07-24 13:02 kamlau 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/ltjabc/archive/2005/07/24/199054.html