解決iframe無法自動調整高度的方法-分享2U

iframe在網頁應用相當的廣泛，
但由於先天的限制下，iframe高度以及寬度都只能依所設定的大小為主
其實經過後天調整，也能讓iframe依載入網頁內容的多寡自動調整框架大小的喔！


熱心大大們在網路上分享的方法如下：

一、iframe.html

<iframe frameborder="0" src="source.html" id="frameid"></iframe>



二、source.html(以下兩種寫法2選1，加在＜head＞…＜/head＞之間)　

<script language="javascript">
function reSize(){parent.document.all.frameid.height=document.body.scrollHeight;}
window.onload=reSize;
</script>


<script language="javascript">
function reSize(){parent.document.getElementById("frameid").height=document.body.scrollHeight;}
window.onload=reSize;
</script>

添加 Falling Snow 下雪特效到您的網頁

添加下雪特效到您的網頁。

首先，你得選好一個您希望出現在您的網頁上的雪花或任何圖像。接下來，添加下面的JavaScript代碼到您的網頁的body內。在lookandfeel.com，你可以自己可以查找到一些很酷的雪花。 Try it out and see what you can do.

View our flash photo gallery with falling snow and a mp3 player.

<script language="JavaScript1.2">
/*
Snow Effect Script
Created and submitted by Altan d.o.o. (snow@altan.hr, http://www.altan.hr/snow/index.html)
Permission granted to Dynamicdrive.com to feature script in archive
For full source code and installation instructions to this script, visit http://dynamicdrive.com
*/


//Configure below to change URL path to the snow image
var snowsrc="snow.gif"
// Configure below to change number of snow to render
var no = 10;


var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;


var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;


if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}


dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();


for (i = 0; i < no; ++ i) { 
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><a href=\"http://dynamicdrive.com/\"><img src='"+snowsrc+"' border=\"0\"></a></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src='"+snowsrc+"' border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"></a></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"></div>");
}
}
}


function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", 10);
}


function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", 10);
}


if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}


</script>

如果你的圖片檔案名稱不是snow.gif，記得修改掉喔！

ASP.net 缺圖時不顯示紅叉叉的方法(javascript)

如何讓找不到圖片的地方不顯示紅叉？
將下列程式碼加入網頁標題區： （不喜歡"[缺圖]"兩個字，也可以自行更動文字）
<script type="text/javascript">
var imgErr = function(imgObj){
imgObj.parentNode.innerHTML = '[缺圖]';
}
</script>

圖片控制項設定 onerror 屬性：
<img id="image" src="MyPic.jpg" onerror="imgErr(this);" />

CSS結合JS-事件的應用

CSS結合JS的運用

利用CSS配合JavaScript的可以做很多更酷的動態頁面效果，在本教程的最後給大家簡單介紹一下CSS配合JS的應用。首先，要搞清楚事件和動作的概念。在用戶端腳本中，JavaScript 通過對事件進行回應來獲得與用戶的交互。例如，當用戶單擊一個按鈕或者在某段文字上移動滑鼠時，就觸發了一個單擊事件或滑鼠移動事件，通過對這些事件的回應，可以完成特定的功能(例如，單擊按鈕彈出對話方塊，滑鼠移動到文本上後文本變色等)。

下面介紹幾種常見的事件：
　　onClick：滑鼠單擊事件。(是指滑鼠按下，然後鬆開時產生。
　　onDblClick：滑鼠雙擊事件。(是指滑鼠快速按下，鬆開，並再次按下時產生。)
　　onMouseDown：滑鼠按下事件。(滑鼠按下時即產生。)
　　onMouseUp：滑鼠釋放事件。(是指滑鼠從按下的狀態到彈起。)
　　onMouseMove：滑鼠移動事件。(是指在特定元素上移動滑鼠。)
　　onMouseOver：滑鼠經過事件。(是指，當指標從外界往元素上移動時產生。
　　onMouseOut：滑鼠離開事件。(是指滑鼠從特定元素上離開時產生。)
　　onLoad：載入事件。(當圖像或頁面結束載入時產生。)
　　onUnload：卸載事件。(當訪問者離開頁面時產生。)
　　onScroll：捲軸滾動事件。(當訪問者使用卷軸上移或下移時產生。)

　　有了事件以後，我們就為事件加上動作。這裏只說改變當前元素自定義樣式的動作，我們可以用這個方法先設定好兩個自定義的CSS樣式，物件原先調用第一種樣式，當產生滑鼠事件時讓物件應用到第二種CSS樣式，而產生的滑鼠效果。

Javascript教學-用小視窗跳出現在日期

用小視窗跳出現在日期

請將以下程式碼貼到<body>與</body>之間：

<script type="text/javascript">
<!--
today= new Date();
yudan=(today.getYear()+1900)+" 年 "+(today.getMonth()+1)+" 月 "+today.getDate()+" 日";
window.alert("歡迎光臨分享2u日誌\n\n以下是日期資訊：\n今天是 "+yudan);
//
-->
</script>

Javascript教學-在標題上顯示出現在的日期

標題列日期 - 在標題上顯示出現在的日期。

請將以下程式碼貼到<body>與</body>之間：

<script type="text/javascript">
<!--
var isnMonth = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"); var isnDay = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
today = new Date () ;
yd = today.getYear();
if (yd < 2000) {yd = yd + 1900};
yudan = today.getDate();
document.title="今天是: "+yd+"年"+isnMonth[today.getMonth()]+yudan+"日"+isnDay[today.getDay()];
//
-->
</script>

JS配合CSS的li標籤實現隔行變色效果

JavaScript配合CSS中的LI標籤實現列表的隔行換色效果，這裏是指靜態網頁的情況下，用JS去控制輸出的情況&nbsp;，還有一種情況是用ASP/PHP/ASP.NET等利用FOR或WHILE迴圈去控制&nbsp;，迴圈之前用除數取餘的方法判斷奇偶性，能除盡與不能除盡的時候各設置調用不同的CSS樣式，稍嫌麻煩。

放在head裡面：
<title>JS配合CSS的li標籤實現隔行變色效果</title>
<script type="text/javascript">
function bgChange(){
var lis= document.getElementsByTagName('li');
for(var i=0; i<lis.length; i+=2)
lis[i].style.background = '#f<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" />3f3f3';
}
window.onload = bgChange;
</script>

放在body裡面：
<ul>
<li>隔行變色的LI</li>
<li>隔行變色的LI</li>
<li>隔行變色的LI</li>
<li>隔行變色的LI</li>
<li>隔行變色的LI</li>
</ul>

本文章轉貼自：http://freeshare2u.com/

javaScript 設定 style 的注意事情

通常在設定javascript時會遇到style的問題

因為style和javascript在css上面的寫法會有些不同

一般用JS設定CSS Style有兩種方法：

1) setArttribute('屬性','值')，但卻對style，時好時壞。

2) document.getElementById(div_id).style.[JavaScript的CSS屬性表示]= "CSS 屬性_value";

而 [JavaScript的CSS屬性表示]  請參照下表做比對：

Javascript 設定 getElementById 屬性的方法

紀錄 Javascript 設定 getElementById 的方法, 和 Style 有哪些屬性可以設定.(暫不討論 Framework 的寫法, 不過 style 能設的屬性是都一樣的)

document.getElementById('NAME') 裡面的 NAME 就是 html tag 的 id="NAME".
ex: <div id="choose">test</div>, 用 document.getElementById('choose').innerHTML 就可以抓到 test.

修改 Id 的 Html Tag 的值
要修改 <div id="choose">test</div> 的值, 要用下述方法:
var choose = document.getElementById('choose');
choose.innerHTML = 'book'; // 這樣子頁面上的 test 就會被改成 book 了
// 或 document.getElementById('choose').innerHTML = 'book';

設定 Id 的 HTML Tag Style 屬性
設定屬性的做法是
document.getElementById('ID名稱').style.屬性 = '設定值';
ex:
•document.getElementById('choose').style.fontWeight = 'bold';
•document.getElementById('choose').style.color = '#448ECC';

有哪些 Style 可以設定?
•參考 HTML DOM Style: HTML DOM Style Object

PS: 要測試請將 javascript 置於 <body> 的最後面.(HTML 都已經產生出來, 才不會有 js error)

本文章轉貼自：http://freeshare2u.com/

連結開啟無工具列視窗語法

之前在工作上剛好有使用到這個東西...分享一下...
<a href="javascript://" onclick="window.open('../hsinchuartmap.html','','menubar=no,status=yes,scrollbars=yes,top=100,left=100,toolbar=no,width=520,height=370')" title="查看ART髮型沙龍新竹店地圖" alt="查看ART髮型沙龍新竹店地圖"><img src="../home/shi692new.jpg" title="ART髮型沙龍新竹店即將於6月中旬開始營運,點擊查看ART新竹店地圖" alt="ART新竹店即將於6月中旬開始營運，籌備中,誠徵設計師及助理" width="692" height="184" border="0" /></a>

以上是我們公司的實作範例...

常用JavaScript語法(二)

條件式
if (條件){
　　　　如果條件成立，要處理的動作
　}else{
　　　　如果條件不成立，要處理的動作
　　　　}

通常條件是偵測某一個變數值，例如a等不等於1，就寫成：
if (a==1)
注意，要連續兩個等號，JavaScript中，用於判斷值的等號，要連續兩個等號。
如果是要測試「不等於」則寫成：
if (a!=1)

常用JavaScript語法(一)

取得或設定物件屬性值

getElementById=由識別元（ById）取得（get）元件（Element）

包含的HTML內容	document.getElementById('ID').innerHTML
使用樣式	document.getElementById('ID').className
顏色	document.getElementById('ID').style.color
背景色	document.getElementById('ID').style.backgroundColor
背景影像	document.getElementById('ID').style.backgroundImage
顯示？	document.getElementById('ID').style.visibility

14條最佳JS代碼編寫技巧

寫任何編程代碼，不同的開發者都會有不同的見解。但參考一下總是好的，下面是來自 Javascript Toolbox 發佈的 14條最佳JS代碼編寫技巧 ，Sofish翻譯(1,2)。

1. 總是使用 var

在JavaScript中，變量不是全局範圍的就是函數範圍的，使用」var」關鍵詞將是保持變量簡潔明瞭的關鍵。當聲明一個或者是全局或者是函數級（function-level）的變量，需總是前置」var」關鍵詞，下面的例子將強調不這樣做潛在的問題。

不使用 Var 造成的問題

程式碼
var i=0; // This is good - creates a global variable
function test() {
   for (i=0; i<10; i++) {
      alert("Hello World!");
   }
}
test();
alert(i); // The global variable i is now 10!

javascript教學-偵測使用者螢幕解析度-分享2U

screen是一個螢幕物件。  .width，.height是screen物件的屬性。
這一段程式碼很簡單，主要是要取出螢幕解析度的寬、高數值，然後顯示在螢幕上。

<script language="javascript">
<!--
document.write("您的螢幕解析度是 "+screen.width+"*"+screen.height)
document.write("，建議你將螢幕調整為 1024*768，可得到最好的瀏覽效果")
//-->
</script>

javascript廣告圖片輪播特效-分享2U

即使不懂本語法，也能做出各式各樣的動態網頁

控制碼內容：
將下面複製至 <body> 標籤後

JavaScript的運算子

處理資料與資訊為了超越輸出文字與基本的使用者互動層次，就必須處理使用者或程式產生的的資料與資訊。


JavaScript  的比較運算子

運算子 說明
== 如果運算元相等傳回  True 
!= 如果運算元不相等傳回  True 
> 如果左邊的運算元大於右邊的運算元就傳回  True
< 如果左邊的運算元小於右邊的運算元就傳回  True
>= 如果左邊的運算元大於或等於右邊的運算元就傳回  True
<= 如果左邊的運算元小於或等於右邊的運算元就傳回  True

JavaScript陣列運用-將星期幾的數字轉中文字-分享2U

今天上課時的練習範例：將系統日期、時間取出，輸出到網頁上...
因為輸出的星期幾顯示為星期6...龜毛的我甚不滿意...一直想把它轉成星期六...
結果居然一直鬼打牆...怎麼寫都寫不出來...
剛剛想起這件事...不死心又打開DW再寫看看...一下下就成功了...
到底是怎樣~~~ Q Q

決定把程式碼PO上來...一方面是分享給大家...一方面是預防下次鬼打牆(可直接上網抓這段code)...

<script language="javascript">
<!--
var datD1 = new Date();
var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");  //星期中文名稱
var d1 = datD1.getDay();  //取出日期的星期幾數值,指定給變數d1接收
document.write("今天是" + dayNames[d1]);  //輸出到網頁上,顯示今天是星期幾
//-->
</script>

*小筆記... 注意! 星期日是第一個喔!

javascript水中倒影特效-分享2U

<p align="center"><img id="reflect" src="lake.gif" width="200" height="50"><br>
<script language="JavaScript1.2">
function f1(){
setInterval("mdiv.filters.wave.phase+=10",100);
}
if (document.all){
document.write('<img id=mdiv src="'+document.all.reflect.src+'" style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()">')
window.onload=f1
}
</script>

身分證號碼檢查程式-JavaScript

預備知識：
陣列物件的建立
使用陣列物件之前，必須先行建立，而建立陣列物件的敘述有以下兩種格式：
X=new Array(N);
X=new Array(陣列元素0 , 陣列元素1 , ........陣列元素N-1);

兩種格式都會建立出 N 個元素的陣列物件，差別只在於第二種格式會為每一個值陣列元素設定好初值。

ex:
X=new Array(10); //建立10個元素的陣列物件,但不設定初值
Y=new Array(95,10,340); //建立3個元素的陣列物件,而這3個元素的初值分別是Y[0]=95,Y[1]=10,Y[2]=340

兩種於JavaScript中加入程式註解的方式

第一種：使用雙斜線 //來作註解（ //右邊的東西都是註解）：
例：
<SCRIPT>
JavaScript 程式碼
//字型顏色設定
...
//字型尺寸設定
...
</SCRIPT>


第二種：使用/*和*/來作註解（所有放在 /*及*/範圍內的東西都是註解，如果你想打很多行註解，用這款比較方便）：