示例演示：http://scboy.ik8.com/ColorInOut.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>ColorInOut</title> <script language="javascript"> hexa = new Array(16); for ( var i = 0; i < 10; i++ ) { hexa[i] = i; } hexa[10] = "a"; hexa[11] = "b"; hexa[12] = "c"; hexa[13] = "d"; hexa[14] = "e"; hexa[15] = "f"; // 产生16进制数 function hex(i) { if ( i < 0 ) return "00"; else if ( i > 255 ) return "ff"; else // floor去整数，后面取余数 return "" + hexa[Math.floor( i/16 )] + hexa[i%16]; } // 设置背景颜色 function setbgColor( r, g, b ) { var hr = hex(r); var hg = hex(g); var hb = hex(b); // 渐变到白色 document.bgColor = "#" + hr + hg + hb; // 渐变到红色 // document.bgColor = "#" + hr + "00" + "00"; // 渐变到绿色 // document.bgColor = "#" + "00" + hg + "00"; // 渐变到蓝色 // document.bgColor = "#" + "00" + "00" + hb; } var i = 0; var sr = 0; var sg = 0; var sb = 0; var er = 0; var eg = 0; var eb = 0; var step = 0; // 颜色渐变，step值越大渐变速度越慢 function jianbian( ) { if ( i <= step ) { setbgColor( Math.floor( sr * ((step - i )/step) ) + er * ( i/step ), Math.floor( sg * ((step - i )/step) ) + eg * ( i/step ), Math.floor( sb * ((step - i )/step) ) + eb * ( i/step ) ); i++; // 每过0.1秒调用一次渐变 setTimeout( 'jianbian()', 100 ); } } // 淡出 function danchu() { i = 0; sr = 0; sg = 0; sb = 0; er = 255; eg = 255; eb = 255; step = 255; jianbian( ); } // 淡入 function danru() { i = 0; sr = 255; sg = 255; sb = 255; er = 0; eg = 0; eb = 0; step = 255; jianbian( ); } </script> </head> <body onLoad="danchu()" onUnload="danru()"> <h2>本页使用渐变背景颜色：</h2> 调入本页时，背景颜色从黑色渐变到白色<br> 退出本页时，背景颜色从白色渐变到黑色<br></body></html>
评论