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網頁樣式與佈局 》