Phiên bản đầy đủ: jsB@nk » Ứng dụng » Công cụ xuất » Thiết kế màu sắc cho thanh trượt
URL: https://www.javascriptbank.com/set-color-wizard.html
Đây là một công cụ dùng để thiết kế màu sắc và diện mạo cho thanh trượt một cách nhanh gọn, sau khi ưng ý, bạn có thể dán mã HTML của thanh trượt mình vừa tạo vào các trang web khác.
Phiên bản đầy đủ: jsB@nk » Ứng dụng » Công cụ xuất » Thiết kế màu sắc cho thanh trượt
URL: https://www.javascriptbank.com/set-color-wizard.html
<style type="text/css"><!--caption{color:#0000FF;font-weight:bold;font-size:1.5em;text-align:center}thead th, tfoot{color:#FFFFFF;font-weight:bold;border:none}td, th{border:0px}table{border-width:5px;border-style:outset;border-color:#0080FF;background-color:#0080FF}input{width:100%;background-color:#0040FF;color:#FFFFFF}input.button{width:40%;border-style:double;border-width:3px}div.maxcolorbar{width:255px;height:16px;border-color:#0080FF;border-style:inset;position:relative;top:0px;left:0px}div.colorbar{width:255px;height:16px;cursor:hand}--></style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script lagnuage='javascript' type='text/javascript'><!--var r;var y="";var RB=document.getElementById?document.getElementById("rb"):document.all.rb;var GB=document.getElementById?document.getElementById("gb"):document.all.gb;var BB=document.getElementById?document.getElementById("bb"):document.all.bb;var TOT=document.forms.color.tot;var TTT=document.getElementById?document.getElementById("ttt"):document.all.ttt;var mycolor=new Object();function numtohex(input){ var t="0123456789ABCDEF"; return (t.charAt(input>>4)+t.charAt(input%16));}function s(){ document.forms.color.r1.value=mycolor.r; document.forms.color.g1.value=mycolor.g; document.forms.color.b1.value=mycolor.b; document.forms.color.r2.value=numtohex(mycolor.r); document.forms.color.g2.value=numtohex(mycolor.g); document.forms.color.b2.value=numtohex(mycolor.b); RB.style.width=mycolor.r+"px"; GB.style.width=mycolor.g+"px"; BB.style.width=mycolor.b+"px"; TOT.value="#"+numtohex(mycolor.r)+numtohex(mycolor.g)+numtohex(mycolor.b); TTT.style.color=TOT.value;}function check(){ var i=TOT.value.toString(); if(i.charAt(0)=="#")i=i.substr(1,6); while(i.length<6)i+="0"; i=i.toUpperCase(); var r=i.substr(0,2); var g=i.substr(2,2); var b=i.substr(4,2); if(!r.match(/[^0-9a-fA-F]/i))mycolor.r=parseInt(r,16); if(!g.match(/[^0-9a-fA-F]/i))mycolor.g=parseInt(g,16); if(!b.match(/[^0-9a-fA-F]/i))mycolor.b=parseInt(b,16); s();}function checka(){ var i=document.forms.color[r+"2"].value; while(i.toString().length<2)i="0"+i; i=i.toUpperCase(); if(!i.match(/[^0-9a-fA-F]/i))mycolor[r]=parseInt(i,16); s();}function checkb(){ var i=document.forms.color[r+"1"].value if(isNaN(i))i=mycolor[r] if(Number(i)>255)i=255 if(Number(i)<0)i=0 mycolor[r]=i s()}function checkc(e){ if(!e)e=event if(y==""){ y=r mycolor[r]=parseInt(document.all?e.offsetX:e.layerX) s()}}function m(e){ if(!e)e=event; if(y=="")return false; var x=parseInt(document.all?e.offsetX:e.layerX); if(x<0)x=0; if(x>255)x=255; mycolor[r]=x; s();}function update_source(){ var tmp="<style type=\"text/css\"><!--\nbody,html{\n"; if(mycolor.bg!='')tmp+="background-color:"+mycolor.bg+";\n"; if(mycolor.c!='')tmp+="color:"+mycolor.c+";\n"; if(mycolor.sb!='')tmp+="scrollbar-base-color:"+mycolor.sb+";\n"; if(mycolor.sf!='')tmp+="scrollbar-face-color:"+mycolor.sf+";\n"; if(mycolor.s3!='')tmp+="scrollbar-3dlight-color:"+mycolor.s3+";\n"; if(mycolor.sd!='')tmp+="scrollbar-darkshadow-color:"+mycolor.sd+";\n"; if(mycolor.st!='')tmp+="scrollbar-track-color:"+mycolor.st+";\n"; if(mycolor.sa!='')tmp+="scrollbar-arrow-color:"+mycolor.sa+";\n"; if(mycolor.sh!='')tmp+="scrollbar-highlight-color:"+mycolor.sh+";\n"; tmp+="}\n--><\/style>"; document.forms.color.css_code.value=tmp;}function resetit(){ document.body.style.backgroundColor=''; document.body.style.color=''; document.documentElement.style.scrollbarBaseColor=''; document.documentElement.style.scrollbarFaceColor=''; document.documentElement.style.scrollbar3dLightColor=''; document.documentElement.style.scrollbarDarkShadowColor=''; document.documentElement.style.scrollbarTrackColor=''; document.documentElement.style.scrollbarArrowColor=''; document.documentElement.style.scrollbarHighlightColor=''; mycolor.r=255; mycolor.g=255; mycolor.b=255; mycolor.bg=''; mycolor.c=''; mycolor.sb=''; mycolor.sf=''; mycolor.s3=''; mycolor.sd=''; mycolor.st=''; mycolor.sa=''; mycolor.sh=''; s(); update_source();}var changebgcolor=function(){mycolor.bg=document.body.style.backgroundColor=TTT.style.color;update_source()}var changetextcolor=function(){mycolor.c=document.body.style.color=TTT.style.color;update_source()}var changescrollbarcolor1=function(){mycolor.sb=document.documentElement.style.scrollbarBaseColor=TTT.style.color;update_source()}var changescrollbarcolor2=function(){mycolor.sf=document.documentElement.style.scrollbarFaceColor=TTT.style.color;update_source()}var changescrollbarcolor3=function(){mycolor.s3=document.documentElement.style.scrollbar3dLightColor=TTT.style.color;update_source()}var changescrollbarcolor4=function(){mycolor.sd=document.documentElement.style.scrollbarDarkShadowColor=TTT.style.color;update_source()}var changescrollbarcolor5=function(){mycolor.st=document.documentElement.style.scrollbarTrackColor=TTT.style.color;update_source()}var changescrollbarcolor6=function(){mycolor.sa=document.documentElement.style.scrollbarArrowColor=TTT.style.color;update_source()}var changescrollbarcolor7=function(){mycolor.sh=document.documentElement.style.scrollbarHighlightColor=TTT.style.color;update_source()}document.body.onmouseup=function(){y=''};resetit();--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><form name="color"><table border="3" cellspacing="0" cellpadding="3" align="center" unselectable="on"><caption style="text-align:center">Set Color Wizard - Second Edition</caption><col width="50"><col width="55"><col width="75"><col width="260"><thead><tr><td colspan="4" align="center" style="border-style:solid;border-color:#000000;border-width:3px;text-align:center;width:440px"><b id="ttt" style="background-color:expression(this.style.color)">The color show at here</b></td></tr><tr><th width="50">Color</th><th width="55">Dec</th><th width="75">Hex</th><th width="260">Ratio</th></tr></thead><tbody><tr><th style="color:#FF0000">Red(R)</th><td><input type="text" onchange="r='r';checkb()" size="3" maxlength="3" name="r1" value="0"></td><td><input type="text" onchange="r='r';checka()" size="2" maxlength="2" name="r2" value="00"></td><td><div class="maxcolorbar"><div style="background-color:#800000" id="crb" class="colorbar" onmousedown="r='r';checkc(event)" onmousemove="m(event)" onmouseup="y=''" onselectstart="return false"><div style="background-color:#FF0000;width:255px;height:16px" id="rb"></div></div></div></td></tr><tr><th style="color:#00FF00">Green(G)</th><td><input type="text" onchange="r='g';checkb()" size="3" maxlength="3" name="g1" value="0"></td><td><input type="text" onchange="r='g';checka()" size="2" maxlength="2" name="g2" value="00"></td><td><div class="maxcolorbar"><div style="background-color:#008000" id="cgb" class="colorbar" onmousedown="r='g';checkc(event)" onmousemove="m(event)" onmouseup="y=''" onselectstart="return false"><div style="background-color:#00FF00;width:255px;height:16px" id="gb"></div></div></div></td></tr><tr><th style="color:#0000FF">Blue(B)</th><td><input type="text" onchange="r='b';checkb()" size="3" maxlength="3" name="b1" value="0"></td><td><input type="text" onchange="r='b';checka()" size="2" maxlength="2" name="b2" value="00"></td><td><div class="maxcolorbar" ><div style="background-color:#000080" id="cbb" class="colorbar" onmousedown="r='b';checkc(event)" onmousemove="m(event)" onmouseup="y=''" onselectstart="return false"><div style="background-color:#0000FF;width:256px;height:16px" id="bb"></div></div></div></td></tr></tbody><tfoot><tr><th colspan="2">RGB Value</th><td><input type="text" onchange="check()" size="7" maxlength="7" name="tot" value="#000000"></td><th><input type="button" onclick="changebgcolor()" value="Set Back color" class="button"><input type="button" onclick="changetextcolor()" value="Set Text color" class="button"></th></tr><tr><th colspan="3">Scrollbar setting</th><th><input type="button" onclick="changescrollbarcolor1()" value="Base"class="button"></th></tr><tr><th colspan="4"><input type="button" onclick="changescrollbarcolor2()" value="Face"class="button"><input type="button" onclick="changescrollbarcolor3()" value="3DLight"class="button"></th></tr><tr><th colspan="4"><input type="button" onclick="changescrollbarcolor4()" value="DarkShadow"class="button"><input type="button" onclick="changescrollbarcolor5()" value="Track"class="button"></th><tr></tr><th colspan="4"><input type="button" onclick="changescrollbarcolor6()" value="Arrow"class="button"><input type="button" onclick="changescrollbarcolor7()" value="HighLight"class="button"></th></tr><tr><td colspan="4">Copy the following code to <head></head> can set your site as this color<br><textarea name="css_code" cols="60" rows="10"></textarea></td></tr><tr><th colspan="4"><input type="button" onclick="resetit()" value="Reset" class="button"></th></tr></tfoot></table></form><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->