当前位置：首页 -> 网页设计 -> 经验技巧 -> WEB 技术模拟应用程序

WEB 技术模拟应用程序

时间： 2021-07-31 作者：daque

跟着web本领的连接兴盛，其功效越来越宏大，及至于能实行很多运用步调的处事！web本领以其简单、赶快的出色性，使很多运用步调在向web本领变化。如microsoft近几年的产物：windows media 效劳处置器径直运用网页式处置，而iis处置也可经过网页来实行。当人们都风气一种货色时，遽然冒出个新货色会很不符合。以是不只要用网页来实行运用步调的功效，并且界面上也要一致，如许更简单使人接收。底下咱们就举几个抄袭运用步调界面包车型的士例子。蓄意大师不只仅控制与这几个例子，充溢表现本人的设想力，安排出更多，更好的界面！1、模仿体例脸色采用框运转代码框<html><head><title>脸色</title><meta content="text/html; charset=utf8" 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=colortablestyle="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=graytablestyle="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=showcolorwidth=40><tbody><tr><td></td></tr></tbody></table></td><td rowspan=2>原色: <span id=rgb></span><br>亮度: <spanid=gray>120</span><br>代码: <input id=selcolor size=7></td><td><button id=ok type=submit>决定</button></td></tr><tr><td><buttononclick=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=utf8"><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运用，功效越发精巧！

WEB 技术模拟应用程序

相关推荐

推荐下载

热门阅览

最新排行