使用调色板更换页面背景

本实例使用JavaScript在网页上放置一些调色板,通过单击鼠标,就能实现对于当前网页背景颜色的修改。本节主要涉及的JavaScript语法如下。

document.write()是一个输出流,执行的时候,会自动调用对象的toString()方法,该方法执行以后,会在页面输入参数定义的内容。

本实例主要代码如下:

<script type="text/javascript">

/*定义含有6个元素的非抖动元素符数组*/

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="javascript:display(\'' + red + green + blue) + '\')">')

document.write('</A>')document.write('</td>')

}

/*画调色板中的行*/

function drawRow(red, blue){

document.write('<tr>') for (var i = 0; i<6; ++i){

drawCell(red, blue) {

document.write('<tr>') for (var i = 0; i < 6; ++i) {

drawCell(red, hex[i], blue)

}

/*画某个调色板*/

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>

W3School - 领先的 Web 技术教程站点

在 W3School,你可以找到你所需要的所有网站建设教程。

请点击这里