教程集 > 脚本编程 > javascript > 正文推荐另一种色带制作方法

推荐另一种色带制作方法

发布时间：2023-07-12 编辑：jiaochengji.com

教程集为您提供推荐另一种色带制作方法等资源，欢迎您收藏本站，我们将为您提供最新的推荐另一种色带制作方法资源

提示：您可以先修改部分代码再运行

<html>  <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>推荐另一种色带制作方法</title> </head>  <body>  <input id='Info1'><br> <input id='Info2'><br> <input id='Info3'><br> <span id=ColorDiv style='width:200;height:200;'></span>  <script>  var iW = '70';//共有6种颜色，每种颜色的宽为iW。iW*6为色带的宽。 var iH = '400';//iH为色带的高。  var H,S,V;  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; 	} Info1.value = 'H:' H '  S:' parseInt(S*100) '%   V:' parseInt(V*100) '%'; HSVtoRGB(); RGBtoHTML(); }  var R,G,B;  function HSVtoRGB(){ var r,g,b; var k = (H`)/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; 	} R = parseInt(r*255); G = parseInt(g*255); B = parseInt(b*255); Info2.value = 'R:' R '  G:' G '   B:' B; }  function RGBtoHTML(){ var r=(R>=16)?R.toString(16):('0' R.toString(16)); var g=(G>=16)?G.toString(16):('0' G.toString(16)); var b=(B>=16)?B.toString(16):('0' B.toString(16)); var rgb=r g b; Info3.value='HTML #' rgb.toUpperCase(); ColorDiv.style.background = '#' rgb; }   function window.onload(){ var iHtml = ''; var iL = (document.body.offsetWidth-6*iW)/2; var iT = (document.body.offsetHeight-iH)/2; 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='position:absolute;left:" iL ";top:" iT ";width:" iW*6 ";height:" iH ";' onmousemove=HSV()></span>" document.body.innerHTML  = iHtml; } </script>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
Illustrator绘制有型有色的抽象派玫瑰花教程分享
 【精品推荐】web开发人员应该知道的31个jQuery模态对话框
 Go GC垃圾回收机制
 搜狗浏览器搜狗推荐功能在哪关闭?搜狗推荐怎么关闭
 Photoshop制作两种超搞笑的表情包教程
 jQuery代码优化遍历篇
 Illustrator描边和填充颜色方法分享
 photoshop设计一扇面边框制作教程
 Illustrator制作矢量风格的几何背景人像效果教程
 Illustrator制作彩色半调特效图片多种方法详解分享

上一篇：网页中调用另外网页

[关闭]

推荐另一种色带制作方法

最近更新

浏览排行