DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 8個JavaScript小特效代碼
8個JavaScript小特效代碼
編輯:JavaScript綜合知識     

 1.不同時間段顯示不同問候語 

〈script Language="Javascript"〉  〈!--   var text=""; day = new Date( ); time = day.getHours( );   if (( time〉=0) && (time 〈 7 ))     text="夜貓子,要注意身體哦! "   if (( time 〉= 7 ) && (time 〈 12))     text="今天的陽光真燦爛啊,你那個朋友呢?"   if (( time 〉= 12) && (time 〈 14))     text="午休時間。您要保持睡眠哦!"   if (( time 〉=14) && (time 〈 18))     text="祝您下午工作愉快! "   if ((time 〉= 18) && (time 〈= 22))     text="您又來了,可別和MM聊太久哦!"   if ((time 〉= 22) && (time 〈 24))     text="您應該休息了!"   document.write(text)   //---〉  〈/script〉 

2.慢慢變大的窗口 

〈script Language="Javascript"〉  〈!--   var Windowsheight=100   var Windowswidth=100   var numx=5   function openwindow(thelocation){   temploc=thelocation   if   (!(window.resizeTo&&document.all)&&!(window.resizeTo&&document.getElementById))   {     window.open(thelocation)     return   }   windowsize=window.open("","","scrollbars")   windowsize.moveTo(0,0)   windowsize.resizeTo(100,100)   tenumxt()   }   function tenumxt(){   if (Windowsheight〉=screen.availHeight-3)     numx=0   windowsize.resizeBy(5,numx)   Windowsheight+=5   Windowswidth+=5   if (Windowswidth〉=screen.width-5)   {     windowsize.location=temploc     Windowsheight=100     Windowswidth=100     numx=5     return   }   setTimeout("tenumxt()",50)   }   //--〉  〈/script〉  〈p〉〈a href="javascript:openwindow(’http://www.ccjol.com’)"〉進入〈/a〉 

3.改變IE地址欄的IE圖標 

我們要先做一個16*16的icon(圖標文件),保存為index.ico。把這個圖標文件上傳到根目錄下並在首頁〈head〉〈/head〉之間加上如下代碼:   〈link REL = "Shortcut Icon" href="index.ico"〉 

4.讓網頁隨意後退 

〈a href="javascript:history.go(-X)"〉X〈/a〉 //把X換成你想要後退在頁數   //把“-”變成“+”就為前進 

5.鼠標指向時彈出信息框 

在〈body〉〈/body〉之間加上如下代碼:   〈a href onmouseover="alert(’彈出信息!’)"〉顯示的鏈接文字〈/a〉 

6.單擊鼠標右鍵彈出添加收藏夾對話框 

在〈body〉〈/body〉之間加上如下代碼:   〈script Language=Javascript〉 if (document.all)   document.body.onmousedown=new Function("if (event.button==2||event.button==3)   window.external.addFavorite(’您的網址’,’您的網站名稱)")   〈/script〉 

7.隨機變換背景圖象(一個可以刷新心情的特效) 

在〈head〉〈/head〉之間加上如下代碼:   〈script Language="Javascript"〉  image = new Array(4); //定義image為圖片數量的數組  image [0] = ’tu0.gif’ //背景圖象的路徑  image [1] = ’tu1.gif’   image [2] = ’tu2.gif’   image [3] = ’tu3.gif’   image [4] = ’tu4.gif’   number = Math.floor(Math.random() * image.length);   document.write("〈BODY BACKGROUND="+image[number]+"〉");   〈/script〉 

8.表格的半透明顯示效果 

〈head〉  〈style〉  .alpha{filter: Alpha(Opacity=50)} //50表示50%的透明度  〈/style〉 〈/head〉   〈body〉  〈table border="1" width="100" height="62" class="alpha" bgcolor="#F2A664" 〉  〈tr〉  〈td width="100%" height="62"〉  〈div align="center"〉很酷吧!〈/div〉  〈/td〉  〈/tr〉  〈/table〉 〈/body〉

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved