常用js小代碼

介紹兩個有趣的計數器的設計
   儘管現在的版主們已經不太注重計數器的宣傳效果了,但計數器還是當今網站不可缺少的部分,它不僅在一定程度上反映了網站的“活力”,而且還可以通過生動 有趣的設計來加強網頁的“藝術”性,使計數器成爲網頁上的一個裝飾“亮點”。下面介紹兩種設計趣味計數器的方法,希望能對版主們有所幫助。

  一、基本素材

  趣味計數器是將計數器的設計與趣味性的顯示效果結合在一起,十種不同風格的計數器隨機出現在網頁上,爲相對靜止和嚴肅的網頁增加一些動態的效果 和趣味。第一次訪問時,計數器顯示的可能是紅色的靜態數字,第二次訪問時,計數器可能變成了不斷翻轉的動畫形式,第三次訪問時,計數器可能又變成了由虛到 實的虛幻變化形式。爲了實現這種效果,首先需要準備一些基本素材,即十種顯示類型的數字圖像文件。可以用圖形編輯工具(如Photoshop、 Animator等)根據自己的想象製作,也可以直接從網上圖片庫下載,然後將這些數字圖像以 00.gif……09.gif……90.gif……99.gif的形式存放在一個可讀取的目錄中,在下面的例子中這些圖像文件存放在 “http://localhost/images”中。這裏gif文件命名的原則是:第1位數字代表顯示類型,第2位數字代表數字值,如00.gif代 表0型數字0的gif文件,09.gif代表0型數字9的gif文件。

  二、利用JavaScript製作趣味計數器(——設計方法之一)

  1.設計思想:

  該方法的關鍵是Cookie技術和動態圖像特性的綜合運用。使用Cookie,可以在用戶端的硬盤上記錄用戶的數據,下次訪問此站點時,即可讀 取用戶端硬盤的Cookie,直接得知來訪者的身份和訪問次數等有關信息。JavaScript中通過document.cookie屬性訪問 Cookie,這個屬性包括名字、失效日期、有效域名、有效URL路徑等。用等號分開的名字和其值是Cookie的實際數據,本例中用來存儲該訪問者訪問 該頁面的次數。通過把Web頁中的圖像映射到一個images數組,一定條件下修改該數組項的特性,可以實現動態圖像顯示。本例中,首先預載入一組圖像, 每次調用該Web頁時,隨機產生新的一組圖像,通過覆蓋原圖像實現動態的趣味性效果。

  2.源程序count.html:

  < html >

  < head >

  < meta http-equiv="Content-Type"

  content="text/html; charset=gb2312">

  < title >趣味計數器< /title >

  < /head >

  < body >

  < p >< script language="JavaScript">

  var expdays=60;

  var exp=new Date();

  exp.setTime(exp.getTime()

  (expdays*24*60*60*1000));

  function count(info){

  //若是該訪客的第一次訪問,

  將計數器值賦1,否則加1累積

  var wwhcount=getcookie(’wwhcount’);

  if (wwhcount==null){

  wwhcount=1;

  }

  else{wwhcount++;}

  setcookie(’wwhcount’,wwhcount,exp);

  return countdisp(wwhcount)

  }

  function countdisp(countvar){

  //實現隨機顯示,不足6位以0補全,

  可以自己調整顯示位數

  var countvar1="000000"+countvar;

  var howFar1=countvar1.length;

  countvar1=countvar1.substring(howFar1, howFar1-1)

  var index=""+Math.floor(Math.random()*10);

  if (index=="10"){

  index="0"};

  for (var icount=0;icount< 6;icount++){

  var g=countvar1.substring(icount,icount+1);

  document.images[icount].src="http:

  //localhost/images/"+index+g+".gif";

  }

  }

  function getCookieVal(offset){

  //獲取該訪問者的已訪問次數

  var endstr=document.cookie.indexOf(";",offset);

  if (endstr==-1)

  endstr=document.cookie.length;

  return unescape(document.cookie.substring(offset,endstr));

  }

  function getcookie(name){

  //截取Cookie中的name信息段

  var arg=name+"=";

  var alen=arg.length;

  var clen=document.cookie.length;

  var i=0;

  while (i< clen){

  var j=i+alen;

  if (document.cookie.substring(i,j)==arg)

  return getCookieVal(j);

  i=document.cookie.indexOf("",i)+1;

  if (i==0) break;}

  return null;

  }

  function setcookie(name,value){

  //存儲該訪客計數器的數值

  var argv=setcookie.arguments;

  var argc=setcookie.arguments.length;

  var expires=(argc >2)?argv[2]:null;

  var path=(argc >3)?argv[3]:null;

  var domain=(argc >4)?argv[4]:null;

  var secure=(argc>5)?argv[5]:false;

  document.cookie=name+"="+escape(value)

  +((expires==null)?"":(";expires="+expires.toGMTString()))

  +((path==null)?"":(";path="+path))+((domain==null)?"

  ":(";domain="+domain))+((secure==true)?";secure":"");

  }

  function deletecookie(name){

  //使該信息行失效,

  刪除該用戶關於訪問次數的信息

  var exp=new Date();

  exp.setTime(exp.getTime()-1);

  var cval=getcookie(name);

  document.cookie=name+"="+cval+"

  ;expires="+exp.toGMTString();

  }

  < /script >< /p >

  < !--預載入圖像數組-->

  您是第< img src="http://localhost/images/00.gif"height=20 width=20

>

  < img src="http://localhost/images/00.gif "

  height=20 width=20 >

  < img src="http://localhost/images/00.gif "

  height=20 width=20 >

  < img src="http://localhost/images/00.gif "

  height=20 width=20 >

  < I mg src="http://localhost/images/00.gif "

  height=20 width=20 >

  < img src="http://localhost/images/00.gif "

  height=20 width=20 >次光臨!

  < script language="JavaScript">

  //調用count()函數,

  實現計數器的動態圖像顯示

  count();

  < /script >

  < /body >

  < /html >

  3.注意事項:

  由於使用了JavaScript語言,因此該方法具有與應用平臺的無關性,可以適用於Unix、Windows等多種平臺。另外,此計數器不同於一般意義上的訪客計數器,專門用於記錄某一訪客對某一網站的訪問次數。
 
30、頁面全屏顯示
====1、將以下代碼加入HTML的<body></body>之間:

<form>
<div align="center">
<input type="BUTTON" name="FullScreen" value="全屏顯示" onClick="window.open(document.location, 'big', 'fullscreen=yes')">
</div>
</form>

 
32、檢測後跳轉相應頁
====1、將以下代碼加入HTML的<head></head>之間:

<SCRIPT LANGUAGE="JavaScript">
<!-- Start Code
var ver = navigator.appVersion;
if (ver.indexOf("MSIE") != -1)
{
window.location.href="IE的頁面.htm"
}else
window.location.href="NS的頁面.htm"
// End Code -->
</SCRIPT>
 
34、頁面停留時間A
====1、將以下代碼加入HTML的<head></head>之間:

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
var ap_name = navigator.appName;
var ap_vinfo = navigator.appVersion;
var ap_ver = parseFloat(ap_vinfo.substring(0,ap_vinfo.indexOf('(')));
var time_start = new Date();
var clock_start = time_start.getTime();
var dl_ok=false;
function init ()
{
if(ap_name=="Netscape" && ap_ver>=3.0)
dl_ok=true;
return true;
}
function get_time_spent ()
{
var time_now = new Date();
return((time_now.getTime() - clock_start)/1000);
}
function show_secs () // show the time user spent on the side
{
var i_total_secs = Math.round(get_time_spent());
var i_secs_spent = i_total_secs % 60;
var i_mins_spent = Math.round((i_total_secs-30)/60);
var s_secs_spent = "" + ((i_secs_spent>9) ? i_secs_spent : "0" + i_secs_spent);
var s_mins_spent ="" + ((i_mins_spent>9) ? i_mins_spent : "0" + i_mins_spent);
document.fm0.time_spent.value = s_mins_spent + ":" + s_secs_spent;
window.setTimeout('show_secs()',1000);
}
// -->
</SCRIPT>

====2、將以下代碼加入HTML的<body></body>之間:

<BODY onLoad="init(); window.setTimeout('show_secs()',1);">
<form name="fm0" onSubmit="0">
<font size="-1"><I><FONT COLOR="#888888">您在本網頁的停留時間:</FONT></I></font><br>
<INPUT type="text" name="time_spent" size=7 onFocus="this.blur()">
</form>
 
35、頁面停留時間B 
====1、將以下代碼加入HEML的<body></body>之間:

<script LANGUAGE="Javascript">
<!-- Begin
pageOpen = new Date();
function bye() {
pageClose = new Date();
minutes = (pageClose.getMinutes() - pageOpen.getMinutes());
seconds = (pageClose.getSeconds() - pageOpen.getSeconds());
time = (seconds + (minutes * 60));
if (time == 1) {
time = (time + " second");
}
else {
time = (time + " seconds");
}
alert('您在本頁停留了' + time + '.謝謝!!');
}
// End -->
</script>
<body onUnload="bye()">
 
36、自動調用不同音樂
====1、將以下代碼加入HTML的<body></body>之間:

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var MSIE=navigator.userAgent.indexOf("MSIE");
var NETS=navigator.userAgent.indexOf("Netscape");
var OPER=navigator.userAgent.indexOf("Opera");
if((MSIE>-1) || (OPER>-1)) {
document.write("<BGSOUND SRC=sound.mid LOOP=INFINITE>");
} else {
document.write("<EMBED SRC=sound2.mid AUTOSTART=TRUE ");
document.write("HIDDEN=true VOLUME=100 LOOP=TRUE>");
}
// End -->
</SCRIPT>
 
網頁之定時器的靈活運用
瀏覽別人的站點時,有時會看到別人的站點有一個飛雪連天的背景,或者頁面可以在一定時間之後自動跳轉,這是怎麼實現的呢?

其實,只要掌握一點javascript的定時器的技術,這一切就可簡單搞定。

頁面上簡單地跳轉可以使用html頭部的meta標誌插入到head,就可以實現頁面的跳轉。

而在javascritp中,有兩個關於定時器的專用函數,它們是:

1.倒計定時器:timename=setTimeout("function();",delaytime);

2.循環定時器:timename=setInterval("function();",delaytime);

function()是定時器觸發時要執行的是事件的函數,可以是一個函數,也可以是幾個函數,或者javascript的語句也可以,單要用;隔開;delaytime則是間隔的時間,以毫秒爲單位。

倒計時定時器就是在指定時間後觸發事件,而循環定時器就是在間隔時間到來時反覆觸發事件,其區別在於:前者只是作用一次,而後者則不停地作用。

倒計時定時器一般用於頁面上只需要觸發一次的的情況,比如點擊某按鈕後頁面在一定時間後跳轉到相應的站點,也可以用於判斷一個瀏覽者是不是你的站點 上的“老客”,如果不是,你就可以在5秒或者10秒後跳轉到相應的站點,然後告訴他以後再來可以在某個地方按某一個按鈕就可以快速進入。

循環定時器一般用於站點上需要從復執行的效果,比如一個javascript的滾動條或者狀態欄,也可以用於將頁面的背景用飛雪的圖片來表示。這些事件需要隔一段時間運行一次。

有時候我們也想去掉一些加上的定時器,此時可以用clearTimeout(timename) 來關閉倒計時定時器,而用clearInterval(timename)來關閉循環定時器。
 
D10:在IE中使用JavaScript
在瀏覽器中顯示信息

--------------------------------------------------------------------------------

JavaScript 提供了兩種方式來在瀏覽器中直接顯示數據。可以使用 write( ) 和 writeln( ),這兩個函數是document 對象的方法。也可以在瀏覽器中以表格的方式顯示信息,以及用 警告、提示和確認 消息框來顯示信息。

使用 document.write( ) 和 document.writeln( )
顯示信息最常用的方式是 document 對象的 write( ) 方法。該方法用一個字符串作爲其參數,並在瀏覽器中顯示。該字符串可以是普通文本或 HTML。

字符串可以用單引號或雙引號引起來。這樣可以引用那些包含引號或撇號的內容。

document.write("Pi is approximately equal to " + Math.PI); document.write( );


--------------------------------------------------------------------------------

提示 下面的簡單函數可以避免在瀏覽器中顯示信息時不得不鍵入 "document.write"。該函數不能告知要顯示的信息是否未定義,而是發佈給命令 "w();",該命令將顯示一個空行。
function w(m) { // 編寫函數。 m = "" + m + ""; // 確保變量 m 是一個字符串。 if ("undefined" != m) { // 判別是否爲空或其它未定義的項。 document.write(m); } document.write("<br>"); } w('<IMG SRC="horse.gif">'); w(); w("This is an engraving of a horse."); w();

 

--------------------------------------------------------------------------------


writeln( ) 方法與 write( ) 方法幾乎一樣,差別僅在於是前者將在所提供的任何字符串後添加一個換行符。在 HTML 中,這通常只會在後面產生一個空格;不過如果使用了 <PRE> 和 <XMP> 標識,這個換行符會被解釋,且在瀏覽器中顯示。

在調用 write( ) 方法時,如果該文檔不處於在調用 write( ) 方法時的打開和分析的過程中,該方法將打開並清除該文檔,所以它可能是有危險的。該示例顯示了一個每隔一分鐘就顯示時間的腳本,但是在第一次顯示後由於它 從過程中將自己清除,因此會導致失敗。

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function singOut() { var theMoment = new Date(); var theHour = theMoment.getHours(); var theMinute = theMoment.getMinutes(); var theDisplacement = (theMoment.getTimezoneOffset() / 60); theHour -= theDisplacement; if (theHour > 23) { theHour -= 24 } document.write(theHour + " hours, " + theMinute + " minutes, Coordinated Universal Time."); window.setTimeout("singOut();", 60000); } </SCRIPT> </HEAD> <BODY> <SCRIPT> singOut(); </SCRIPT> </BODY> </HTML>

如果使用 window 對象的 alert() 方法而不是 document.write(),則該腳本可以運行。

window.alert(theHour + " hours, " + theMinute + " minutes, Coordinated Universal Time."); window.setTimeout("singOut();", 60000); }

清除當前文檔
document 對象的 clear() 方法將清空當前文檔。該方法也將清除您的腳本(隨文檔的其他部分一起),因此要特別注意該方法的使用方式及在什麼時候使用該方法。

document.clear();


使用消息框

使用警告、提示和確認
可以使用警告、確認和提示消息框來獲得用戶的輸入。這些消息框是 window 對象的接口方法。由於 window 對象位於對象層次的頂層,因此實際應用中不必使用這些消息框的全名(例如 "window.alert()"),不過採用全名是一個好注意,這樣有助於您記住這些消息框屬於哪個對象。

警告消息框
alert 方法有一個參數,即希望對用戶顯示的文本字符串。該字符串不是 HTML 格式。該消息框提供了一個“確定”按鈕讓用戶關閉該消息框,並且該消息框是模式對話框,也就是說,用戶必須先關閉該消息框然後才能繼續進行操作。

window.alert("歡迎!請按“確定”繼續。");

確認消息框
使用確認消息框可向用戶問一個“是-或-否”問題,並且用戶可以選擇單擊“確定”按鈕或者單擊“取消”按鈕。confirm 方法的返回值爲 true 或 false。該消息框也是模式對話框:用戶必須在響應該對話框(單擊一個按鈕)將其關閉後,才能進行下一步操作。

var truthBeTold = window.confirm("單擊“確定”繼續。單擊“取消”停止。"); if (truthBeTold) { window.alert("歡迎訪問我們的 Web 頁!"); } else window.alert("再見啦!");

提示消息框
提示消息框提供了一個文本字段,用戶可以在此字段輸入一個答案來響應您的提示。該消息框有一個“確定”按鈕和一個“取消”按鈕。 如果您提供了一個輔助字符串參數,則提示消息框將在文本字段顯示該輔助字符串作爲默認響應。否則,默認文本爲 "<undefined>"。

與alert( ) 和 confirm( ) 方法類似,prompt 方法也將顯示一個模式消息框。用戶在繼續操作之前必須先關閉該消息框

var theResponse = window.prompt("歡迎?","請在此輸入您的姓名。");
 
37、將站點加入頻道
====1、加入channel的方法:使用如下連接指向你的頻道文件*.cdf。

<a href="javascript:window.external.addChannel('jschannel.cdf')">ABC</a>

 
38、將站點加入收藏
====1、將以下代碼加入HEML的<body><body>之間

<script language="JavaScript">
function bookmarkit(){window.external.addFavorite('http://yuxuemei.yeah.net','網絡世界')}
if (document.all)document.write('<a href="#" onClick="bookmarkit()"><strong>將本站加入收藏夾</strong></a>')
</script>
 
39、自動刷新頁面
====1、將以下代碼加入HEML的<body></body>之間:

<meta http-equiv="refresh" content="20;
url=http://想要刷新的頁面.htm">
 
40、禁止查看源代碼
====1、將以下代碼加入到HEML的<body></body>之間

<SCRIPT language=javascript>
function click() {if (event.button==2) {alert('不許你偷看!');}}document.onmousedown=click
</SCRIPT>
 
41、自動彈出窗口

  自動彈出式窗口(調用一個窗體時自動彈出一個新的窗體)
  1、調整窗口大小:通過width=200,height=170控制。還可以控制是否有滾動欄等。
  2、popup.location.href = '用於說明窗口內容.htm';這一行在做什麼:就是設置窗口中出現的內容的文件名

====1、將如下代碼加入HTML的<head></head>之間:

<script language="JavaScript">
<!--
var gt = unescape('%3e');
var popup = null;
var over = "Launch Pop-up Navigator";
popup = window.open('', 'popupnav', 'width=200,height=170,resizable=1,scrollbars=auto');
if (popup != null) {
if (popup.opener == null) {
popup.opener = self;
}
popup.location.href = '新窗口的文件名.htm';
}
// -->
</script>
 
D11:利用Javascript實現測試瀏覽器類型再調用相應的主頁
 
由於IE和Netscape的某些不兼容,使得主頁製作出來後在兩者中有較大差別,有的甚至不能使用。爲便於管理,最佳的方法就是先測試瀏覽器類型,再調用相應的主頁。


  它的做法就是在此頁上設置如:


  <html>
  <head>
  <title>檢測瀏覽器</title>
  <SCRIPT LANGUAGE="JavaScript">
  function TestBrowser(){
  ie = ((navigator.appName == "Microsoft Internet Explorer") &&(parseInt(navigator.appVersion) >= 3 ))
  ns = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 3 ))

  if (ns) {
  setTimeout('location.href="indexns.html"',5);
  } else {
  setTimeout('location.href="indexie.html"',5);
  }
  }
  </script>
  </head>
  <body onLoad="TestBrowser()">
  測試您的瀏覽器,五秒自動進入!
  </body>
  <html>


  這樣過五秒鐘後若檢測到用戶使用瀏覽器爲Netscape則調用indexns.html,否則調用indexie.html。

 
D12:利用Java Script實現自動加上最後修改時間
 
 我們在 HTML 文件檔完成了以後,常會加上一行文件最後修改的日期。現在你可不用擔心每次都要去改或是忘了改了,你可以很簡單的寫一個如下的描述語法程式。就可以自動的爲你每次產生最後修改的日期了。


  <html>
  <body>
  This is a simple HTML- page.
  <br>
  最後更新:
  <script language="JavaScript">
  <!-- hide script from old browsers
  document.write(document.lastModified)
  // end hiding contents -->
  </script>
  Last Modified.
  </body>
  </html>
 
43、自動滾屏
====1、將以下代碼加入HEMLl的<body></body>之間:

<script language="JavaScript">
var position = 0;
function scroller() {
if (position !=700 ) {
position++;
scroll(0,position);
clearTimeout(timer);
var timer = setTimeout("scroller()",50);
timer;}}
scroller() ;
</script>
 
D14:如何在頁面內加入日期
 
 我們要告訴你一個使用日期和時間的例子,是從你個人客戶端機器獲取日期和時間。
做法如下:
<script language="LiveScript">
<!-- Hiding
 today = new Date()
 document.write("現在時間是  ",today.getHours(),":",
 today.getMinutes())
 document.write("<br>今天日期爲  ", today.getMonth()+1,
 "/",today.getDate(),"/",today.getYear());
 // end hiding contents -->
</script>

  在本例中,我們必需首先建立一個日期變數,這可以由 today= new Date()來完成。如果沒有特別指定時間與日期的話,瀏覽器將會採用本地客戶端機器的時間。若將它放入變數 today 中,這兒要注意的是,我 們並沒有宣告 today 這個變數的型態。
  除以上功能外,在建立日期物件時你也可以事先設定日期如下:
   docStarted= new Date(96,0,13)
  首先是年,接着是月(但記得減 1),再接着是日。同樣的方法也可以加上時間的設定。如下 
   docStarted = new Date(96,0,13,10,50,0)
   前三個是日期的年、月、日,接着是時、分、秒。最後,我們必須提醒你 JavaScript 並沒有實際的日期型態,但是它卻能毫不費力地顯示出日期和時間,原因是它是從 1 / 1 / 1970 0 0h 開始以 ms(milli seconds) 來計算目前的時間的,這聽起來似乎有些複雜。但你倒不用擔心,它有標準 的共用函數可以計算,你只要知道如何用就可以了。

 另一個方法是:
 要問現今個人主頁最流行設計是什麼,我想應該是在首頁的開頭寫明當前的日期吧!其方法很簡單,只要將以下的程序代碼加入即可實現:

  < SCRIPT LANGUAGE="JAVASCRIPT">

  < !--

  var today=new Date;

  var week=new Array(7);

  week[0]="天";

  week[1]="一";

  week[2]="二";

  week[3]="三";

  week[4]="四";

  week[5]="五";

  week[6]="六";

  document.write("今天"+today.getYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日;星期"+week[today.getDay()]);

  //-->

  < /SCRIPT>

  要提醒大家的是:

  1、要注意月份的表示,getMonth()得到的是0-11;0表示一月,1表示二月依此類推,所以我們要顯示月份要先加1。

  2、另外,Java對兩千年問題也已作了考慮,當小於2000年時Java顯示兩位數字如1998年顯示98,當大於2000年時,顯示四位數字。避免了出現兩千年問題。
 
D15:如何在網頁上添加前進和後退
  我們來看一個可以讓你瀏覽不同文件的語法,我們這兒所要談的是 back() 和 forward()這兩個函數, 如果你本身的文件中有一個連結是回到你本身文件的上一個連結文件的話,那和Netscope 瀏覽器 中所提供的back 按鈕功能是不一樣的。例如,在我的文件中,正常的連結連到某些我們認爲會是這個文件來源的地方, 稱 這 個連結叫 back,而 Netscape 瀏覽器中的 back按鈕,則是回到你歷史記錄中的上一個連結,所以不同JavaScript,也能提供類似 Netscape 中back 按鈕的功能,試試這個連結,你可以體會一下回來的感覺,這個語法如下所示:

 <html>
 <body>
 <FORM NAME="buttonbar">
 <INPUT TYPE="button" VALUE="Back" onClick="history.
 back()">
 <INPUT TYPE="button" VALUE="JS- Home" onClick="location=
 'script.htm'">
 <INPUT TYPE="button" VALUE="Next" onCLick="history.
 forward()">
 </FORM>
 </body>
 </html>
 以上你也可以直接寫成 history.go(-1) 與 history.go(1)

 
D16:如何使用瀏覽器的狀態欄
 
以下是原始語法
<HTML>
<HEAD>
   <TITLE>瀏覽器的狀態欄</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<SCRIPT language="JavaScript">
<!-- Hide
function statbar(txt) {
window.status = txt;
}
// -->
</SCRIPT>
<CENTER></CENTER>
<CENTER><B><FONT COLOR="#0000FF"></FONT></B></CENTER>
<P><FORM>
<P><FONT COLOR="#000000">  <INPUT type="button"
    name="look" value="顯示!"
    onclick="statbar('嗨  這是狀態列訊息!');"> <INPUT
    type="button" name="erase" value="清除!"
    onclick="statbar('');"></FONT>
<BR></FORM>
<CENTER><FONT COLOR="#000000"> </FONT></CENTER>
</BODY>
</HTML>

  在這個例子中我們建了二個按鈕,此二個按個均會去呼叫 statbar(txt) 。函數中的 txt 表 示此函數將經由函數呼叫時傳一個變數值進來 (我們叫 txt但它可代表任意不同的值)你可以見到在產生按鈕的 <form> 標 籤中,呼叫到函數statbar(txt)在此我們就不再寫成 txt 。
  直接把要顯示在狀態列上的文字寫上去,於是我們可以見到這樣的效 果,變數 txt 經由 'Value' 中得它的值,然後傳入所呼叫的函數中。所以當你按"顯示"的按鈕時,statbar(txt) 函數被呼叫,然後 txt 將讀入字串"嗨  這是狀態列訊息" 並且傳入函數中,這種經由變數傳遞值的方式,可以使函數相當具有可變性。
   接着來看第二個按鈕"清除" 它也呼叫同樣的函數,我們並不需要因爲傳遞參數的不同而言兩個不同的函數。所以現在我們可以來看看statbar(txt) 這個函數做些什麼了,其實它相當簡單。你只要將 txt 所要傳的文字內容指定給 window.status 這個變數就可以了。即是 window.status =txt,而在清除狀態列的時候,只是將空字串寫入即可。不過要注意的是必須使用單引號及雙引號來區別,這樣才容易區分。

 如何製作狀態列跑馬燈效果  

以下是我們所製作的跑馬燈效果的源程序

 <html>
 <head>
 <script language="JavaScript">
 <!-- Hide
 var scrtxt="這兒的訊息可以改爲你要告訴別人的話  "+"
 或是注意事項 ...";
 var lentxt=scrtxt.length;
 var width=100;
 var pos=1-width;
 function scroll() {
 pos++;
 var scroller="";
 if (pos==lentxt) {
 pos=1-width;
 }
 if (pos<0) {
 for (var i=1; i<=Math.abs(pos); i++) {
 scroller=scroller+" ";}
 scroller=scroller+scrtxt.substring(0,width-i+1);
 }
 else {
 scroller=scroller+scrtxt.substring(pos,width+pos);
 }
 window.status = scroller;
 setTimeout("scroll()",150);
 }
 //-->
 </script>
 <body onLoad="scroll();return true;">
 Here goes your cool page!
 </body>
 </html>
   此一程式中我們使用了和上面同樣的函數(或部分)setTimeout(...)通知,計時器在時間到時去呼叫 scroll()函數,使得跑馬燈中的文字往前進一格。 在函數的一開始,有一些較羅嗦的計算部分,但這並不難使我們瞭解,這些計算主要是用來取得跑馬燈中的文字應該由那一個位置開始顯示的用途。一開始當然是必 需加一些空白在字的左邊,讓文字部分能儘可能靠右,然後再一字字的將空白減少,結果自然就造成字往前移動的效果了。
 
D17:javascript錯誤代碼及相應解釋大全
 
JScript 運行時錯誤

JScript 運行時錯誤是指當 JScript 腳本試圖執行一個系統不能運行的動作時導致的錯誤。當正在運行腳本、計算變量表達式、或者正在動態分配內存時出現 JScript 運行時錯誤時。

錯誤號 描述

5029 數組長度必須爲一有限正整數

5030 必須賦給數組長度一個有限正數

5028 需要 Array 或 arguments 對象

5010 需要 Boolean

5003 不能給函數返回值賦值

5000 不能給 ’this’ 賦值

5006 需要 Date 對象

5015 需要 Enumerator 對象

5022 異常拋出,但無法抓住

5020 正則表達式中缺少“)”

5019 正則表達式中缺少“]”

5023 函數沒有合法的 Prototype 對象

5002 需要 Function 對象

5008 非法賦值

5021 字符集範圍無效

5014 需要 JScript 對象

5001 需要 Number 類型

5007 需要 Object 類型

5012 需要對象的成員

5016 需要正則表達式對象

5005 需要 String

5017 正則表達式語法錯誤

5026 小數部分的位數越界

5027 精度越界

5025 待解碼的 URI 編碼非法

5024 待解碼的 URI 包含有非法字符

5009 未定義標識符

5018 未預期的限定符

5013 需要 VBArray

JScript 語法錯誤

JScript 語法錯誤是指當 JScript 語句違反了 JScript 腳本語言的一條或多條語法規則時導致的錯誤。JScript 語法錯誤發生在程序編譯階段,在開始運行該程序之前。

錯誤號 描述

1019 在循環外不能有“break”

1020 在循環外不能有“continue”

1030 條件編譯已關閉

1027 一條 “switch” 語句中只能有一個 “default”

1005 需要“(”

1006 需要“)”

1012 需要“/”

1003 需要“:”

1004 需要“;”

1032 需要“@”

1029 需要“@end

1007 需要“]”

1008 需要“{”

1009 需要“}”

1011 需要“=”

1033 需要“catch”

1031 需要常數

1023 需要十六進制數

1010 需要標識符

1028 需要標識符、字符串或者數字

1024 需要“while”

1014 非法字符

1026 未找到標籤

1025 標籤定義重複

1018 函數外有 ’return’ 語句

1002 語法錯誤

1035 “Throw”的後面必須跟有一個表達式,且在同一源代碼行上

1016 註釋未結束

1015 字符串常數未結束
 
D18:JavaScript[對象.屬性]集錦 
SCRIPT 標記

用於包含JavaScript代碼.

語法

屬性

LANGUAGE 定義腳本語言

SRC 定義一個URL用以指定以.JS結尾的文件

windows對象

每個HTML文檔的頂層對象.

屬性

frames[] 子楨數組.每個子楨數組按源文檔中定義的順序存放.

feames.length 子楨個數.

self 當前窗口.

parent 父窗口(當前窗口是中一個子窗口).

top 頂層窗口(是所有可見窗口的父窗口).

status 瀏覽器狀態窗口上的消息.

defaultStatus 當status無效時,出現在瀏覽器狀態窗口上的缺省消息.

name 內部名,爲由window.open()方法打開的窗口定義的名字.

方法

alert("message") 顯示含有給定消息的"JavaScript Alert"對話框.

confirm("message") 顯示含有給定消息的"Confirm"對話框(有一個OK按鈕和一個Cancel按鈕).如果用戶單擊OK返回true,否則返回false.

prompt("message") 顯示一個"prompt"對話框,要求用戶根據顯示消息給予相應輸入.

open("URL","name") 打開一個新窗口,給予一個指定的名字.

close() 關閉當前窗口.

frame對象

它是整個瀏覽器窗口的子窗口,除了status,defaultStatus,name屬性外,它擁有window對象的全部屬性.

location對象

含有當前URL的信息.

屬性

href 整個URL字符串.

protocol 含有URL第一部分的字符串,如http:

host 包含有URL中主機名:端口號部分的字符串.如//www.cenpok.net/server/

hostname 包含URL中主機名的字符串.如http://www.cenpok.net

port 包含URL中可能存在的端口號字符串.

pathname URL中"/"以後的部分.如~list/index.htm

hash "#"號(CGI參數)之後的字符串.

search "?"號(CGI參數)之後的字符串.

document對象

含有當前文檔信息的對象.

屬性

title 當前文檔標題,如果未定義,則包含"Untitled".

location 文檔的全URL.

lastModified 含有文檔最後修改日期.

referrer 調用者URL,即用戶是從哪個URL鏈接到當前頁面的.

bgColor 背景色(#xxxxxx)

fgColor 前景文本顏色.

linkColor 超鏈接顏色.

vlinkColor 訪問過的超鏈顏色.

alinkColor 激活鏈顏色(鼠標按住未放時).

forms[] 文檔中form對象的數組,按定義次序存儲.

forms.length 文檔中的form對象數目.

links[] 與文檔中所有HREF鏈對應的數組對象,按次序定義存儲.

links.length 文檔中HREF鏈的數目.

anchors[] 錨(...)數組,按次序定義存儲.

anchors.length 文檔中錨的數目.

方法

write("string") 將字符串突出給當前窗口.(字符串可以含有HTML標記)

writeln("string") 與write()類似,在結尾追加回車符,只在預定格式文本中(

...

...
)生效.
clear() 清當前窗口.

close() 關閉當前窗口.

form對象

屬性

name

中的NAME屬性的字符串值.

method 中METHOD屬性的類值,"0"="GET" ,"1"="POST" .

action 中ACTION屬性的字符串值.

target 表格數據提交的目標,與標記中相應屬性一致.

elements[index] elements屬性包含form中的各個元素.

length 表格中的元素個數.

方法

submit() 提交表格.

事件處理器onSubmit() 用戶單擊一個定義好的按鈕提交form時運行的代碼.

text和textarea對象

屬性

name NAME屬性的字符串值.

value 域內容的字符串值.

defaultValue 域內容的初始字符串值.

方法

focus() 設置對象輸入焦點.

blur() 從對象上移走輸入焦點.

select() 選定對象的輸入區域.

事件處理器

onFocus 當輸入焦點進入時執行.

onBlur 當域失去焦點時執行.

onSelect 當域中有部分文本被選定時執行.

onChange 當域失去焦點且域值相對於onFocus執行有所改變時執行.
 
42、頁面轉換特效
====1、將以下代碼加入HEML的<head></head>之間:

<head>
<meta http-equiv="Page-Enter" content="revealTrans(Duration=5.0,Transition=5)">
</head>
 
44、背景時鐘
====1、以下是這個效果的全部代碼。[最好從一個空頁面開始]

<html>
<head>
<TITLE>背景時鐘</TITLE>
<script language=javaScript>
<!--//
function clockon() {
thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
thistime = hours+":"+minutes+":"+seconds
if(document.all) {
bgclocknoshade.innerHTML=thistime
bgclockshade.innerHTML=thistime
}
if(document.layers) {
document.bgclockshade.document.write('<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Verdana;color:FFAAAAA;font-size:120px;top:10px;left:152px">'+thistime+'</div>')
document.bgclocknoshade.document.write('<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Verdana;color:DDDDDD;font-size:120px;top:10px;left:150px">'+thistime+'</div>')
document.close()
}
var timer=setTimeout("clockon()",200)
}
//-->
</script>
<link rel="stylesheet" href="../style.css"></head>
<body onLoad="clockon()">
<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Arial;color:FF8888;font-size:120px;top:102px;left:152px"></div>
<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Arial;color:DDDDDD;font-size:120px;top:100px;left:150px"></div>
<div id="mainbody" style="position:absolute; visibility:visible">
</div>
</body>
</html>


  說明:時鐘顯示的位置需要你修正TOP,LEFT參數來確定。TOP表示層距離顯示器頂部的象素值,LEFT表示距離左側的象素。
 
D21:神奇的頁面滾動控制(一)
  當頁面內容很長時,我們一般使用窗口的滾動條來實現上下移動,但這往往要使用到多次的鼠標點擊動作。在我的機器上,當瀏覽長頁面時,我會在頁面的空白處同時按下我的2鍵鼠標的左右鍵,這時,就會出現一個上下滾動指示圖標,它是怎麼生成的呢??
  但是,是否能在HTML頁面上製作這樣一個指示器呢?答案當然是:完全可以!請跟我來。

   實現思路

   1、首先,準備好2個圖形文件,一個代表向上,另一個代表向下。

 

   2、然後,進行頁面佈局,我們可以將這個指示器圖標放在你想要的任意位置,這裏我們假設它位於當前窗口的右下部。

   3、針對不同的瀏覽器,設置好相應的對象變量。這裏,我們只考慮當前2種主流瀏覽器:IE和Netscape。

   4、對2個指示器圖標,分別設置onmouseover與onmouseout事件處理,生成當前操作狀態。然後據此執行定時滾動函數,實現頁面的滾動效果。

   代碼詳解

< HTML >< HEAD >
< META http-equiv=Content-Type content="text/html; charset=gb2312" >
< STYLE type=text/css >
< !--
/*設置一個樣式
#item { LEFT: 0px; VISIBILITY: hidden; POSITION: absolute }
-- >
< /STYLE >

< SCRIPT language=JavaScript >
< !--

//設置變量
//設置變量isNS,判別瀏覽器類型。對於NetScape瀏覽器,document.layers返回true值
var isNS=(document.layers);
//設置引用對象時的變量名稱
//對於IE瀏覽器,可見控制的引用值爲document.all.object.style.visibility=visible
//對於Ns瀏覽器,可見控制的引用值爲document.object.visibility=show
var _all=(isNS)? '' : 'all.' ;
var _style=(isNS)? '' : '.style' ;
var _visible=(isNS)? 'show' : 'visible';

//設置其他變量:w_x與w_y:座標值,okscroll:滾動與否,godown:是否向下
var w_x, w_y, item, okscroll=false, godown;

function init(){
//初始化運行函數

//將引用的對象賦值給item變量,這樣,在隨後的對象賦值操作中,可以簡化代碼的編寫,並保持兼容性
//注意:這是一個非常好的編程習慣
item=eval('document.'+_all+'item'+_style);
//取得當前窗口的尺寸大小等參數,並移動指示器到屏幕的右下角
getwindowsize();

//使指示器可見
item.visibility=_visible;

//啓動滾動判斷定時函數,監測操作動作
scrollpage();
}

function getwindowsize() {
//取得當前窗口大小參數,並根據這些數值移動指示器到屏幕右下角
//注意:當用鼠標改變窗口的大小時,要根據當前最新的窗口長寬參數設置指示器的位置。否則,就可能看不到停留在
//原來位置的指示器了。

//對於IE,document.body.clientWidth表示當前窗口的寬度,document.body.clientHeight表示高度,單位是
//象素px。如果是Ns瀏覽器,對應爲window.innerWidth和window.innerHeight。
w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth;
w_y=(isNS)? window.innerHeight : document.body.clientHeight;

//接着,設置代表指示器區域的層的寬度與高度。
(isNS)? item.clip.width=42: item.width=42;
(isNS)? item.clip.height=20 : item.height=20;

//根據上面設置的參數,移動指示器到相應位置
moveitem();
}

function moveitem() {
//移動指示器

//對於NS瀏覽器
if (isNS) {
   item.moveTo((pageXOffset+w_x-70),(w_y+pageYOffset-50))
   }else{
        //如果是IE,直接給層的2個屬性賦值:pixelLeft代表X座標,pixelTop代表Y座標
        //注意:當屏幕發生滾動時,document.body.scrollLeft與document.body.scrollTop分別代表
        //滾動的橫向距離與縱向距離。而w_x與w_y分別表示了指示器在當前窗口的相對座標位置,
        //所以,要對2者進行相加操作,從而得到指示器的絕對座標位置。
        item.pixelLeft=document.body.scrollLeft+w_x-70;
        item.pixelTop=w_y+document.body.scrollTop-50;
   }
}

function resizeNS() {
//對於Ns瀏覽器,當窗口大小變化時,執行定時操作

//setTimeout函數設置了定時執行的操作,這裏表示:每400毫秒執行document.location.reload()操作
setTimeout('document.location.reload()',400);
}

 

 

請看----神奇的頁面滾動控制(二)
 
 
D22:神奇的頁面滾動控制(二)
function scrollpage() {
//頁面滾動控制函數

  status = '';
  //okscroll與godown都是滾動狀態標誌,其值由指示器層的onmouseover與onmouseout2個事件控制。
  //window.scrollBy(x,y)控制頁面滾動,x、y分別表示橫向與縱向滾動的距離,單位是象素px。
  //當設置y值更大時,每次滾動的距離也將更大。
  if (okscroll) {
    if (godown) {
      (isNS)? window.scrollBy(0,4) : window.scrollBy(0,4) ;
    } else {
     (isNS)? window.scrollBy(0,-4) : window.scrollBy(0,-4) ;
    }
  }

  //頁面滾動後,指示器已不再停留在我們期待的位置。所以,要再次執行移動函數移動它到屏幕的右下角。
  //這樣,看起來好像它總是在那裏 ;-)
  moveitem();

  //設置滾動函數定時執行。這裏的時間,表示了監測用戶操作狀態的週期,越小表示越精確,但程序也將
  //更“忙”。設置得過於長,就會產生慢動作的延遲效果,好像計算機很遲鈍,當我們將鼠標點到向下指示器
  //時,屏幕並沒有馬上做出反應,而是等了一段時間,才向下滾動 ;-(
  //根據你的需要,並進行測試,設置這個數值。
  setTimeout('scrollpage()', 158);
}

//頁面加載後,啓動相關腳本函數
//設置頁面加載後,首先啓動init函數
window.onload=init;

//設置當窗口大小發生變換時啓動的函數
(isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ;

//  End -- >
< /SCRIPT >

< BODY >

 

< DIV id=item >< A onmouseover="okscroll=true; godown=true;"
onmouseout=okscroll=false href="javascript:void(0)" >< IMG
src="down.gif" border=0 >< /A >< A
onmouseover="okscroll=true; godown=false;" onmouseout=okscroll=false
href="javascript:void(0)" >< IMG src="up.gif" border=0 >< /A > < /DIV >
< P >

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章