Javascript脚本特效示例：[2]背景调色板

2026-01-18 06:06:07

1、在桌机上新建文本文档，命名为晓博JavaScript特效测试.txt，在文本文档里中入HTML文档的基本元素如下，并保存。

<html>

<head>

<title>晓博JavaScript飘雪特效测试</title>

</head>

<body>

<ul>

<li><a href="#">七夕节传说</a></li>

<li><a href="#">七夕节习俗</a></li>

<li><a href="#">七夕节寄语</a></li>

</ul>

</div>

</body>

</html>

Javascript脚本特效示例：[2]背景调色板

2、把如下代码加入<body>区域中，，并重名文档为HTML文件

<!--var hex = new Array(6)

// assign non-dithered descriptors

hex[0] = "FF"

hex[1] = "CC"

hex[2] = "99"

hex[3] = "66"

hex[4] = "33"

hex[5] = "00"

// accept triplet string and display as background color

function display(triplet) {

// set color as background color

document.bgColor = '#' + triplet

// display the color hexadecimal triplet

alert('现在的背景色是 #'+triplet)

}

// draw a single table cell based on all descriptors

function drawCell(red, green, blue) {

// open cell with specified hexadecimal triplet background color

document.write('<TD BGCOLOR="#' + red + green + blue + '">')

// open a hypertext link with javascript: scheme to call display function

document.write('<A HREF="javascript:display(\'' + (red + green + blue) + '\')">')

// print transparent image (use any height and width)

document.write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12 WIDTH=12>')

// close link tag

document.write('</A>')

// close table cell

document.write('</TD>')

}

// draw table row based on red and blue descriptors

function drawRow(red, blue) {

// open table row

document.write('<TR>')

// loop through all non-dithered color descripters as green hex

for (var i = 0; i < 6; ++i) {

drawCell(red, hex[i], blue)

}

// close current table row

document.write('</TR>')

}

// draw table for one of six color cube panels

function drawTable(blue) {

// open table (one of six cube panels)

document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>')

// loop through all non-dithered color descripters as red hex

for (var i = 0; i < 6; ++i) {

drawRow(hex[i], blue)

}

// close current table

document.write('</TABLE>')

}

// draw all cube panels inside table cells

function drawCube() {

// open table

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

// loop through all non-dithered color descripters as blue hex

for (var i = 0; i < 6; ++i) {

// open table cell with white background color

document.write('<TD BGCOLOR="#FFFFFF">')

// call function to create cube panel with hex[i] blue hex

drawTable(hex[i])

// close current table cell

document.write('</TD>')

}

// designed by 1wangxiaobo@163.com

document.write('</TR></TABLE>')

}

// call function to begin execution

drawCube()

// -->

</script>

Javascript脚本特效示例：[2]背景调色板

3、用IE浏览器打开晓博JavaScript特效测试.html文件，可以看到背景调色板特效，如下图

Javascript脚本特效示例：[2]背景调色板

4、点击其中任何一个颜色，可以看到页面颜色变换了，如下图

Javascript脚本特效示例：[2]背景调色板

5、也可以点别的颜色，改变页面的颜色。

Javascript脚本特效示例：[2]背景调色板

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。