WEB 技术模拟应用程序_网页制作_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

WEB 技术模拟应用程序

作者：闵涛文章来源：闵涛的学习笔记点击数：1157 更新时间：2009/4/23 14:18:40

随着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> <SCR<a class="channel_keylink" href="http://www.ggbing.com/ip">IP</a>T 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; } </SCR<a class="channel_keylink" href="http://www.ggbing.com/ip">IP</a>T> <SCRIPT event=onclick for=ColorTable language=JavaScript> SelRGB = event.srcElement.bgColor; EndColor(); </SCRIPT> <SCRIPT event=onmou<a class="channel_keylink" href="http://www.mintao.net/blog/" target="_blank">seo</a>ver for=ColorTable language=JavaScript> RGB.innerText = event.srcElement.bgColor; EndColor(); </SCRIPT> <SCRIPT event=onmou<a class="channel_keylink" href="http://www.mintao.net/blog/" target="_blank">seo</a>ut 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">  </style> </head> <body> <div id="header"><h1>服务器错误</h1></div> <div id="content"> <div class="content-container"><fieldset> <h2>500 - 内部服务器错误。</h2> <h3>您查找的资源存在问题，因而无法显示。</h3> </fieldset></div> </div> </body> </html> </td></tr> </table> </td> <td width="7" background="/Skin/sealove/Column02_Rc.gif"></td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="8" height="7"><img src="/Skin/sealove/Column02_Lb.gif"></td> <td background="/Skin/sealove/Column02_BGb.gif"><img src="/Skin/sealove/space.gif"></td> <td width="8"><img src="/Skin/sealove/Column02_Rb.gif"></td> </tr> <tr><td colspan="3" height="8"><img src="/Skin/sealove/space.gif"></td></tr> </table> </td> <td width="5"></td> <td width="8" background="/Skin/sealove/Main_Right.gif"></td> </tr> </table> <table cellSpacing=0 cellPadding=0 width=1000 align=center bgColor=#ffffff border=0> <tr> <td width=8 background=/Skin/sealove/Main_Left.gif></td> <td vAlign=top> <table cellSpacing=0 cellPadding=0 width="100%" border=0> <tr> <td bgColor=#faac24 height=1></td> </tr> <tr> <td height=1></td> </tr> <tr> <td bgColor=#faac24 height=9></td> </tr> <tr> <td height=1></td> </tr> <tr> <td bgColor=#faac24 height=1></td> </tr> </table> <table cellSpacing=0 cellPadding=0 width="90%" align=center border=0> <tr> <td style="COLOR: #000000" align=middle height=25>| <A class=Bottom onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.mintao.net/');" href="#">设为首页</A> |<A class=Bottom href="javascript:window.external.addFavorite('http://www.mintao.net/','学习笔记★闵涛★计算机学习电脑编程软硬件技巧');">加入收藏</A> | <A class=Bottom href="mailto:admin@mintao.net">联系站长</A> | <A class=Bottom href="/FriendSite/Index.asp" target=_blank>友情链接</A> | <A class=Bottom href="/Copyright.asp" target=_blank>版权申明</A> | <A class=Bottom href="/html/friends.html" target=_blank>广告服务</A> </td> </tr> <tr> <td background=/Skin/sealove/line01.gif height=1></td> </tr> </table> <table cellSpacing=0 cellPadding=0 width="100%" border=0> <tr> <td align=middle width=210><A href="http://www.mintao.net/" target=_blank><IMG alt=MinTao学以致用网 src="/Skin/sealove/PElogo_sealove.gif" border=0></A></td> <td><table border=0 width=100% cellspacing=0 cellpadding=0> <tr> <td colspan=2> <p align=center><span style='font-size: 9pt'>Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（<A href='http://www.mintao.net/'>学习笔记</A>） Inc All Rights Reserved. <br> <A href='http://www.mintao.net/'>闵涛</A> <a target="blank" href="http://wpa.qq.com/msgrd?V=1&Uin=543098146&Site=敏韬网&Menu=yes" rel="nofollow"><img border="0" SRC=http://wpa.qq.com/pa?p=1:543098146:10 alt='投放广告、内容合作请Q我!'></a> E_mail:admin@mintao.net(欢迎提供学习资源)</span></p> <div style="width:300px;margin:0 auto; padding:1px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42011102001154" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="http://www.mintao.net/images/beian_ico.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">鄂公网安备 42011102001154号</p></a> </div> <p align=center><span style='font-size: 9pt'> 站长：<A href='http://www.mintao.net/'>MinTao</A> <align=center><span style='font-size: 9pt;color:#7f270f'>ICP备案号：<a target="_blank" href="https://beian.miit.gov.cn">鄂ICP备11006601号-18</a> <script src='http://s79.cnzz.com/stat.php?id=495319&web_id=495319&show=pic' language='JavaScript' charset='gb2312'></script> <script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F83055e3c4dcc2c9c0e7ad2643e08b99d' type='text/javascript'%3E%3C/script%3E")); </script> </span></p></td> </tr> <tr> <td align=center> 闵涛站盟:<A href='http://pub.mintao.net/' target='_blank'>医药大全</A>-<A href='http://www.iwuxue.com/' target='_blank'>武穴网</A>。<A href='http://www.mintao.net/sitemap_index.xml' target='_blank'>A</A>打造<A href='http://www.mintao.net/SiteMap/Soft1.htm' target='_blank'>B</A>、<A href='http://www.mintao.net/SiteMap/Article1.htm' target='_blank'>C</A>、<A href='http://www.mintao.net/SiteMap/Photo1.htm' target='_blank'>D</A>……</span></td> <td> </td> </tr> </table> <script language="JavaScript" src="http://www.mintao.net/js/qqkf.js"></script> </td> <td width=20></td> <td width=120 height=80><A href="http://xianning.cyberpolice.cn/" rel="nofollow" target=_blank><IMG alt=咸宁网络警察报警平台 src="http://www.mintao.net/images/xnwj.gif" width=120 border=0></A></td> </tr> </table> </td> <td width=8 background=/Skin/sealove/Main_Right.gif></td> </tr> </table> <script type="text/javascript"> /*blog.mintao.net250*200 创建于 2015-07-01*/ var cpro_id = "u2183153"; </script> <script src="http://cpro.baidustatic.com/cpro/ui/f.js" type="text/javascript"></script> <table width="1000" align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td width="15"><img src="/Skin/sealove/Main_BottomLeft.gif"></td> <td height="11" background="/Skin/sealove/Main_BottomBG.gif"><img src="/Skin/sealove/space.gif"></td> <td width="15"><img src="/Skin/sealove/Main_BottomRight.gif"></td> </tr> <tr><td colspan="3" height="5"></td></tr> </table> </body> </html><NOSCRIPT><IFRAME src='*' Width='0' Height='0'></IFRAME></NOSCRIPT>