第六章 脚本编程的相关技术
6.1 编写兼容IE和NS的jiavascript代码
6.1.1 JavaScript实现marquee动能
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body onload="scroll1()">
<script language="javascript" type="text/javascript">
var info="我的地盘";
var seq1=0;
var seq2=0;
var space=0;
var timeid=0;
var timefunc="scroll1()";
function scroll1()
{
if(seq1<info.length)
{
seq1+=1;
marquee1.innerText=info.substring(0,seq1);
timeid=setTimeout("scroll1()",200);
timefunc="scroll1()";
}
else
{
seq1=0;
timeid=setTimeout("scroll2()",200);
timefunc="scr0ll2()";
}
}
function scroll2()
{
if(marquee1.offsetWidth<div1.clientWidth)
{
space+=1;
var strSpace="";
for(var i=0;i<space;i++)
{
strSpace+="";
}
marquee1.innerText=info+strSpace;
timeid=setTimeout("scroll2()",200);
timefunc="scroll2()";
}
else
{
div1.style.textAlign="left";
space=0;
timeid=setTimeout("scroll3()",200);
timefunc="scroll3()";
}
}
function scroll3()
{
if(seq2<info.length)
{
seq2+=1;
marquee1.innerText=info.substring(seq2,info.length);
timeid=setTimeout("scroll3()",200);
timefunc="scroll3()";
}
else
{
div1.style.textAlign="right";
seq2=0;
timeid=setTimeout("scroll1()",200);
timefunc="scroll1()";
}
}
</script>
<div id="div1" style="position:static; width:500px; text-align:right">
<span id="marquee1" onmouseover="clearTimeout(timeid)" onmouseout="setTimeout(timefunc,200)">
text
</span>
</div>
</body>
</html>
6.1.2 检查浏览器的类别
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
var ns=(document.layers)? true:false;
var ie=(document.all)? true:false;
if(ns)
{
alert("你用的浏览器是网景内核");
}
if(ie)
{
alert("你用的浏览器是ie内核");
}
</script>
</body>
</html>
6.1.3 层的显示和隐藏
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body onload="setInterval('change()',1000)">
<div id="layer1" style="position:absolute; left:200; top:100">一块</div>
</body>
<script language="javascript" type="text/javascript">
var bVisible=true;
var block;
var ns=(document.layers) ?true:false;
var ie=(document.all) ?true:false;
if(ns)
{
block=document.layer1;
}
else
{
block=layer1.style;
}
function showObject(obj)
{
if(ns)
{
obj.visibility="show";
}
else if(ie)
{
obj.visibility="visible";
}
}
function hideObject(obj)
{
if(ns)
{
obj.visibility="hide";
}
else if(ie)
{
obj.visibility="hidden";
}
}
function change()
{
if(bVisible)
{
showObject(block)
}
else
{
hideObject(block);
bVisible=!bVisible;
}
}
</script>
</html>
6.1.4 ActiveX控件
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<object id="calendar1" classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02*
codebase="http://www.it315.ory/ctls/calendar.cab#Version=1.0.0.0">
<param name="ShowVertIcalGrid" value="-1" />
<param name="TitleFontColor" value="10485760" />
</object>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<object classid="clsid:CAFEEFAC-0014-0000-0000-ABCDEFFFEDCBA"
width="50" height="50"
codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_0-win.cab#Version=1.4.0.0">
<param name="CODE" value="MyApplet.class" />
<param name="ARCHIVE" value="MyApplet.jar" />
<param name="type" value="application/x-java-applet;jpi-version=1.4" />
<param name="scriptable" value="false" />
<comment>
<enbed
type="application/x-java-applet;jpi-version=1.4"
code="MyApplet.class"
archive="MyApplet.jar"
width="50"
height="50"
scriptable=false
pluginspage="http://java.sum.com/products/plugin/index.html#download">
</enbed>
</comment>
</object>
</body>
</html>