附录G JavaScript精彩实例

附录G赠送JavaScript实例附录G.1纯JavaScript时钟脚本说明第一步：把如下代码加入head区域中: SCRIPT language=javascript !­­ pX=400;pY=200 obs = new Array(13) function ob () { for (i=0; i13; i++) { if (document.all) obs[i]=new Array (eval('ob'+i).style,­100,­100) else obs[i] =new Array (eval('document.ob'+i),­100,­100) } } function cl(a,b,c){ if (document.all) { if (a!=0) b+=­1 eval('c'+a+'.style.pixelTop='+(pY+(c))) eval('c'+a+'.style.pixelLeft='+(pX+(b))) } else{ if (a!=0) b+=10 eval('document.c'+a+'.top='+(pY+(c))) eval('document.c'+a+'.left='+(pX+(b))) } if (document.all) c0.style.pixelLeft=26 } function runClock() { for (i=0; i13; i++) { obs[i][0].left=obs[i][1]+pX obs[i][0].top=obs[i][2]+pY } } var lastsec function timer() { time = new Date ()525 附录G sec = time.getSeconds() if(sec!=lastsec) { lastsec = sec sec=Math.PI*sec/30 min=Math.PI*time.getMinutes()/30 hr =Math.PI*((time.getHours()*60)+time.getMinutes())/360 for (i=1;i6;i++) { obs[i][1] = Math.sin(sec) * (44­(i­1)*11)­16; if (document.layers)obs[i][1]+=10; obs[i][2] = ­Math.cos(sec) * (44 ­(i­1)*11)­27; } for (i=6;i10;i++) { obs[i][1] = Math.sin(min) * (40 ­(i­6)*10)­16; if (document.layers)obs[i][1]+=10; obs[i][2] = ­Math.cos(min) * (40­(i­6)*10)­27; } for (i=10;i13;i++) { obs[i][1] = Math.sin(hr) * (37­(i­10)*11)­16; if (document.layers)obs[i][1]+=10; obs[i][2] = ­Math.cos(hr) * (37­(i­10)*11)­27; } } } function setNum(){ cl (0,­67,­65); cl (1,10,­51); cl (2,28,­33); cl (3,35,­8); cl (4,28,17); cl (5,10,35); cl (6,­15,42); cl (7,­40,35); cl (8,­58,17); cl (9,­65,­8); cl (10,­58,­33); cl (11,­40,­51); cl (12,­16,­56); } //­­526 /SCRIPT 第二步:把body中加入如下代码： div id=c0 style=position:absolute;right:6;top:6; z­index:2; /div div id=c1 style=position:absolute;left:20;top:­20; z­index:5;font­size:11px;b1/b/div div id=c2 style=position:absolute;left:20;top:­20; z­index:5;font­size:11px;b2/b/div div id=c3 style=position:absolute;left:20;top:­20; z­index:5;font­size:11px;b3/b/div div id=c4 style=position:absolute;left:20;top:­20; z­index:5;font­size:11px;b4/b/div div id=c5 style=position:absolute;left:20;top:­20; z­index:5;font­size:11px;b5/b/div div id=c6 style=position:absolute;left:20;top:­20; z­index:5;font­size:11px;b6/b/div div id=c7 style=position:absolute;left:20;top:­20; z­index:5;font­size:11px;b7/b/div div id=c8 style=position:absolute;left:20;top:­20; z­index:5;font­size:11px;b8/b/div div id=c9 style=position:absolute;left:20;top:­20; z­index:5;font­size:11px;b9/b/div div id=c10 style=position:absolute;left:20;top:­20; z­index:5;font­size:11px;b10/b/div div id=c11 style=position:absolute;left:20;top:­20; z­index:5;font­size:11px;b11/b/div div id=c12 style=position:absolute;left:20;top:­20; z­index:5;font­size:11px;b12/b/div div id=ob0 style=position:absolute;left:­20;top:­20;z­index:1 /div div id=ob1 style=position:absolute;left:­20;top:­20;z­index:8 font size=+3 color=#0000FFb./b/font/div div id=ob2 style=position:absolute;left:­20;top:­20;z­index:8 font size=+3 color=#0000FFb./b/font/div div id=ob3 style=position:absolute;left:­20;top:­20;z­index:8 font size=+3 color=#0000FFb./b/font/div div id=ob4 style=position:absolute;left:­20;top:­20;z­index:8 font size=+3 color=#0000FFb./b/font/div div id=ob5 style=position:absolute;left:­20;top:­20;z­index:8 font size=+3 color=#0000FFb./b/font/div div id=ob6 style=position:absolute;left:­20;top:­20;z­index:7 font size=+3 color=#00FFFFb./b/font/div div id=ob7 style=position:absolute;left:­20;top:­20;z­index:7 font size=+3 color=#00FFFFb./b/font/div div id=ob8 style=position:absolute;left:­20;top:­20;z­index:7 font size=+3 color=#00FFFFb./b/font/div div id=ob9 style=position:absolute;left:­20;top:­20;z­index:7 font size=+3 color=#00FFFFb./b/font/div div id=ob10 style=position:absolute;left:­20;top:­20;z­index:6 font size=+3 color=#F30000b./b/font/div div id=ob11 style=position:absolute;left:­20;top:­20;z­index:6 font size=+3 color=#F30000b./b/font/div527 附录G div id=ob12 style=position:absolute;left:­20;top:­20;z­index:6 font size=+3 color=#F30000b./b/font/div 第三步：把body中内容改为： body bgcolor=#fef4d9 onLoad=ob(),setNum(),setInterval('timer()',100);setInterval('runClock()',100) 运行后预览效果如图所示。附录G.2跟随鼠标旋转背景脚本说明: 把如下代码加入body区域中 LAYER NAME=a0 LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR=#ffffff CLIP=0,0,1,1/LAYER LAYER NAME=a1 LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR=#fff000 CLIP=0,0,1,1/LAYER LAYER NAME=a2 LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR=#ffa000 CLIP=0,0,1,1/LAYER LAYER NAME=a3 LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR=#ff00ff CLIP=0,0,1,1/LAYER LAYER NAME=a4 LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR=#00ff00 CLIP=0,0,1,1/LAYER LAYER NAME=a5 LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR=#FF00FF CLIP=0,0,1,1/LAYER LAYER NAME=a6 LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR=#FF0000 CLIP