作者：佚名 時(shí)間： 2003-11-07 文檔類型：原創(chuàng) 來(lái)自：藍(lán)色理想
隨著Web技術(shù)的不斷發(fā)展，其功能越來(lái)越強(qiáng)大，以至于能完成許多應(yīng)用程序的工作！Web技術(shù)以其簡(jiǎn)便、快捷的優(yōu)越性，使很多應(yīng)用程序在向Web技術(shù)轉(zhuǎn)變。如Microsoft近幾年的產(chǎn)品：Windows Media 服務(wù)管理器直接應(yīng)用網(wǎng)頁(yè)式管理，而IIS管理也可通過(guò)網(wǎng)頁(yè)來(lái)完成。
當(dāng)人們都習(xí)慣一種東西時(shí)，突然冒出個(gè)新東西會(huì)很不適應(yīng)。所以不但要用網(wǎng)頁(yè)來(lái)實(shí)現(xiàn)應(yīng)用程序的功能，而且界面上也要相似，這樣更容易使人接受。下面我們就舉幾個(gè)模仿應(yīng)用程序界面的例子。希望大家不僅僅局限與這幾個(gè)例子，充分發(fā)揮自己的想象力，設(shè)計(jì)出更多，更好的界面！
1、模擬系統(tǒng)顏色選擇框
運(yùn)行代碼框<HTML><HEAD><TITLE>顏色</TITLE> <META content="text/html; charset=gb2312" http-equiv=Content-Type> <STYLE type=text/css>TD { FONT-SIZE: 10.8pt } BODY { FONT-SIZE: 10.8pt } BUTTON { WIDTH: 5em } </STYLE> <SCRIPT language=JavaScript> var SelRGB = ''; var DrRGB = ''; var SelGRAY = '120'; var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'); function ToHex(n) { var h, l; n = Math.round(n); l = n % 16; h = Math.floor((n / 16)) % 16; return (hexch[h] + hexch[l]); } function DoColor(c, l) { var r, g, b; r = '0x' + c.substring(1, 3); g = '0x' + c.substring(3, 5); b = '0x' + c.substring(5, 7); if(l > 120) { l = l - 120; r = (r * (120 - l) + 255 * l) / 120; g = (g * (120 - l) + 255 * l) / 120; b = (b * (120 - l) + 255 * l) / 120; }else { r = (r * l) / 120; g = (g * l) / 120; b = (b * l) / 120; } return '#' + ToHex(r) + ToHex(g) + ToHex(b); } function EndColor() { var i; if(DrRGB != SelRGB) { DrRGB = SelRGB; for(i = 0; i <= 30; i ++) GrayTable.rows(i).bgColor = DoColor(SelRGB, 240 - i * 8); } SelColor.value = DoColor(RGB.innerText, GRAY.innerText); ShowColor.bgColor = SelColor.value; } </SCRIPT> <SCRIPT event=onclick for=ColorTable language=JavaScript> SelRGB = event.srcElement.bgColor; EndColor(); </SCRIPT> <SCRIPT event=onmouseover for=ColorTable language=JavaScript> RGB.innerText = event.srcElement.bgColor; EndColor(); </SCRIPT> <SCRIPT event=onmouseout for=ColorTable language=JavaScript> RGB.innerText = SelRGB; EndColor(); </SCRIPT> <SCRIPT event=onclick for=GrayTable language=JavaScript> SelGRAY = event.srcElement.title; EndColor(); </SCRIPT> <SCRIPT event=onmouseover for=GrayTable language=JavaScript> GRAY.innerText = event.srcElement.title; EndColor(); </SCRIPT> <SCRIPT event=onmouseout for=GrayTable language=JavaScript> GRAY.innerText = SelGRAY; EndColor(); </SCRIPT> <SCRIPT event=onclick for=Ok language=JavaScript> window.returnValue = SelColor.value; window.close(); </SCRIPT> <META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD> <BODY bgColor=menu> <DIV align=center> <CENTER> <TABLE border=0 cellPadding=0 cellSpacing=10> <TBODY> <TR> <TD> <TABLE border=0 cellPadding=0 cellSpacing=0 id=ColorTable style="CURSOR: hand"> <SCRIPT language=JavaScript> function wc(r, g, b, n) { r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15; g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15; b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15; document.write('<TD BGCOLOR=#' + ToHex(r) + ToHex(g) + ToHex(b) + ' height=8 width=8></TD>'); } var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0); for(i = 0; i < 16; i ++) { document.write('<TR>'); for(j = 0; j < 30; j ++) { n1 = j % 5; n2 = Math.floor(j / 5) * 3; n3 = n2 + 3; wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)), (cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)), (cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i); } document.writeln('</TR>'); } </SCRIPT> <TBODY></TBODY></TABLE></TD> <TD> <TABLE border=0 cellPadding=0 cellSpacing=0 id=GrayTable style="CURSOR: hand"> <SCRIPT language=JavaScript> for(i = 255; i >= 0; i -= 8.5) document.write('<TR BGCOLOR=#' + ToHex(i) + ToHex(i) + ToHex(i) + '><TD TITLE=' + Math.floor(i * 16 / 17) + ' height=4 width=20></TD></TR>'); </SCRIPT> <TBODY></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></DIV> <DIV align=center> <CENTER> <TABLE border=0 cellPadding=0 cellSpacing=10> <TBODY> <TR> <TD align=middle rowSpan=2>選中色彩 <TABLE border=1 cellPadding=0 cellSpacing=0 height=30 id=ShowColor width=40> <TBODY> <TR> <TD></TD></TR></TBODY></TABLE></TD> <TD rowSpan=2>基色: <SPAN id=RGB></SPAN><BR>亮度: <SPAN id=GRAY>120</SPAN><BR>代碼: <INPUT id=SelColor size=7></TD> <TD><BUTTON id=Ok type=submit>確定</BUTTON></TD></TR> <TR> <TD><BUTTON onclick=window.close();>取消</BUTTON></TD></TR></TBODY></TABLE></CENTER></DIV></BODY></HTML> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
2、web216顏色框
運(yùn)行代碼框<style> #colorTable td {width:7;height:9;cursor:hand;} </style> <body> <div style="background-color:#000000;padding-left:6px;padding-right:6px;width:214"> <table id="ColorTable" align="left" border='1' style='border-collapse:collapse;margin-right:6px;' bordercolor='black'> <tr><td bgcolor="#000000"></td></tr> <tr><td bgcolor="#333333"></td></tr> <tr><td bgcolor="#666666"></td></tr> <tr><td bgcolor="#999999"></td></tr> <tr><td bgcolor="#cccccc"></td></tr> <tr><td bgcolor="#ffffff"></td></tr> <tr><td bgcolor="#ff0000"></td></tr> <tr><td bgcolor="#00ff00"></td></tr> <tr><td bgcolor="#0000ff"></td></tr> <tr><td bgcolor="#ffff00"></td></tr> <tr><td bgcolor="#00ffff"></td></tr> <tr><td bgcolor="#ff00ff"></td></tr> </table> <script> oColorStr=new Array("00","33","66","99","cc","ff"); document.write("<table id='colorTable' border='1' style='border-collapse:collapse' bordercolor='black'>"); for(j=0;j<oColorStr.length;j++){ document.write("<tr>"); for(m=0;m<3;m++){ for(i=0;i<oColorStr.length;i++){ document.write("<td bgcolor=\'"+oColorStr[m]+oColorStr[i]+oColorStr[j]+"\'></td>") } } document.write("</tr>"); } for(j=0;j<oColorStr.length;j++){ document.write("<tr>"); for(m=3;m<6;m++){ for(i=0;i<oColorStr.length;i++){ document.write("<td bgcolor=\'"+oColorStr[m]+oColorStr[i]+oColorStr[j]+"\'></td>") } } document.write("</tr>"); } document.write("</table>"); </script> </div> <br> <span id="oColorShow" style="border:solid 1px #000;width:40;height:12"></span> <span id="oColorValue" style="font:10px verdana;"></span> <script> document.body.onmousemove=function(){srcElem=event.srcElement;if(srcElem.tagName=="TD"){oColorValue.innerText=srcElem.bgColor;oColorShow.style.backgroundColor=srcElem.bgColor;srcElem.title=srcElem.bgColor}} </script> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
3、模擬系統(tǒng)選項(xiàng)卡
運(yùn)行代碼框<html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <style type="text/css"> <!-- body{font-family: 'MS Shell Dlg', 宋體, Tahoma;font-size: 12px;background-color: #336699;color:#000000;} td, div, input, textarea{font-family: 'MS Shell Dlg', 宋體, Tahoma;font-size: 12px;cursor: default;} .title{background-color: #000080;color:#fdf7d3;padding: 1;font-family:宋體;font-size:12px;} .up{background-color: #cccccc;color:#000000;border: 2px outset #ffffff} .down{background-color: #cccccc;border:2px inset #ffffff} .up1{background-color: #cccccc;color: #000000;border: 1px outset #ffffff} .down1{background-color:#cccccc;border:1px inset #ffffff} .l { background-color: #cccccc; height: 18px; border-left: 2px outset #ffffff; border-right: 2px outset #ffffff; color:#000000; border-top: 2px outset #ffffff; padding-top: 2;height:18} .lc { background-color: #cccccc; height: 18px; border-left: 2px outset #ffffff; border-right: 2px outset #ffffff; color:#000000; border-top: 2px outset #ffffff; padding-top: 2;height:20} .l-h { background-color: #cccccc; border-left: 2px outset #ffffff ; border-top: 2px outset #ffffff;color:#000000; } .l-c { background-color: #cccccc; border-top: 2px outset #ffffff } .l-r { background-color: #cccccc; border-right: 2px outset #ffffff; border-top: 2px outset #ffffff;color:#000000;} .l-hc { background-color: #cccccc; border-left: 2px outset #ffffff;color:#000000;} .l-cc { background-color: #cccccc;color:#000000; } .l-rc { background-color: #cccccc; border-right: 2px outset #ffffff;color:#000000;} td{color:#000000;} --> </style> <title>顯示屬性</title> </head> <body style="border:outset 1 #ffffff;margin: 0;background-color: #cccccc;padding:3px" scroll=no> <SCRIPT LANGUAGE="JavaScript"> <!-- function restore() { td1.className="l";td2.className="l";td3.className="l";td4.className="l";td5.className="l";td6.className="l"; td_1.className="l-h";td_2.className="l-c";td_3.className="l-c";td_4.className="l-c";td_5.className="l-c";td_6.className="l-c"; w1.style.display="none";w2.style.display="none";w3.style.display="none";w4.style.display="none";w5.style.display="none";w6.style.display="none"; } function c1() { td1.className="lc"; td_1.className="l-hc"; w1.style.display="block"; } function c2() { td2.className="lc"; td_2.className="l-cc"; w2.style.display="block"; } function c3() { td3.className="lc"; td_3.className="l-cc"; w3.style.display="block"; } function c4() { td4.className="lc"; td_4.className="l-cc"; w4.style.display="block"; } function c5() { td5.className="lc"; td_5.className="l-cc"; w5.style.display="block"; } function c6() { td6.className="lc"; td_6.className="l-cc"; w6.style.display="block"; } file://--> </SCRIPT> <form name="free" method="post" target="_target"> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" width="400" height="61"> <tr> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c1();><div id="td1" class="lc">背景</div></td> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c2();><div id="td2" class="l">屏保</div></td> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c3();><div id="td3" class="l">外觀</div></td> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c4();><div id="td4" class="l">Web</div></td> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c5();><div id="td5" class="l">效果</div></td> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c6();><div id="td6" class="l">設(shè)置</div></td> <td width="50" height="20" align="center" valign="bottom" ></td> <td width="50" height="20" align="center" valign="bottom"></td> </tr> <tr style=""> <td width="50" height="1" align="center" class="l-hc" id="td_1" > </td> <td width="50" height="1" align="center" class="l-c" id="td_2"> </td> <td width="50" height="1" align="center" class="l-c" id="td_3"> </td> <td width="50" height="1" align="center" class="l-c" id="td_4"> </td> <td width="50" height="1" align="center" class="l-c" id="td_5"> </td> <td width="50" height="1" align="center" class="l-c" id="td_6"> </td> <td width="50" height="1" align="center" class="l-c" id="td_"> </td> <td width="50" height="1" align="center" class="l-r" id="td_"> </td> </tr> <tr> <td width="398" height="360" class="up" colspan="8" style="border-top-style: solid; border-top-width: 0; padding: 5"> <p align="center"> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" width="100%" height="325"> <tr> <td width="100%" height="280"> <div align="center"> <center> <div style="display:" id=w1><h1>1</h1></div> <div style="display:none" id=w2><h1>2</h1></div> <div style="display:none" id=w3><h1>3</h1></div> <div style="display:none" id=w4><h1>4</h1></div> <div style="display:none" id=w5><h1>5</h1></div> <div style="display:none" id=w6><h1>6</h1></div> </center> </div> </td> </tr> </table> </div> </td> </tr> </center> <tr> <td width="398" height="37" colspan="8" style="border-top-style: solid; border-top-width: 0; padding: 5"> <p align="right"><input type="button" value="確定" name="_ok" style="width: 60;height:22" class=up> <input type="button" value="取消" name="_cancel" style="width: 60;height:22" class=up onclick="window.close();"> <input type="button" value="應(yīng)用(A)" name="_apply" style="width: 60;height:22" disabled class=up> </td> </tr> </table> </div> </form> </body> </html> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
以上3個(gè)例子結(jié)合ShowModelessDialog使用，效果更加出色！
出處：藍(lán)色理想 責(zé)任編輯：panliu888
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
藍(lán)色理想版權(quán)申明：除部分特別聲明不要轉(zhuǎn)載，或者授權(quán)我站獨(dú)家播發(fā)的文章外，大家可以自由轉(zhuǎn)載我站點(diǎn)的原創(chuàng)文章，但原作者和來(lái)自我站的鏈接必須保留（非我站原創(chuàng)的，按照原來(lái)自一節(jié)，自行鏈接）。文章版權(quán)歸我站和作者共有。
轉(zhuǎn)載要求：轉(zhuǎn)載之圖片、文件，鏈接請(qǐng)不要盜鏈到本站，且不準(zhǔn)打上各自站點(diǎn)的水印，亦不能抹去我站點(diǎn)水印。
特別注意：本站所提供的攝影照片，插畫(huà)，設(shè)計(jì)作品，如需使用，請(qǐng)與原作者聯(lián)系，版權(quán)歸原作者所有，文章若有侵犯作者版權(quán)，請(qǐng)與我們聯(lián)系，我們將立即刪除修改。
