WEB 技术模拟应用程序 -pc6资讯

您的位置：首页 → 网页设计 → 经验技巧 → WEB 技术模拟应用程序

WEB 技术模拟应用程序 时间：2004/11/7 2:47:00来源：本站整理作者：蓝点我要评论(0)

　　　　　　　　　　　　

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

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

1、模拟系统颜色选择框

运行代码框
<HTML><HEAD><TITLE>颜色</TITLE><BR> <META content="text/html; charset=gb2312" http-equiv=Content-Type><BR> <STYLE type=text/css>TD {<BR> FONT-SIZE: 10.8pt<BR> }<BR> BODY {<BR> FONT-SIZE: 10.8pt<BR> }<BR> BUTTON {<BR> WIDTH: 5em<BR> }<BR> </STYLE><BR> <BR> <SCRIPT language=JavaScript><BR> var SelRGB = '';<BR> var DrRGB = '';<BR> var SelGRAY = '120';<BR> <BR> var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');<BR> <BR> function ToHex(n)<BR> { var h, l;<BR> <BR> n = Math.round(n);<BR> l = n % 16;<BR> h = Math.floor((n / 16)) % 16;<BR> return (hexch[h] + hexch[l]);<BR> }<BR> <BR> function DoColor(c, l)<BR> { var r, g, b;<BR> <BR> r = '0x' + c.substring(1, 3);<BR> g = '0x' + c.substring(3, 5);<BR> b = '0x' + c.substring(5, 7);<BR> <BR> if(l > 120)<BR> {<BR> l = l - 120;<BR> <BR> r = (r * (120 - l) + 255 * l) / 120;<BR> g = (g * (120 - l) + 255 * l) / 120;<BR> b = (b * (120 - l) + 255 * l) / 120;<BR> }else<BR> {<BR> r = (r * l) / 120;<BR> g = (g * l) / 120;<BR> b = (b * l) / 120;<BR> }<BR> <BR> return '#' + ToHex(r) + ToHex(g) + ToHex(b);<BR> }<BR> <BR> function EndColor()<BR> { var i;<BR> <BR> if(DrRGB != SelRGB)<BR> {<BR> DrRGB = SelRGB;<BR> for(i = 0; i <= 30; i ++)<BR> GrayTable.rows(i).bgColor = DoColor(SelRGB, 240 - i * 8);<BR> }<BR> <BR> SelColor.value = DoColor(RGB.innerText, GRAY.innerText);<BR> ShowColor.bgColor = SelColor.value;<BR> }<BR> </SCRIPT><BR> <BR> <SCRIPT event=onclick for=ColorTable language=JavaScript><BR> SelRGB = event.srcElement.bgColor;<BR> EndColor();<BR> </SCRIPT><BR> <BR> <SCRIPT event=onmouseover for=ColorTable language=JavaScript><BR> RGB.innerText = event.srcElement.bgColor;<BR> EndColor();<BR> </SCRIPT><BR> <BR> <SCRIPT event=onmouseout for=ColorTable language=JavaScript><BR> RGB.innerText = SelRGB;<BR> EndColor();<BR> </SCRIPT><BR> <BR> <SCRIPT event=onclick for=GrayTable language=JavaScript><BR> SelGRAY = event.srcElement.title;<BR> EndColor();<BR> </SCRIPT><BR> <BR> <SCRIPT event=onmouseover for=GrayTable language=JavaScript><BR> GRAY.innerText = event.srcElement.title;<BR> EndColor();<BR> </SCRIPT><BR> <BR> <SCRIPT event=onmouseout for=GrayTable language=JavaScript><BR> GRAY.innerText = SelGRAY;<BR> EndColor();<BR> </SCRIPT><BR> <BR> <SCRIPT event=onclick for=Ok language=JavaScript><BR> window.returnValue = SelColor.value;<BR> window.close();<BR> </SCRIPT><BR> <BR> <META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD><BR> <BODY bgColor=menu><BR> <DIV align=center><BR> <CENTER><BR> <TABLE border=0 cellPadding=0 cellSpacing=10><BR> <TBODY><BR> <TR><BR> <TD><BR> <TABLE border=0 cellPadding=0 cellSpacing=0 id=ColorTable<BR> style="CURSOR: hand"><BR> <SCRIPT language=JavaScript><BR> function wc(r, g, b, n)<BR> {<BR> r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15;<BR> g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15;<BR> b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15;<BR> <BR> document.write('<TD BGCOLOR=#' + ToHex(r) + ToHex(g) + ToHex(b) + ' height=8 width=8></TD>');<BR> }<BR> <BR> 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);<BR> <BR> for(i = 0; i < 16; i ++)<BR> {<BR> document.write('<TR>');<BR> for(j = 0; j < 30; j ++)<BR> {<BR> n1 = j % 5;<BR> n2 = Math.floor(j / 5) * 3;<BR> n3 = n2 + 3;<BR> <BR> wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)),<BR> (cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)),<BR> (cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i);<BR> }<BR> <BR> document.writeln('</TR>');<BR> }<BR> </SCRIPT><BR> <BR> <TBODY></TBODY></TABLE></TD><BR> <TD><BR> <TABLE border=0 cellPadding=0 cellSpacing=0 id=GrayTable<BR> style="CURSOR: hand"><BR> <SCRIPT language=JavaScript><BR> for(i = 255; i >= 0; i -= 8.5)<BR> document.write('<TR BGCOLOR=#' + ToHex(i) + ToHex(i) + ToHex(i) + '><TD TITLE=' + Math.floor(i * 16 / 17) + ' height=4 width=20></TD></TR>');<BR> </SCRIPT><BR> <BR> <TBODY></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></DIV><BR> <DIV align=center><BR> <CENTER><BR> <TABLE border=0 cellPadding=0 cellSpacing=10><BR> <TBODY><BR> <TR><BR> <TD align=middle rowSpan=2>选中色彩<BR> <TABLE border=1 cellPadding=0 cellSpacing=0 height=30 id=ShowColor<BR> width=40><BR> <TBODY><BR> <TR><BR> <TD></TD></TR></TBODY></TABLE></TD><BR> <TD rowSpan=2>基色: <SPAN id=RGB></SPAN><BR>亮度: <SPAN<BR> id=GRAY>120</SPAN><BR>代码: <INPUT id=SelColor size=7></TD><BR> <TD><BUTTON id=Ok type=submit>确定</BUTTON></TD></TR><BR> <TR><BR> <TD><BUTTON<BR> onclick=window.close();>取消</BUTTON></TD></TR></TBODY></TABLE></CENTER></DIV></BODY></HTML>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2、web216颜色框

运行代码框
<style><BR> #colorTable td {width:7;height:9;cursor:hand;}<BR> </style><BR> <body><BR> <div style="background-color:#000000;padding-left:6px;padding-right:6px;width:214"><BR> <table id="ColorTable" align="left" border='1' style='border-collapse:collapse;margin-right:6px;' bordercolor='black'><BR> <tr><td bgcolor="#000000"></td></tr><BR> <tr><td bgcolor="#333333"></td></tr><BR> <tr><td bgcolor="#666666"></td></tr><BR> <tr><td bgcolor="#999999"></td></tr><BR> <tr><td bgcolor="#cccccc"></td></tr><BR> <tr><td bgcolor="#ffffff"></td></tr><BR> <tr><td bgcolor="#ff0000"></td></tr><BR> <tr><td bgcolor="#00ff00"></td></tr><BR> <tr><td bgcolor="#0000ff"></td></tr><BR> <tr><td bgcolor="#ffff00"></td></tr><BR> <tr><td bgcolor="#00ffff"></td></tr><BR> <tr><td bgcolor="#ff00ff"></td></tr><BR> </table><BR> <BR> <script><BR> oColorStr=new Array("00","33","66","99","cc","ff");<BR> <BR> document.write("<table id='colorTable' border='1' style='border-collapse:collapse' bordercolor='black'>");<BR> <BR> for(j=0;j<oColorStr.length;j++){<BR> document.write("<tr>");<BR> for(m=0;m<3;m++){<BR> 　for(i=0;i<oColorStr.length;i++){<BR> 　document.write("<td bgcolor=\'"+oColorStr[m]+oColorStr[i]+oColorStr[j]+"\'></td>")<BR> 　}<BR> }<BR> document.write("</tr>");<BR> }<BR> <BR> for(j=0;j<oColorStr.length;j++){<BR> document.write("<tr>");<BR> for(m=3;m<6;m++){<BR> 　for(i=0;i<oColorStr.length;i++){<BR> 　document.write("<td bgcolor=\'"+oColorStr[m]+oColorStr[i]+oColorStr[j]+"\'></td>")<BR> 　}<BR> }<BR> document.write("</tr>");<BR> }<BR> <BR> document.write("</table>");<BR> </script><BR> </div><BR> <br><BR> <span id="oColorShow" style="border:solid 1px #000;width:40;height:12"></span> <BR> <span id="oColorValue" style="font:10px verdana;"></span><BR> <script><BR> document.body.onmousemove=function(){srcElem=event.srcElement;if(srcElem.tagName=="TD"){oColorValue.innerText=srcElem.bgColor;oColorShow.style.backgroundColor=srcElem.bgColor;srcElem.title=srcElem.bgColor}}<BR> </script><BR>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

3、模拟系统选项卡

运行代码框
<html><BR> <head><BR> <meta http-equiv="Content-Language" content="zh-cn"><BR> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><BR> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"><BR> <meta name="ProgId" content="FrontPage.Editor.Document"><BR> <style type="text/css"><BR> <BR> </style><BR> <title>显示属性</title><BR> <BR> </head><BR> <BR> <body style="border:outset 1 #ffffff;margin: 0;background-color: #cccccc;padding:3px" scroll=no><BR> <SCRIPT LANGUAGE="JavaScript"><BR> <BR> </SCRIPT><BR> <form name="free" method="post" target="_target"><BR> <div align="center"><BR> 　<center><BR> 　<table border="0" cellpadding="0" cellspacing="0" width="400" height="61"><BR> 　　<tr><BR> 　　　<td width="50" height="20" align="center" valign="bottom" onclick=restore();c1();><div id="td1" class="lc">背景</div></td><BR> 　　　<td width="50" height="20" align="center" valign="bottom" onclick=restore();c2();><div id="td2" class="l">屏保</div></td><BR> 　　　<td width="50" height="20" align="center" valign="bottom" onclick=restore();c3();><div id="td3" class="l">外观</div></td><BR> 　　　<td width="50" height="20" align="center" valign="bottom" onclick=restore();c4();><div id="td4" class="l">Web</div></td><BR> 　　　<td width="50" height="20" align="center" valign="bottom" onclick=restore();c5();><div id="td5" class="l">效果</div></td> <BR> 　　　<td width="50" height="20" align="center" valign="bottom" onclick=restore();c6();><div id="td6" class="l">设置</div></td><BR> 　　　<td width="50" height="20" align="center" valign="bottom" ></td><BR> 　　　<td width="50" height="20" align="center" valign="bottom"></td><BR> 　　</tr><BR> 　　<tr　style=""><BR> 　　　<td width="50" height="1" align="center" class="l-hc" id="td_1" > </td><BR> 　　　<td width="50" height="1" align="center" class="l-c" id="td_2"> </td><BR> 　　　<td width="50" height="1" align="center" class="l-c" id="td_3"> </td><BR> 　　　<td width="50" height="1" align="center" class="l-c" id="td_4"> </td><BR> 　　　<td width="50" height="1" align="center" class="l-c" id="td_5"> </td> <BR> 　　　<td width="50" height="1" align="center" class="l-c" id="td_6"> </td><BR> 　　　<td width="50" height="1" align="center" class="l-c" id="td_"> </td><BR> 　　　<td width="50" height="1" align="center" class="l-r" id="td_"> </td><BR> 　　</tr><BR> 　　<tr><BR> 　　　<td width="398" height="360" class="up" colspan="8" style="border-top-style: solid; border-top-width: 0; padding: 5"><BR> 　　　　<p align="center"> <BR> 　　　　<div align="center"><BR> 　　　　　<table border="0" cellpadding="0" cellspacing="0" width="100%" height="325"><BR> 　　　　　　<tr><BR> 　　　　　　　<td width="100%" height="280"><BR> 　　　　　　 <BR> <BR> 　　　　　　 <div align="center"><BR> 　　　　　　　<center><BR> <div style="display:" id=w1><h1>1</h1></div><BR> <div style="display:none" id=w2><h1>2</h1></div><BR> <div style="display:none" id=w3><h1>3</h1></div><BR> <div style="display:none" id=w4><h1>4</h1></div><BR> <div style="display:none" id=w5><h1>5</h1></div><BR> <div style="display:none" id=w6><h1>6</h1></div><BR> 　　　　　　　</center><BR> 　　　　　　 </div><BR> 　　　　　　 <BR> <BR> 　　　　　　 </td><BR> 　　　　　　</tr><BR> 　　　　　</table><BR> 　　　　</div><BR> 　　　</td><BR> 　　</tr><BR> 　</center><BR> 　　<tr><BR> 　　　<td width="398" height="37" colspan="8" style="border-top-style: solid; border-top-width: 0; padding: 5"><BR> 　　　　<p align="right"><input type="button" value="确定" name="_ok" style="width: 60;height:22" class=up> <BR> 　　　　<input type="button" value="取消" name="_cancel" style="width: 60;height:22" class=up onclick="window.close();"> <BR> 　　　　<input type="button" value="应用(A)" name="_apply" style="width: 60;height:22" disabled class=up><BR> 　　　</td><BR> 　　</tr><BR> 　</table><BR> </div><BR> </form><BR> </body><BR> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

文章评论

查看所有0条评论>>