当前位置:编程学习 > JS >>

很炫的网页背景调色器

用JavaScript实现的很弦的网页背景调色器,风格类似于系统的颜色调板,鼠标放到任意一个颜色方格中,点击一下,人的风页就变为了你选择的颜色,而且它的代码很简洁,有时候我们能用得上。
答案:<html>
<head>
<title>背景调色板</title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
</head>
<body>
<center>
  <font size="5">很炫的网页背景调色板</font>
</center>
<br>
<br><center>
<table border=1 cellpadding="5" bordercolor=#336600 bgcolor="#FFFF66" style="border-collapse: collapse" borderlight=green>
<tr><td align=center><a href="#"><font size=3 color=red face="Arial">鼠标放上去看看状态栏的变化</font></a></td>
</tr>
<tr><td align=center><script language="JavaScript">
<!--
var hex = new Array(6)

hex[0] = "FF"
hex[1] = "CC"
hex[2] = "99"
hex[3] = "66"
hex[4] = "33"
hex[5] = "00"
function display(triplet) {
	document.bgColor = '#' + triplet
	alert('您选择的背景色是 #'+triplet)
}
function drawCell(red, green, blue) {
	document.write('<TD BGCOLOR="#' + red + green + blue + '">')
	document.write('<A HREF="javascript:display(\'' + (red + green + blue) + '\')">')
	document.write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12 WIDTH=12>')
	document.write('</A>')
	document.write('</TD>')
}

function drawRow(red, blue) {
	document.write('<TR>')
	for (var i = 0; i < 6; ++i) {
		drawCell(red, hex[i], blue)
	}
	document.write('</TR>')
}
function drawTable(blue) {
	document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>')

	for (var i = 0; i < 6; ++i) {
		drawRow(hex[i], blue)
	}
	document.write('</TABLE>')	
}

function drawCube() {
	document.write('<TABLE CELLPADDING=5 CELLSPACING=0 BORDER=1><TR>')

	for (var i = 0; i < 6; ++i) {
		document.write('<TD BGCOLOR="#FFFFFF">')
		drawTable(hex[i])

		document.write('</TD>')
	}
	document.write('</TR></TABLE>')
}
drawCube()
// -->
  </script>
 </td></tr></table></center>
<br>
<center>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
function goHist(a) 
{
   history.go(a);

}
//-->
</script></center>
<br>
<br>
</body>
</html>

上一个:CSS背景渐变,上下渐变效果
下一个:CSS3算命罗盘

CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,