随着Web技术的不断发展，其功能越来越强大，以至于能完成许多应用程序的工作！Web技术以其简便、快捷的优越性，使很多应用程序在向Web技术转变。如Microsoft近几年的产品：Windows Media 服务管理器直接应用网页式管理，而IIS管理也可通过网页来完成。
当人们都习惯一种东西时，突然冒出个新东西会很不适应。所以不但要用网页来实现应用程序的功能，而且界面上也要相似，这样更容易使人接受。下面我们就举几个模仿应用程序界面的例子。希望大家不仅仅局限与这几个例子，充分发挥自己的想象力，设计出更多，更好的界面！
1、模拟系统颜色选择框
[code]
颜色
<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>
<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(' | ');
}
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('');
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(' ');
}
</script>
|
<script language=JavaScript>
for(i = 255; i >= 0; i -= 8.5)
document.write(' | ');
</script>
|
[/code]
2、web216颜色框
[code]
<script>
oColorStr=new Array("00","33","66","99","cc","ff");
document.write("
");
for(j=0;j");
for(m=0;m<3;m++){
for(i=0;i")
}
}
document.write("");
}
for(j=0;j");
for(m=3;m<6;m++){
for(i=0;i")
}
}
document.write("");
}
document.write("
");
</script>
<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>[/code]
3、模拟系统选项卡
[code]
显示属性
<script LANGUAGE="JavaScript">
</script>
[/code]
该文章在 2011/3/11 23:04:40 编辑过
400 186 1886
