WEB 技术模拟应用程序

　WEB 技术模拟应用程序

作者：佚名　时间： 2003-11-07　文档类型：原创　来自：蓝色理想

随着Web技术的不断发展，其功能越来越强大，以至于能完成许多应用程序的工作！Web技术以其简便、快捷的优越性，使很多应用程序在向Web技术转变。如Microsoft近几年的产品：Windows Media 服务管理器直接应用网页式管理，而IIS管理也可通过网页来完成。

当人们都习惯一种东西时，突然冒出个新东西会很不适应。所以不但要用网页来实现应用程序的功能，而且界面上也要相似，这样更容易使人接受。下面我们就举几个模仿应用程序界面的例子。希望大家不仅仅局限与这几个例子，充分发挥自己的想象力，设计出更多，更好的界面！

1、模拟系统颜色选择框

运行代码框
<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 全部选择提示：你可先修改部分代码，再按运行]

2、web216颜色框

运行代码框
<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 全部选择提示：你可先修改部分代码，再按运行]

3、模拟系统选项卡

运行代码框
<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">  </style> <title>显示属性</title> </head> <body style="border:outset 1 #ffffff;margin: 0;background-color: #cccccc;padding:3px" scroll=no> <SCRIPT LANGUAGE="JavaScript">  </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">设置</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="应用(A)" name="_apply" style="width: 60;height:22" disabled class=up> </td> </tr> </table> </div> </form> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

以上3个例子结合ShowModelessDialog使用，效果更加出色！

出处：蓝色理想
责任编辑：panliu888

◎进入论坛网页制作、网站综合版块参加讨论

相关文章

ASP.NET 中数据库操作初步

作者文章

全方位了解服务器 CPU


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule