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

来源：互联网 2023-03-17 00:48:03 89

Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。

工具/原料

txt文本文档或者 HTML文档/

方法/步骤

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

html>

head>

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

/head>

body>

div id="zy">

div id="login">/div>

div id="daohang">

ul>

li>a href="index.html">首页/a>/li>

li>a href="jianjie.html">七夕简介/a>/li>

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

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

li>a href="#">诗词& 歌谣/a>/li>

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

/ul>

/div>

/body>

/html>

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

1该信息未经授权抓取自百度经验

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

script language="JavaScript">

!--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]背景调色板

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

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

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

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

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

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

飘雪特效|下一篇：

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： JAVASCRIPT

上一篇：Javascript脚本特效示例：[4]图片渐现特效下一篇：JavaScript(js)对象常用操作

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

工具/原料

方法/步骤

热门文章

标签列表