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" >
<!--
body{
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
}
form{padding:0px;margin:0px;}
input{
  border:1px solid #000000;
  width:40px;
}
input.btn{width:60px; height:18px;}
span{font-family:黑体;font-size:60px; font-weight:bold;}
-->
</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 >
<!--
table.formdata{
  border:1px solid #5F6F7E;
  border-collapse:collapse;
  font-family:Arial;
}
table.formdata caption{
  text-align:left;
  padding-bottom:6px;
}
table.formdata th{
  border:1px solid #5F6F7E;
  background-color:#E2E2E2;
  color:#000000px;
  text-align:left;
  font-weight:normal;
  padding:2px 8px 2px 6px;
  margin:0px;
}
table.formdata td{
  margin:0px;
  padding:0px;
  border:1px solid #ABABAB;  /* 单元格边框 */
}
table.formdata input{
  width:100px;
  padding:1px 3px 1px 3px;
  margin:0px;
  border:none;        /* 输入框不要边框 */
  font-family:Arial;
}
.btn{
  border:1px solid #0083f2;
  font-family:Arial;
}
-->
</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" >
<!--
div{
  font-family:Arial;
  position:absolute;
}
-->
</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" >
<!--
body{
  background-color:#000000;  /* 页面背景色 */
}
input{
  background:transparent;    /* 输入框背景透明 */
  border:none;        /* 无边框 */
  color:#ffb400;
  font-size:45px;
  font-weight:bold;
  font-family:黑体;
}
-->
</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" >
<!--
body{
  background:#000000;
}
img{
  filter:BlendTrans(duration=3);
  border:none;
}
-->
</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" >
<!--
body{
  background:#000000;
}
img{
  filter:RevealTrans(Duration=3,Transition=23);
  border:none;
}
-->
</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" >
<!--
img.light{
  filter:light;
  border:none;
}
-->
</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" >
<!--
body{
  background-color:#000000;
}
td{
  filter:light;
}
-->
</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" >
<!--
body{
  background-color:#000000;
}
div{
  filter:light;
  width:300px;    /* 这句必须得有 */
}
-->
</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" >
<!--
body{
  background-color:#FFFFFF;
}
.spanstyle{
  color:#2244FF;
  font-family:"Courier New";
  font-size:18px;
  text-decoration:overline underline;
  font-weight:bold;
  position:absolute;    /* 绝对定位 */
  top:-50px;
}
-->
</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<message.length;i++) {
  xpos[i]=-50;
}
var ypos=new Array()    //存储每一个字符的y位置的数组
for (i=0;i<message.length;i++) {
  ypos[i]=-50;
}

for (i=0;i<message.length;i++) {    //动态生成显示每一个字符span标记,
  //使用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网页样式与布局 》