超级实用的网页颜色编辑器_计算转换

超级实用的网页颜色编辑器: 发布时间：2020-11-11编辑：脚本学堂

超级实用的网页颜色编辑器，216色调色板，鼠标单击选择需要的颜色，可得到该颜色的红、绿、蓝颜色值。

<SCRIPT LANGUAGE="<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>">
<!-- Begin
function init() {
ns4 = (document.layers)?true:false;	//判断，记录浏览器类型
ie4 = (document.all)?true:false;
sliderMin = 50;
sliderMax = 306;
rValue=0;
gValue=0;
bValue=0;
r1 = '0';
r2 = '0';
g1 = '0';
g2 = '0';
b1 = '0';
b2 = '0';
Rgb = '0';
rGb = '0';
rgB = '0';
rActive = false;
gActive = false;
bActive = false;
document.onmou<a href=http://www.jb200.com/article/1141.html target=_blank class=infotextkey>sed</a>own = mouseDown		//捕获鼠标事件以便处理
document.onmousemove = mouseMove
document.onmouseup = mouseUp
if (ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
if (ns4) {					//如果浏览器是NS
domRed = document.redSlider;			//记录各对象尺寸数据以使程序调用方便
domRed.xpos = parseInt(domRed.left);
domRed.ypos = parseInt(domRed.top);
domRed.w = domRed.clip.width;
domRed.h = domRed.clip.height;
domGreen = document.greenSlider;
domGreen.xpos = parseInt(domGreen.left);
domGreen.ypos = parseInt(domGreen.top);
domGreen.w = domGreen.clip.width;
domGreen.h = domGreen.clip.height;
domBlue = document.blueSlider;
domBlue.xpos = parseInt(domBlue.left);
domBlue.ypos = parseInt(domBlue.top);
domBlue.w = domBlue.clip.width;
domBlue.h = domBlue.clip.height;
domDisplay = document.display;
domValue = document.hexValue.document.frmValue.valueDisp;
domredValue = document.hexValue.document.frmValue.RgbDisp;
domgreenValue = document.hexValue.document.frmValue.rGbDisp;
domblueValue = document.hexValue.document.frmValue.rgBDisp;
}
else {						//如果浏览器是IE
domRed = redSlider.style;			//记录各对象尺寸数据以使程序调用方便
domRed.xpos = redSlider.offsetLeft;
domRed.ypos = redSlider.offsetTop;
domRed.w = redSlider.clientWidth;
domRed.h = redSlider.clientHeight;
domGreen = greenSlider.style;
domGreen.xpos = greenSlider.offsetLeft;
domGreen.ypos = greenSlider.offsetTop;
domGreen.w = greenSlider.clientWidth;
domGreen.h = greenSlider.clientHeight;
domBlue = blueSlider.style;
domBlue.xpos = blueSlider.offsetLeft;
domBlue.ypos = blueSlider.offsetTop;
domBlue.w = blueSlider.clientWidth;
domBlue.h = blueSlider.clientHeight;
domDisplay = display;
domValue = frmValue.valueDisp;
domredValue = frmValue.RgbDisp;
domgreenValue = frmValue.rGbDisp;
domblueValue = frmValue.rgBDisp;
}
//建立10TO16进制的转换数组
hexArray = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
}
//捕获鼠标按下的事件
function mouseDown(e) {
if ((ns4 && e.which!=1) || (ie4 && event.button!=1)) return true;	//如果不是左键或者浏览器不兼容则退出
var x = (ns4)? e.pageX : event.x+document.body.scrollLeft;		//取得鼠标当前位置
var y = (ns4)? e.pageY : event.y+document.body.scrollTop;
//如果鼠标在红色拖动块上
if (x > domRed.xpos && x < domRed.xpos+domRed.w && y > domRed.ypos && y < domRed.ypos+domRed.h){
rActive = true;		//设定状态标志
dragObject = domRed;	//记录操作对象
}
//如果鼠标在绿色拖动块上
if (x > domGreen.xpos && x < domGreen.xpos+domGreen.w && y > domGreen.ypos && y < domGreen.ypos+domGreen.h){
gActive = true;
dragObject = domGreen;
}
//如果鼠标在蓝色拖动块上
if (x > domBlue.xpos && x < domBlue.xpos+domBlue.w && y > domBlue.ypos && y < domBlue.ypos+domBlue.h){
bActive = true;
dragObject = domBlue;
}
if (rActive==true || gActive==true || bActive==true){		//如果处于拖动状态
if (x>=dragObject.xpos && x<=dragObject.xpos+dragObject.w) {	//如果鼠标没有脱离拖动状态
dragObject.dragOffsetX = x-dragObject.xpos			//调整滑块位置，跟着鼠标移动
}
return false							//返回false值
}
else {								//否则(不在拖动中)
return true							//返回true
   }
}
//处理鼠标拖动
function mouseMove(e) {
var x = (ns4)? e.pageX : event.x+document.body.scrollLeft;	//取鼠标坐标
var y = (ns4)? e.pageY : event.y+document.body.scrollTop;
if (rActive) {					//如果红色滑块正被拖动
rMoveTo = x-dragObject.dragOffsetX;		//取红色滑块应该移动到的位置
if (rMoveTo > sliderMax) rMoveTo = 306;		//如果超出边界则强制移动到边界处
if (rMoveTo < sliderMin) rMoveTo = 50;
domRed.xpos = rMoveTo;				//更改滑块位置
domRed.left = domRed.xpos;
rValue = (domRed.xpos+4)-50;			//计算红色的<a href=http://www.jb200.com/zt/yansezhi/ target=_blank class=infotextkey>颜色值</a>
calcValue(rMoveTo-50, 'red');			//更新各项显示
}
if (gActive) {					//如果绿色滑块正被拖动
gMoveTo = x-dragObject.dragOffsetX;
if (gMoveTo > sliderMax) gMoveTo = sliderMax;
if (gMoveTo < sliderMin) gMoveTo = sliderMin;
domGreen.xpos = gMoveTo;
domGreen.left = domGreen.xpos;
gValue = (domGreen.xpos+4)-50;
calcValue(gMoveTo-50, 'green');
}
if (bActive) {					//如果蓝色滑块正被拖动
bMoveTo = x-dragObject.dragOffsetX;
if (bMoveTo > sliderMax) bMoveTo = sliderMax;
if (bMoveTo < sliderMin) bMoveTo = sliderMin;
domBlue.xpos = bMoveTo;
domBlue.left = domBlue.xpos;
bValue = (domBlue.xpos+4)-50;
calcValue(bMoveTo-50, 'blue');
}
return true					//返回true
}

function mouseUp(e) {
var x = (ns4)? e.pageX : event.x+document.body.scrollLeft	//计算鼠标位置坐标
var y = (ns4)? e.pageY : event.y+document.body.scrollTop
rActive = false;						//清除拖动状态标志
gActive = false;
bActive = false;
return true
}

<title>颜色编辑器</title>
</head>

<div id="redSlider"></div>
<div id="greenSlider"></div>
<div id="blueSlider"></div>
<div id="colorTable">
<table border=1 cellpadding=0 cellspacing=0 bordercolorlight="#000000" bordercolor="#FFFFFF">
<tr><td colspan=18 align=center id="subtext" bgcolor="#EEEEEE">216色调色板</td></tr>
<script>

</script>

</table>

</div>
<div id="display"></div>
<div id="titleBar">
<table border=1 cellpadding=0 cellspacing=0 width=320 bordercolorlight="#000000" bordercolor="#FFFFFF">
<tr>
<td id="title" bgcolor="#EEEEEE"><font size=2>颜色编辑器</font></td>
</tr>
</table>
</div>
<div id="hexValue"><form name="frmValue">
<table border=1 cellpadding=0 cellspacing=0 width=320 bgcolor=#EEEEEE bordercolorlight="#000000" bordercolor="#FFFFFF">
<tr>
<td align=center>
<table border=1 cellpadding=0 cellspacing=0 bordercolorlight="#000000" bordercolor="#FFFFFF">
<tr>
<td id="subtext">红</td>
<td id="subtext">绿</td>
<td id="subtext">蓝</td>
</tr>
<tr>
<td><input type=text size=3 maxlength=3 name="RgbDisp" value="0" onBlur="manualSet(this.value,'red');"></td>
<td><input type=text size=3 maxlength=3 name="rGbDisp" value="0" onBlur="manualSet(this.value,'green');"></td>
<td><input type=text size=3 maxlength=3 name="rgBDisp" value="0" onBlur="manualSet(this.value,'blue');"></td>
</tr>
</table>
</td>
<td align=center>
<table border=1 cellpadding=0 cellspacing=0 bordercolorlight="#000000" bordercolor="#FFFFFF">
<tr>
<td id="subtext">颜色代码</td>
</tr>
<tr>
<td><input type=text size=6 maxlength=6 name="valueDisp" value="000000" onBlur="convertHex();"></td>
</tr>
</table>
</td>
</tr>
</table></form>
</div>
<div style="position: absolute; top: 213; left: 54; width: 386; height: 26">
  <table width="320" border=1 cellpadding=0 cellspacing=0 bordercolorlight="#000000" bordercolor="#FFFFFF">
    <tr>
      <td width="100%" bgcolor="#EEEEEE"><font size=2><marquee  behavior="alternate" scrolla<a href=http://www.jb200.com/<a href=http://www.jb200.com/os/linux/ target=_blank class=infotextkey>linux</a>jishu/9952.html target=_blank class=infotextkey>mount</a>="1">很不错的一个javascript特效吧？</marquee></font></td>
    </tr>
  </table>
</div>
</body>
</html>

提示：可修改代码后再运行!

上一篇：JavaScript实现长度单位转换
下一篇：返回列表

与超级实用的网页颜色编辑器有关的文章

本文标题：超级实用的网页颜色编辑器
本页链接：http://www.jb200.com/tx/161.html

浏览排行

栏目分类

热点文章

超级实用的网页颜色编辑器