Showing posts with label javascript code. Show all posts
Showing posts with label javascript code. Show all posts

Monday, June 25, 2007

Javascript to convert the reverse color value

Here is the small javascript code i wrote to get the reverse color for text on the colored background.


< script type="text/javascript">
function changeColor(colorval){
var colorValue='';
var reverseColor='';
if(colorval.length==4 || colorval.length==7 ){
colorval=colorval.substr(1,colorval.length);
}
if (colorval.length==3){
for(i=0;i<colorval.length;i++){
var colchar=colorval.substr(i,1);
colorValue+=colchar+colchar;
reverseColor+=reverseColorChar(colchar)+reverseColorChar(colchar);
}
}else{
for(j=0;j<colorval.length;j++){
var colchar=colorval.substr(j,1);
reverseColor += reverseColorChar(colchar);
}
colorValue=colorval;
}


document.getElementById('abc').style.background='#'+colorValue;
document.getElementById('abc_text').style.color='#'+reverseColor;
alert(reverseColor);
}

function reverseColorChar(colorChar){
var reverseColorCode=0;
if(colorChar=='0')
reverseColorCode='f';
else if(colorChar=='1')
reverseColorCode='e';
else if(colorChar=='2')
reverseColorCode='d';
else if(colorChar=='3')
reverseColorCode='c';
else if(colorChar=='4')
reverseColorCode='b';
else if(colorChar=='5')
reverseColorCode='a';
else if(colorChar=='6')
reverseColorCode='9';
else if(colorChar=='7')
reverseColorCode='8';
else if(colorChar=='8')
reverseColorCode='7';
else if(colorChar=='9')
reverseColorCode='6';
else if(colorChar=='a')
reverseColorCode='5';
else if(colorChar=='b')
reverseColorCode='4';
else if(colorChar=='c')
reverseColorCode='3';
else if(colorChar=='d')
reverseColorCode='2';
else if(colorChar=='e')
reverseColorCode='1';
else if(colorChar=='f')
reverseColorCode='0';
return reverseColorCode;
}


< /script>

< input type="text" id="colorValue" name="colorValue" value="">
< input type="button" value="change color" onclick="javascript:changeColor(document.getElementById('colorValue').value)">
< div id="abc" style="width:100px;height:100px;border:1px #333 solid;">
< span id="abc_text">here is the text< /div>
Javascript to convert the reverse color valueSocialTwist Tell-a-Friend