CSS+DIV-CSS与Javascript

13-1.html

< html >
< head >
< title >Javascript基本语法 title>
     head>
< body >
< script language ="javascript" >
alert("Hello World");
script>
body>
html>

13-2.html

< html >
< head >
< title >三目运算符 title>
     head>
< body >
< script language ="javascript" >
var a=5,b=6;
alert(a>b?"调用01.css":"调用02.css");
script>
body>
html>

13-3.html

< html >
< head >
< title >if else语句 title>
     head>
< body >
< script language ="javascript" >
var name="Administrator";
if(name!="Administrator"){
  document.write(" < font color ='blue' >"+name+" font>");
  //输出蓝色的name
}
else{
  document.write(" < font color ='red' >"+name+" font>");
  //输出红色的name
}
script>
body>
html>

13-4.html

< html >
< head >
< title >for语句 title>
     head>
< body >
< script language ="javascript" >
for(var i=0;i<256;i++){
  j = 255-i;  //j值递减
  document.write(" < font style ='color:rgb("+j+","+i+","+i+");' > < b >* b> < font >");
  //调整*号颜色
  if(i%16==15){
    document.write(" < br >");    //每输出16个则换行
  }
}
script>
body>
html>

13-5.html

< html >
< head >
< title >文字颜色 title>
< style type ="text/css" >

style>
< script language ="javascript" >
function ChangeColor(){
  var red = document.colorform.red.value;    //获得各个输入框的值
  var green = document.colorform.green.value;
  var blue = document.colorform.blue.value;
  var obj = document.getElementById("text");
  obj.style.color="#"+red+green+blue;      //修改文字颜色
}
script>
     head>
< body >
< form name ="colorform" >
  R: < input name ="red" maxlength ="2" >
  G: < input name ="green" maxlength ="2" >
  B: < input name ="blue" maxlength ="2" >
    < input type ="button" onClick ="ChangeColor()" value ="换颜色" class ="btn" >
form>
< br >
< span id ="text" >CSS层样式 span>
body>
html>

13-6.html

< html >
< head >
< title >直接输入的Excel表格 title>
< script language ="javascript" type ="text/javascript" >
function hilite(obj) {
  //选择包含 < input >的 < td >标记
  obj = document.getElementById("td"+obj.name.toString());
  obj.style.border = '2px solid #007EFF';  //加粗、变色
}
function delite(obj) {
  obj = document.getElementById("td"+obj.name.toString());
  obj.style.border = '1px solid #ABABAB';  //恢复回原来的边框
}
script>
< style >

style>
     head>
< body >
< form method ="post" >
< table class ="formdata" >
< caption >公司销售统计表 2004～2007 caption>
< tr >
< th > th>
< th scope ="col" >2004 th>
< th scope ="col" >2005 th>
< th scope ="col" >2006 th>
< th scope ="col" >2007 th>
tr>
< tr >
< th scope ="row" >硬盘(Hard Disk) th>
   < td id ="tdharddisk2004" > < input type ="text" name ="harddisk2004" id ="harddisk2004" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdharddisk2005" > < input type ="text" name ="harddisk2005" id ="harddisk2005" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdharddisk2006" > < input type ="text" name ="harddisk2006" id ="harddisk2006" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdharddisk2007" > < input type ="text" name ="harddisk2007" id ="harddisk2007" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
tr>
< tr >
   < th scope ="row" >主板(Mainboard) th>
   < td id ="tdmainboard2004" > < input type ="text" name ="mainboard2004" id ="mainboard2004" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdmainboard2005" > < input type ="text" name ="mainboard2005" id ="mainboard2005" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdmainboard2006" > < input type ="text" name ="mainboard2006" id ="mainboard2006" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdmainboard2007" > < input type ="text" name ="mainboard2007" id ="mainboard2007" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
tr>
< tr >
   < th scope ="row" >内存条(Memory Disk) th>
   < td id ="tdmemory2004" > < input type ="text" name ="memory2004" id ="memory2004" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdmemory2005" > < input type ="text" name ="memory2005" id ="memory2005" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdmemory2006" > < input type ="text" name ="memory2006" id ="memory2006" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdmemory2007" > < input type ="text" name ="memory2007" id ="memory2007" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
tr>
< tr >
   < th scope ="row" >机箱(Case) th>
   < td id ="tdcase2004" > < input type ="text" name ="case2004" id ="case2004" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdcase2005" > < input type ="text" name ="case2005" id ="case2005" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdcase2006" > < input type ="text" name ="case2006" id ="case2006" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdcase2007" > < input type ="text" name ="case2007" id ="case2007" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
tr>
< tr >
< th scope ="row" >电源(Power) th>
   < td id ="tdpower2004" > < input type ="text" name ="power2004" id ="power2004" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdpower2005" > < input type ="text" name ="power2005" id ="power2005" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdpower2006" > < input type ="text" name ="power2006" id ="power2006" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdpower2007" > < input type ="text" name ="power2007" id ="power2007" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
tr>
< tr >
   < th scope ="row" >CPU风扇(CPU Fan) th>
   < td id ="tdcpufan2004" > < input type ="text" name ="cpufan2004" id ="cpufan2004" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdcpufan2005" > < input type ="text" name ="cpufan2005" id ="cpufan2005" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdcpufan2006" > < input type ="text" name ="cpufan2006" id ="cpufan2006" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdcpufan2007" > < input type ="text" name ="cpufan2007" id ="cpufan2007" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
tr>
< tr >
< th scope ="row" >总计(Total) th>
   < td id ="tdtotal2004" > < input type ="text" name ="total2004" id ="total2004" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdtotal2005" > < input type ="text" name ="total2005" id ="total2005" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdtotal2006" > < input type ="text" name ="total2006" id ="total2006" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
   < td id ="tdtotal2007" > < input type ="text" name ="total2007" id ="total2007" onFocus ="hilite(this);" onBlur ="delite(this);" > td>
tr>
table>
< p > < input type ="submit" name ="btnSubmit" id ="btnSubmit" value ="Add Data" class ="btn" >
< input type ="reset" value ="Reset All" class ="btn" > p>
form>
body>
html>

13-7.html

< html >
< head >
< title >由远到近的文字 title>
< style type ="text/css" >

style>
     head>
< body >
< script language ="javascript" >
for(var i=0;i<128;i++){
  //不断的变化位置、文字大小、颜色的CSS属性
  document.write(' < div style ="left:'+(200-i)+'px;top:'+(10+i/2)+'px; font-size:'+(i*2)+'px; color:rgb('+(256-i)+','+(256-i*2)+','+(i*2)+');" >CSS div>');
}
script>
< ! -- 再输出最后一个位置上的文字，但换颜色 -- >
< div style ="left:72px;top:74px; font-size:256px; color:#FFFF44;" >CSS div>
body>
html>

13-8.html

< html >
< head >
< title >×××灯 title>
< style type ="text/css" >

style>
< script language ="javascript" >
var msg="这是×××灯，我跑啊跑啊跑";    //×××灯的文字
var interval = 400;            //跑动的速度
var seq=0;

function LenScroll() {
  document.nextForm.lenText.value = msg.substring(seq, msg.length) + "     " + msg;
  seq++;
  if ( seq > msg.length )
    seq = 0;
  window.setTimeout("LenScroll();", interval);
}
script>
     head>
< body onLoad ="LenScroll()" >
< center >
< form name ="nextForm" >
< input type ="text" name ="lenText" >
form>
center>
body>

13-9.html

< html >
< head >
< title >图片淡入淡出 title>
< style type ="text/css" >

style>
     head>
< body >
< script language ="javascript" >
function img1(x){        // 获取数组记录数
  this.length=x;
}
//申明数组并给数组元素赋值，也就是把图片的相对路径保存起来
//若是图片较多，可增加数组元素的个数，
//在这个例子中用了五张图片，所以数组元素个数为“5"。
  iname=new img1(5);
  iname[0]="photo/01.jpg";
  iname[1]="photo/02.jpg";
  iname[2]="photo/03.jpg";
  iname[3]="photo/04.jpg";
  iname[4]="photo/05.jpg";
  var i=0;
function play1(){        // 演示变换效果
  if (i==4){ i=0; }      //当进行到iname[4]时，返回iname[0]
  else{ i++; }
  tp1.filters[0].apply();    //tp为图像的name，在 < img >标记中定义
  tp1.src=iname[i];
  tp1.filters[0].play();
  mytimeout=setTimeout("play1()",4000);
  //设置演示时间，这里是以毫秒为单位的，所以“4000 ”是指每张图片的演示时间是4秒
  //这个时间值要大于滤镜中设置的转换时间值，这样当转换结束后还能停留一段时间，看清楚图片。
}
script>
< p > < img src ="photo/04.jpg" name ="tp1" > p>
< script language ="javascript" >//play1(); script>
body>

13-10.html

< html >
< head >
< title >CSS实现PPT幻灯片 title>
< style type ="text/css" >

style>
     head>
< body >
< script language ="javascript" >
function img2(x){this.length=x;}
  jname=new img2(5);
  jname[0]="photo/06.jpg";
  jname[1]="photo/07.jpg";
  jname[2]="photo/08.jpg";
  jname[3]="photo/09.jpg";
  jname[4]="photo/10.jpg";
  var j=0;
function play2(){
  if (j==4){ j=0; }
  else{ j++; }
  tp2.filters[0].apply();
  tp2.src=jname[j];
  tp2.filters[0].play();
  mytimeout=setTimeout("play2()",4000);
}
script>
< p > < img src ="photo/06.jpg" border ="0" name ="tp2" > p>
< script language ="javascript" >play2(); script>
body>

13-11.html

< html >
< head >
< title >灯光效果 title>
< style type ="text/css" >

style>
     head>
< body >
< script language ="javascript" >
// 调用设置光源函数
window.onload=setlights1;
// 调用Light滤镜方法
function setlights1(){
  var iX2=lightsy.offsetWidth;    //获得图片宽度
  var iY2=lightsy.offsetHeight;    //获得图片高度
  lightsy.filters[0].addCone(0,0,5,iX2,iY2,60,130,255,50,20);
  lightsy.filters[0].addCone(0,iY2,5,iX2,0,60,130,255,50,20);
  //lightsy.filters[0].addcone(430,120,10,100,100,255,255,0,70,55);
}
script>
< img src ="fish.jpg" >  
< img id ="lightsy" src ="fish.jpg" class ="light" >
body>

13-12.html

< html >
< head >
< title >舞台灯光 title>
< style type ="text/css" >

style>
     head>
< body >
< table >
   < tr >
   < td id ="flttgt" > < img src ="mm.jpg" > td>
   tr>
table>
< script language ="javascript" >
var g_numlights=0;
flttgt.onclick=keyhandler;      //点击鼠标
flttgt.onmousemove=mousehandler;  //鼠标移动时
function setlights(){
  flttgt.filters[0].clear();    //先清空所有光源
  flttgt.filters[0].addcone(-10,- 10,5,275,370,0,0,150,60,10);  //添加蓝色光源
  if (g_numlights>0){
    flttgt.filters[0].addcone (285,-10,5,0,370,150,0,0,60,10);  //添加红色光源
    if (g_numlights>1)
      flttgt.filters[0].addcone (138,380,5,138,0,0,150,0,60,15);  //添加绿色光
  }
}
function keyhandler(){
  g_numlights= (g_numlights+=1)%3;
  setlights();
}
function mousehandler(){
  x=(window.event.x-80);
  y=(window.event.y-80);
  flttgt.filters[0].movelight(0,x,y,5,1);    //移动蓝光
  if (g_numlights>0){
    flttgt.filters[0].movelight(1,x,y,5,1);  //移动红光
    if (g_numlights>1)
      flttgt.filters[0].movelight(2,x,y,5,1);  //移动绿光
  }
}
setlights();
script>
body>

13-13.html

< html >
< head >
< title >探照灯 title>
< style type ="text/css" >

style>
     head>
< body >
< script language ="javascript" >
function MouseMove(){
  //移动点光源
  point.filters[0].MoveLight(0,window.event.x-10,window.event.y-20,70,1);
}
script>
< div onmousemove ="javascript:MouseMove()" id ="point" >
< img src ="building.jpg" >
div>
< script language ="javascript" >
  //添加点光源
  point.filters.light(0).addPoint(0,0,70,240,240,0,100);
  //point.filters.light(0).addPoint(0,0,100,0,150,255,100);
script>
body>

13-14.html

< html >
< head >
< title >文字跟随鼠标 title>
< style type ="text/css" >

style>
< script language ="javascript" >
var x,y;    //鼠标当前在页面上的位置
var step=10;  //字符显示间距，为了好看，step=0则字符显示没有间距
var flag=0;
var message="Cascading Style Sheet";    //跟随鼠标要显示的字符串
message=message.split("");  //将字符串分割为字符数组

var xpos=new Array()    //存储每个字符的x位置的数组
for (i=0;i  xpos[i]=-50;
}
var ypos=new Array()    //存储每个字符的y位置的数组
for (i=0;i  ypos[i]=-50;
}

for (i=0;i  //使用span来标记字符，是为了方便使用CSS，并可以自由的绝对定位
  document.write(" < span id ='span"+i+"' class ='spanstyle' >");
  document.write(message[i]);
  document.write(" span>");
}

if (document.layers){
  document.captureEvents(Event.MOUSEMOVE);
}

function handlerMM(e){ //从事件得到鼠标光标在页面上的位置
  x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX;
  y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
  flag=1;
}

function makesnake() {    //重定位每个字符的位置
  if (flag==1 && document.all) { //如果是IE
    for (i=message.length-1; i>=1; i--) {
      xpos[i]=xpos[i-1]+step;    //从尾向头确定字符的位置，每个字符为前一个字符“历史”水平坐标+step间隔，
                        //这样随着光标移动事件，就能得到一个动态的波浪状的显示效果
      ypos[i]=ypos[i-1];    //垂直坐标为前一字符的历史“垂直”坐标，后一个字符跟踪前一个字符运动
    }
    xpos[0]=x+step //第一个字符的坐标位置紧跟鼠标光标
    ypos[0]=y
    //上面的算法将保证，如果鼠标光标移动到新位置，则连续调用makenake将会使这些字符一个接一个的移动的新位置
    // 该算法显示字符串就有点象人类的游行队伍一样，
  
    for (i=0; i<=message.length-1; i++) {
      var thisspan = eval("span"+(i)+".style");    //妙用eval根据字符串得到该字符串表示的对象
      thisspan.posLeft=xpos[i];
      thisspan.posTop=ypos[i];
    }
  }
  else if (flag==1 && document.layers) {
    for (i=message.length-1; i>=1; i--) {
      xpos[i]=xpos[i-1]+step;
      ypos[i]=ypos[i-1];
    }
    xpos[0]=x+step;
    ypos[0]=y;
    for (i=0; i<=message.length-1; i++) {
      var thisspan = eval("document.span"+i);
      thisspan.left=xpos[i];
      thisspan.top=ypos[i];
    }
  }
  var timer=setTimeout("makesnake()",10)    //设置10毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。
}
document. = handlerMM;
script>
     head>
< body onLoad ="makesnake();" >
body>
html>

来源：《精通CSS+DIV网页样式与布局 》