脚本语言

WEB 技术模拟应用程序

编辑:admin 日期:2006-11-29

字体大小: 小中大

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

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

1、模拟系统颜色选择框

HTML代码

<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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2、web216颜色框

HTML代码

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>

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

上一篇: HTML Component(HTC)

下一篇: 突破IIS的客户端连接限制

文章来自: 网络

引用通告: 查看所有引用 | 我要引用此文章

Tags:

最新日志:

评论: 0 | 引用: 0 | 查看次数: 4398

发表评论

请登录后再发表评论！

Powered By PJBlog3 V3.2.9.518 CopyRight 2005 - 2025, 木子屋 xhtml | css
Processed in 0.691406 second(s) , 6 queries , Simple Yellow Design By ChangHua(FatMouse) 闽ICP备19016051号-1

01.w3school	02.51Windows
03.ES6入门教程	04.PHP中文手册
05.MSDN\|.NET	06.Visual Studio\|O
07.ASP.NET MVC2	08.ASP.NET MVC3
09.jQuery\|D\|P	10.Vue.js
11.AspNetPager	12.SharpZipLib
13.AjaxPro	14.Json.NET
15.Web Services	16.BaiDu API
17.数据堂	18.纯真IP库
19.SharpDevelop	20.动软
21..NET Reflector	22.百度\|高德[坐标]
23.Layui\|G\|X\|Q	24.Ele\|uni-app
25.SourceForge	26.CodeProject
27.Dynamic Drive	28.CodePlex
29.GitHub	30.Gitee
31.IItellYou	32.面包多
33.一门APP	34.友盟数据
35.JSON格式化	36.在线文本比较
37.微软开发者中心	38.Android开发者中心

WEB 技术模拟应用程序

编辑:admin 日期:2006-11-29

Category

IM Online

User Panel

Search

Recent Comments

最新评论

Resources