⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 js21.htm

📁 搜集的很多javascript实例及教程
💻 HTM
字号:
🔍 
<!--Saved  from《网页设计师》pageone.yeah.net,作者：阿捷ajie@nease.net-->
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="Javascript,Javascript,Javascript,Javascript,Javascript">
<!--  以下代码是设定此页的超链接样式    -->
<style type="text/css"><!-- A:link {text-decoration: none; color:#000000}
     A:visited {text-decoration: none; color: #000000}
     A:active {text-decoration: none; color: #FF0000}
     A:hover {text-decoration: underline; color: FF0000}
       body{font-size=9pt}
	        TH{FONT-SIZE: 9pt}
           TD{ FONT-SIZE: 9pt}
       -->
</style>
<title>色阶板</title>
</head>

<body bgcolor="#FFFFFF">

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%" bgcolor="#006DA2"><!--webbot bot="ImageMap" rectangle="(8,2) (105,34) http://www.pageone.yeah.net" src="../images/jlogo3.GIF" alt="网页设计师" border="0" width="111" height="36" startspan --><MAP NAME="FrontPageMap"><AREA SHAPE="RECT" COORDS="8, 2, 105, 34" HREF="http://www.pageone.yeah.net"></MAP><a href="../_vti_bin/shtml.exe/js/js21.htm/map"><img ismap usemap="#FrontPageMap" border="0" height="36" alt="网页设计师" src="../images/jlogo3.GIF" width="111"></a><!--webbot bot="ImageMap" endspan i-checksum="13178" --></td>
    <td width="50%" bgcolor="#006DA2"><p align="right"><br>
    <a href="index2.htm">上一页</a>　<a href="js32.htm">下一页</a>　<a href="../index.html">返回首页</a></td>
  </tr>
</table>

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="5%" bgcolor="#B7D1F4" valign="top"></td>
    <td width="16%" bgcolor="#006DA2" valign="top"><table border="0" width="100%" cellspacing="4" cellpadding="0">
      <tr>
        <td width="16%"></td>
        <td width="84%"></td>
      </tr>
      <tr>
        <td width="16%"><font color="#ffff80">★</font></td>
        <td width="84%"><font face="Arial"><a href="index.htm">JAVASCRIPT</a></font></td>
      </tr>
      <tr>
        <td width="16%"><font color="#ffff80">★</font></td>
        <td width="84%"><font face="Arial"><a href="../frontpage/index.htm">FRONTPAGE</a></font></td>
      </tr>
      <tr>
        <td width="16%"><font color="#ffff80">★</font></td>
        <td width="84%"><font face="Arial"><a href="../dhtml/index.htm">DHTML</a></font></td>
      </tr>
      <tr>
        <td width="16%"><font color="#ffff80">★</font></td>
        <td width="84%"><font face="Arial"><a href="../photoshop/index.htm">PHOTOSHOP</a></font></td>
      </tr>
      <tr>
        <td width="16%"><font color="#ffff80">★</font></td>
        <td width="84%"><font face="Arial"><a href="../fireworks/index.htm">FIREWORKS</a></font></td>
      </tr>
      <tr>
        <td width="16%"><font color="#ffff80">★</font></td>
        <td width="84%"><font face="Arial"><a href="../flash/index.htm">FLASH</a></font></td>
      </tr>
      <tr>
        <td width="16%"><font color="#ffff80">★</font></td>
        <td width="84%"><font face="Arial"><a href="../cgi/index.htm">CGI</a></font></td>
      </tr>
      <tr>
        <td width="16%" a><font color="#ffff80">★</font></td>
        <td width="84%"><font face="Arial"><a href="../download/index.htm">DOWNLOAD</a></font></td>
      </tr>
      <tr>
        <td width="16%"></td>
        <td width="84%"></td>
      </tr>
    </table>
    </td>
    <td width="79%" valign="top"><table border="0" width="100%" cellspacing="1" cellpadding="0">
      <tr>
        <td width="12%" bgcolor="#B7D1F4"><p align="center"><font color="#FF8000">名称</font></td>
        <td width="88%" bgcolor="#FFFFFF"><p align="center">色阶板</td>
      </tr>
      <tr>
        <td width="12%" bgcolor="#B7D1F4" valign="top"><p align="center"><font color="#FF8000">实例</font></td>
        <td width="88%"><table border="1" width="100%" bordercolor="#B7D1F4" cellspacing="0" cellpadding="0">
          <tr>
            <td width="100%"><p align="center"><script LANGUAGE="JavaScript">
<!--

// Copyright (c) 1996-1997 Tomer Shiran. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.geocities.com/~yehuda/

// create 6-element array
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('Background color is now ' + 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>')
	}

	// close table row and table
	document.write('</TR></TABLE>')
}

// call function to begin execution
drawCube()

// -->
</script></p>
            <p align="center">点击色块，显示16进制色彩代码</td>
          </tr>
        </table>
        </td>
      </tr>
      <tr>
        <td width="12%" bgcolor="#B7D1F4" valign="top"><p align="center"><font color="#FF8000">教程</font></td>
        <td width="88%"><table border="1" width="100%" cellspacing="0" cellpadding="0" bordercolor="#B7D1F4">
          <tr>
            <td width="100%" bgcolor="#FFFFFF"><br>
            <p>第一步：拷贝下面的代码到你的html文件的&lt;body&gt;和&lt;/body&gt;之间；</p>
            <blockquote>
              <form name="copy2">
                <p><textarea rows="5" name="S1" cols="39" onMouseOver="this.focus()" onFocus="this.select()">&lt;SCRIPT LANGUAGE=&quot;JavaScript&quot;&gt;
<!--// Copyright (c) 1996-1997 Tomer Shiran. All rights reserved.// Permission given to use the script provided that this notice remains as is.// Additional scripts can be found at http://www.geocities.com/~yehuda/// create 6-element arrayvar hex = new Array(6)// assign non-dithered descriptorshex[0] = "FF"hex[1] = "CC"hex[2] = "99"hex[3] = "66"hex[4] = "33"hex[5] = "00"// accept triplet string and display as background colorfunction display(triplet) {	// set color as background color	document.bgColor = '#' + triplet	// display the color hexadecimal triplet	alert('Background color is now ' + triplet)}// draw a single table cell based on all descriptorsfunction 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 descriptorsfunction 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 panelsfunction 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 cellsfunction 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>')	}	// close table row and table	document.write('</TR></TABLE>')}// call function to begin executiondrawCube()// -->
&lt;/SCRIPT&gt;</textarea></p>
              </form>
            </blockquote>
            <p>说明：方便你选取同一色阶的色彩，很实用！</p>
            <p>　</td>
          </tr>
        </table>
        </td>
      </tr>
      <tr>
        <td width="12%" bgcolor="#B7D1F4" valign="top"><p align="center"><font color="#FF8000">下载</font></td>
        <td width="88%" bgcolor="#FFFFFF">　请到下载中心</td>
      </tr>
      <tr>
        <td width="12%" bgcolor="#B7D1F4" valign="top"><p align="center"><font color="#FF8000">版权</font></td>
        <td width="88%" bgcolor="#FFFFFF">　阿捷编辑整理</td>
      </tr>
    </table>
    </td>
  </tr>
</table>

<table border="0" width="100%" cellspacing="0" cellpadding="0" height="39">
  <tr>
    <td width="21%" bgcolor="#006DA2" height="25"><font color="#0072A8">.</font></td>
    <td width="79%" bgcolor="#E6F2FF" height="25" colspan="2"><p align="right"><br>
    <a href="index2.htm">上一页</a>　<a href="js32.htm">下一页</a>　<a href="js21.htm#top">回到页首</a></td>
  </tr>
  <tr>
    <td width="21%" height="3"></td>
    <td width="79%" height="3" align="center" colspan="2"><font color="#FFFFFF">.</font></td>
  </tr>
  <tr>
    <td width="21%" height="2"></td>
    <td width="27%" height="7" align="center" rowspan="2"><p align="right"><img src="../images/jlogo4.GIF" alt="jlogo4.GIF (1066 bytes)" WIDTH="26" HEIGHT="26"></td>
    <td width="52%" height="2">《<a href="http://pageone.yeah.net">网页设计师</a>》 
    阿捷制作 版权所有</td>
  </tr>
  <tr>
    <td width="21%" height="5"></td>
    <td width="52%" height="5"><font face="Arial">&copy;1999-2000</font> <font face="Arial">All 
    Rights Reserved</font></td>
  </tr>
  <tr>
    <td width="21%" height="4"></td>
    <td width="79%" height="4" align="center" colspan="2">本站教程免费学习，引用请注明出处，禁止抄袭。</td>
  </tr>
</table>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -