欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript組件焦點(diǎn)與頁內(nèi)錨點(diǎn)間傳值的方法

 更新時(shí)間：2015年02月02日 11:34:04   作者：yongh701  
這篇文章主要介紹了JavaScript組件焦點(diǎn)與頁內(nèi)錨點(diǎn)間傳值的方法,涉及輸入框與錨點(diǎn)的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JavaScript組件焦點(diǎn)與頁內(nèi)錨點(diǎn)間傳值的方法。分享給大家供大家參考。具體分析如下：

上述的這兩個(gè)小功能在一些新式的手機(jī)頁面是很有用的。

如何光標(biāo)放上輸入框就觸發(fā)事件，離開輸入框就觸發(fā)另一個(gè)事件呢？即使用戶不輸入任何東西……

頁間傳值很簡單，但在頁內(nèi)的錨點(diǎn)之間是如何傳值呢？

一、基本目標(biāo)

有一個(gè)頁面，上面有一個(gè)輸入框，一個(gè)超級鏈接，這兩個(gè)東西是沒有任何關(guān)聯(lián)的，

只是因?yàn)楣δ懿淮?，所以把兩個(gè)功能合起來寫

1、輸入框功能

一旦把光標(biāo)放上對話框背景就變成紅色，一旦用戶的鼠標(biāo)點(diǎn)擊其他地方則重新變?yōu)榛疑谋尘?/p>

2、超級鏈接功能

向頁面下方的bottom錨點(diǎn)通過get方法傳遞值text=1的值，bottom錨點(diǎn)下面有個(gè)已被禁用的輸入框，不停在輪詢地址欄上面的text參數(shù)

開始如果不點(diǎn)擊，則沒有text參數(shù)，所以輸入框一直顯示為null

一旦點(diǎn)擊超級鏈接，下面的對話框在0.5秒之后，變?yōu)?，由于是毫秒級處理，所以用戶的感覺是實(shí)時(shí)處理的，

這個(gè)被disabled的上方還有一個(gè)back超級鏈接，清空頁面的參數(shù)傳遞，再次把滾動(dòng)條拉下來則又是顯示為null。

請注意頁內(nèi)錨點(diǎn)間成功傳值時(shí)，瀏覽器的url：

二、制作過程

不用引入任何插件，直接開個(gè)html頁面來寫就可以了，請看下面的代碼：

復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>onfoucs</title> 
</head> 
 
<body> 
<!--定義個(gè)輸入框，onfocus是獲得焦點(diǎn)，一旦把光標(biāo)放上輸入框則馬上觸發(fā)getFocus()參數(shù)。onblur則是失去焦點(diǎn)，也onfocus剛好反過來。--> 
<p> 
<input type="text" onfocus="getFocus()"  onblur="loseFocus()"/> 
</p> 
 
<!--注意頁內(nèi)錨點(diǎn)傳遞參數(shù)的超級鏈接的語法，寫用?接參數(shù)，再用#接錨點(diǎn)，多個(gè)參數(shù)則寫成?texta=1&textb=2#bottom，用&鏈接--> 
<p> 
<a href="onfocus.html?text=1#bottom">錨點(diǎn)</a> 
</p> 
 
<!--這么多的li只是用來占行的~為了讓大家看到錨點(diǎn)效果--> 
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> 
 
<!--此超級鏈接相當(dāng)于后退按鈕--> 
<p> 
<a id="bottom" href="javascript:history.go(-1);">back</a> 
</p> 
 
<!--我就是那個(gè)被禁用的對話框--> 
<p> 
<input type="text" id="pollingtext" disabled="disabled"/> 
</p> 
 
</body> 
</html> 
<script> 
    /*一開始先把頁面的背景顏色換成#eeeeee*/ 
    window.onload=function(){ 
        document.bgColor="#eeeeee"; 
        Polling(); 
        } 
     
    /*當(dāng)對話框獲得焦點(diǎn)就把背景顏色改成紅色，反之則重新改成#eeeeee*/    
    function getFocus(){ 
        document.bgColor="#ff0000"; 
    } 
     
    function loseFocus(){ 
        document.bgColor="#eeeeee"; 
    } 
     
    /*這是取url get傳值時(shí)的參數(shù)的專用正則表達(dá)式*/ 
    function getUrlParam(name) { 
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");  
        var r = window.location.search.substr(1).match(reg);   
        if (r!=null) return unescape(r[2]); return null;  
    } 
     
    /*不停地輪詢，檢查是否有g(shù)et參數(shù)傳遞過來了*/ 
    function synchronous() { 
        document.getElementById("pollingtext").value =getUrlParam("text"); 
    } 
     
    function Polling(){ 
        synchronous(); 
        setInterval("synchronous()", 500); 
    } 
</script>

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評論