PIXNET Logo登入

虎搞瞎搞

跳到主文

瞎搞攻城師經歷隨記~

部落格全站分類：數位生活

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 8月 28 週六 201002:16

  • JavaScript 網頁技巧總彙整


1.表單運用跨視窗傳遞資料


藉由另一個視窗將資料傳回表單並自動關閉視窗


 


最想學的語言 查詢 


<form name="form1" action=""> 


<input type="text" name="fruit"> 


<a href="#" >option</a> 


</form>


 


製作查詢頁面的下拉式選單(另存一個網頁s.html)


 


<script type="text/javascript"> 


function choice() { 


sel = document.forms[0].elements[0]; 


opener.document.form1.fruit.value = 


sel.options[sel.selectedIndex].text; 


self.close(); 


} 


</script> 


<form><select > 


<option>select</option> 


<option>Korean</option> 


<option>Japanese</option> 


<option>French</option> 


</select></form> 


自行修改選擇的主題與項目


 


 


2.防止按鈕重複送出內容


 


我們使用一些程式例如送信.發表留言等..若程式內沒有禁止重複內容的功能,有些主機執行速度比較慢,遇到急性子的訪客可能會多按幾次送出按鈕,而造成重複發信或相同的留言內容,我們可以使用這個JS來防止這樣的情形.


 


<script type="text/javascript"> 


<!-- // 


function submitform() { 


document.formname.button.disabled = true; 


submitform = disableButton; 


document.formname.submit(); 


return false; 


} 


function disableButton() { 


alert('In processing'); 


return false; 


} 


// --> 


</script> 


<form name="formname" action="xxx.cgi" method="post"> 


<button name="button" >SUBMIT</button> 


</form>


 


3.實現內置框架高度自動調整


 


一般內置框架都是固定高度的,內容太長則會顯示捲軸,若將捲軸屬性設為 scrolling="no" ,不會出現捲軸但是過長的內容會被截斷,這教學利用javascript來實現動態調整,不顯示捲軸,可以依內容的長短自動調整高度,看起來就像網頁的一部分,而且這javascript可相容IE/NS/Firefox瀏覽器。


 


下載JS檔案 放置於網頁目錄下


 


<script type="text/javascript" src="iframe.js"></script> <iframe id="myTestFrameID" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" src="home.html" width="100%" height="300"></iframe> home.html 是內置框架中的網頁


請使用內部連結例如../home.html


用http://的連結方式無法正常顯示


 


4.表單自動全選的技巧


 


很多人習慣將要提供複製的內容或語法等..放在多行文字表單


有時候文字太長要反白文字再複製,好像又有那麼一點點麻煩,


自動全選不是更好.


 


自動全選


複製語法貼於表單標籤框框內


 


按一下全選


複製語法貼於表單標籤框框內


多行<textarea rows="7" name="s1" cols="60" 語法放這裡>


單行<input type="text" name="t1" size="15" 語法放這裡>


 


5.網頁保護之非法連結


 


你的網頁曾經遭他人盜用連結嗎?自己辛苦的成果例如教學或遊戲等...讓他人佔為己有流量大增,是不是一件很嘔的事?這篇教學使用JS來防止盜連


 


<script type="text/javascript"> 


<!-- 


var who=document.referrer; 


if(who && who.indexOf("www.hsiu28.net") == -1){ 


alert("Illegl Link . Copyright oecspace.com"); 


top.location.href = "http://www.hsiu28.net/"; 


} 


//--> 


</script> 


▼if(who && who.indexOf("www.hsiu28.net") == -1)


這裡是設定只有這個網址可以連結到這個網頁(不要使用轉址)


意思就是只有這個空間的連結才是有效的 


▼alert("Illegl link . Copyright oecspace.com "); 


設定非法連結的警告訊息


▼top.location.href = "http://www.hsiu28.net/"; 


設定非法連結後會跳至哪個網頁(最好設為你的首頁)


 


6.同時開啟兩個框架內容


 


一般連結通常都只有指定一個框架內顯示內容


這語法可以讓一個連結開啟兩個網頁在不同的框架內


 


<script type="text/javascript"> 


<!-- 


function load(p1,p2) { 


parent.main1.location.href=p1; 


parent.main2.location.href=p2; 


} 


//--> 


</script> 


<a href="javascript:load('home.htm','home2.htm')" >LINK</a> main1和main2是指框架名稱


 


 


7.上頁下頁重新整理


 


<a href="javascript:history.back()">BACK</a> 


<a href="javascript:history.forward()">NEXT</a> 


<a href="javascript:window.location.reload()">Reload</a>


 


8.錯誤圖檔的替代圖


 


在網路上常常看到圖片顯示不出來的情形,尤其是連結他站的LOGO，這樣的情形就破壞整個版面的美觀,這裡教你如何使用代替圖檔，讓無法顯示的圖轉為你所設定的圖片來顯示<script type="text/javascript"> 


var rimg = "logo.gif"; 


function errorimg(x, y) { 


if (y == null) { 


x.src = rimg; 


} 


else { 


x.src = y; 


} 


} 


</script> 


在你網頁內的圖檔標籤內加上 no4.gif" > 步驟一的var rImg = "logo.gif"就是設定替代圖檔


 


9.偵測解析度進入不同網頁


 


自動辨識瀏覽者解析度而進入不同的網頁<script type="text/javascript"> 


<!-- 


var swidth=1024; 


var sheight=768; 


if (screen.width<swidth||screen.height<sheight) 


{location.replace("800.htm");} 


else{location.replace("1024.htm");} 


//--> 


</script> 


800.htm和1024.htm就是自動辨識解析度進入的網頁


 


10.直接執行指定網頁(轉址)


設定進入此頁直接執行另一個網頁，就像轉址<script type="text/javascript"> 


if(top.usrID == null) { 


location = "home.html" 


} 


</script> 


home.html改為你要指定轉向的網址


 


11.防止網頁顯示在框架


 


每個網站大部分都有LINK連結區，集合了網路上的好站或朋友的網站介紹，當然網站製作人都很歡迎你介紹，但是沒有人希望自己的網站是被連結在你網頁的框架中，開個新視窗連結他人的網站是一種禮貌喔！但是總有一些網路新鮮人不小心把你的網站連到他的框架，這時候你就只有自己做好防護措施，使用下方這個程式的網頁就不能放在框架裡了喔！〈適合首頁使用〉<script type="text/javascript"> 


<!-- 


if(self != top) top.location.href =window.location.href; 


//--> 


</script>


 


12.預先讀取圖片的方法


 


在網頁頁面開啟之前先讓瀏覽器讀取預定的圖片<script type="text/javascript"> 


<!-- 


Image1= new Image(100,50) 


Image1.src = "img1.gif" 


Image2 = new Image(100,50) 


Image2.src = "img2.gif" 


// --> 


</script>


 


 


13.固定視窗大小


 


只要進入這網頁視窗就會自動顯示設定值的大小<script type="text/javascript"> 


function changesize(){ 


window.resizeTo(430,300); 


} 


window.onload=changesize; 


window.onresize=changesize; 


</script> 


(430,300)視窗寬.高


 


14.顯示在最上層的視窗


 


開多個視窗時.這視窗永遠顯示在每個視窗的最前面。<script type="text/javascript"> 


<!-- 


function floating(){ 


self.window.focus(); 


setTimeout("floating()",100); 


} 


setTimeout("floating()",100); 


// --> 


</script>


 


15.隨不同解析度最大化瀏覽器視窗


 


填滿是指瀏覽器視窗,並非網頁內容<script type="text/javascript"> 


<!-- 


self.moveTo(0,0) 


self.resizeTo(screen.availWidth,screen.availHeight) 


// --> 


</script>


 


16.瀏覽器中封鎖滑鼠右鍵


 


這是一個不能反白網頁內容的封鎖右鍵語法,也不會跳出右鍵功能,


但對於網頁防護並不是絕對,還是可以就由其他方式取得網頁內容,


不要過度使用而造成訪客的不便.


 


複製以下語法貼於body框框中


<body 語法貼這裡>


 


17.讓網址列網址不改變


 


一般我們首頁的名稱都要命名為index.htm或index.html,經由網址例如:


http://www.hsiu28.net/index.html


就不需要檔名直接用


http://www.hsiu28.net/


就能夠自動執行index.html這個檔案,所以我們將首頁index.html做成框架頁


讓所有網站內容都在這個框架中執行,網址就可以一直不變


複製以下語法存為index.html


<html><head> 


<meta http-equiv="Content-Type" c> 


<title>web title</title> 


</head> 


<frameset framespacing="0" border="0" rows="*" frameborder="0"> 


<frame name="main" src="home.html" scrolling="auto"> 


<noframes> 


<body> 


</body> 


</noframes> 


</frameset> 


</html> 


範例中home.html改為你要做為首頁畫面的網頁


 


18.防止網頁被另存html


 


藉由IE工具列上的另存新檔就可以將網頁存到電腦


這語法可以避免網頁在IE瀏覽器被另存新檔<noscript><iframe src=*.html></iframe></noscript>


 


 


19.link之網站的專屬圖示


 


favicon.ico 就是圖示檔名


製作圖示建議把圖示畫大一點,能填滿32x32的格式


 


 


參考:http://myaudition2005.mysinablog.com/index.php?op=ViewArticle&articleId=1448761


<link rel="shortcut icon" href="http://www.hsiu28.net/favicon.ico">


(繼續閱讀...)
文章標籤

Empty 發表在 痞客邦 留言(0) 人氣(1,573)

  • 個人分類：JavaScript
▲top
  • 8月 21 週六 201023:17

  • javascript 取table中内容


1,有如下表格，我们要取第2行第2列的值

<table id="table1">

     <tr>

         <td>1行1列</td>

         <td>1行2列</td>

      </tr>

     <tr>

         <td>2行1列</td>

         <td>2行2列</td>

      </tr>

</table>

2,取值方法

   var value==window.table1.rows.item(0).cells.item(0).innerText;

注意：行号，列号是从 0 开始的

  例如 var value =window.table1.rows.item(1).cells.item(1).innerText;

  这就取到了第2行第2列的值

3.改进方法

   上面的方法，需要知道行号，实践中是不方便获得的，下面是改进的方法

<script language="javascript">
 var str;
</script>

  <table >

     <tr onMouseDown="str=this.cells.item(0).innerText">

         <td>1行1列</td>

         <td>1行2列</td>

      </tr>

     <tr onMouseDown="str=this.cells.item(0).innerText">

         <td>2行1列</td>

         <td>2行2列</td>

      </tr>

</table>

当鼠标按下时，我们就取到了该行第1列的值

<td onMouseDown="str=this.innerText">2行1列</td>  

这可以取鼠标所在列的值


參考:http://tmsoft.lsxy.com/index.php?load=read&id=168

(繼續閱讀...)
文章標籤

Empty 發表在 痞客邦 留言(0) 人氣(1,668)

  • 個人分類：JavaScript
▲top
  • 8月 21 週六 201023:03

  • setTimeout 相關設定



10.1　setTimeout( )
　　setTimeout( ) 是屬於 window 的 method, 但我們都是略去 window 這頂層物件名稱, 這是用來設定一個時間, 時間到了, 就會執行一個指定的 method。請先看以下一個簡單, 這是沒有實際用途的例子, 只是用來示範 setTimeout( ) 的語法。
(繼續閱讀...)
文章標籤

Empty 發表在 痞客邦 留言(0) 人氣(44)

  • 個人分類：JavaScript
▲top
1

工商

文章搜尋

個人資訊

Empty
暱稱：
Empty
分類：
數位生活
好友：
累積中
地區：

熱門文章

  • (5,898)[ubuntu]當tw.archive.ubuntu.com連不上時，解決方法。
  • (5,895)[ubuntu] 自動釋放cache 記憶體
  • (5,001)[C#]系統顏色表
  • (3,044)跨主機連線-查詢語法
  • (662)[VB] ASP.NET DataSet 判斷欄位是否存在、是否有值
  • (376)購買Visual Studio 2012 價格表
  • (132)WITH (NOLOCK) table hint equivalent for MySQL
  • (83)藤井樹【流浪的終點】 - 當冬夜漸暖
  • (38)拷貝後刪除批次檔
  • (36)15138删除对于用户失败,数据库主体在该数据库中拥有架构,无法删除

文章分類

toggle 瀏覽 (2)
  • Chrome (1)
  • FireFox (0)
toggle 虛擬 (3)
  • Hyper-V (0)
  • citrix XEN (0)
  • VMWARE (1)
toggle 程式 (14)
  • HTML (0)
  • JAVA (0)
  • VB.NET (2)
  • CSS (0)
  • C# (17)
  • PHP (1)
  • Perl (0)
  • ASP.NET (6)
  • xcode (1)
  • JavaScript (3)
  • ASP (2)
  • Arduino (0)
  • 批次檔語法 (3)
  • Visual Studio (5)
toggle DB (3)
  • MySQL (6)
  • Microsoft SQL Server (5)
  • Oracle (2)
toggle OS (3)
  • FreeBSD (0)
  • LINUX (9)
  • windows (14)
toggle 閱讀 (2)
  • 參考文章 (1)
  • 好書推薦 (0)
toggle 思考 (2)
  • 日記 (11)
  • 心情記事 (9)
  • WordPress (18)
  • JavaScript (0)
  • 未分類文章 (1)

最新文章

  • IIS 相關設定
  • 更新SSL
  • [C#]Entity Framework 5 增加TimeOut時間
  • [C#]當WebService 需要多載時的方法，需要注意MessageName
  • [C#] 如何讓Linq + entity framework 可以達到with(nolock)
  • [分享]網站分享，想要學程式的人有福了
  • [分享]GOLiFE Care-X HR 智慧悠遊心率手環慘狀
  • [分享]htaccess在Apach與Nginx寫法並不相同
  • [C#].NET最簡單PostgreSQL連線方式
  • [Windows]批次檔相關指令

最新留言

  • [21/03/22] 2e2 於文章「[windows] 刪除 PuTTY 的...」留言：
    請問一個笨問題 win10 ssh有兩個以前亂設定的公私鑰檔...
  • [11/04/27] 喵空 >^o^< 於文章「當網域內的電腦出現【此工作站與主要網域間...」留言：
    今天剛裝好的Win7Pro也發生相同狀況，重新加入網域也不...
  • [11/03/28] nat 於文章「變更 ChartFX 7.0 的輸出路徑...」留言：
    <p>請麻煩指出原始來源，不要只是全文複製。</p>...
  • [10/03/24] chunhsing 於文章「天使錯了~...」留言：
    <p>你好你好~</p> <p>我也是看到這篇很感人才轉貼的...
  • [10/02/06] 阿睿 於文章「家長控制軟體？...」留言：
    <p>是英文...我要中文.<img src="http:/...
  • [09/12/13] thundersha 於文章「Ubuntu - KVM基本套件安裝(G...」留言：
    <p>不好意思我是原著, 可以麻煩你加個原始文章引用連結嗎 ...
  • [09/05/11] chunhsing 於文章「你還好嗎？...」留言：
    <p><img src="http://s.blog.xui...
  • [09/04/07] Cherry 於文章「你還好嗎？...」留言：
    <p>我也會看MSN的對話ㄟ~特別是跟在乎的人的對話</p>...
  • [09/02/06] 新手駕駛 於文章「ASP.NET 網頁的基本組成 ...」留言：
    <p>親愛的大大 請教您一個問題:</p> <p>我安裝了I...
  • [07/06/19] 阿豪^_^ 於文章「asp join陣列轉換字串函數...」留言：
    好,有沒有php的,加油哦！︿＿︿哈囉！我是阿豪，喜歡部落格...

誰來我家