妙用javascript

xtxk_917發表於2006-10-24
JavaScript

妙用javascript

http://www.blogjava.net/Jkallen/archive/2006/03/06/33886.aspx?Pending=true#Post
以下是本人在程式碼中常用到的一些JS指令碼,雖然是一些簡單而又短小的function卻是幫了我不少的忙呢!希望對大家有些用,有了好的再貼上來 ^_^
1：在一帶到複雜的FRAME頁面中OPEN一個窗體來（當然不用什麼parent.parent啦）
function  checkuser(name)
     {
        window.open( " about:blank " , " zhutong " , 'menubar = 0 ,width = 350 ,height = 240 ,left = 230 ,top = 200 ,resizable = 0 ,scrollbars = auto');
        window.document.forms['form1'].target  =   " zhutong " ;
        window.document.forms['form1'].action  =   " Account/check.jsp?username= " + name;
        window.document.forms['form1'].submit();        
    }

以下的LINK來觸發
<a href="javascript:checkuser(window.document.forms['SignUpForm'].name.value);">
                                        <bean:message key="account.signup.input.name.check" />
                                    </a>

當然下面的不能少啦！
</html:form>
<form name="form1" method="post" action="">
</form>

2：關閉一當前視窗，並且無關閉提示（這個功能太常用了）
<input type="submit" name="Submit" value="知道啦" onClick='window.opener = "xxx";
    window.close();'>


3：讓一個連結自動提交:
如有一個連結:

<a href="xx.htm" name="multiuse">AAA</a>


則可以:

var urlfir = studyezurl + '/Authentication.do?actionid=ForgetPassword';
var urlsec = studyezurl + '/tempURL.do';
multiuse.href = urlsec;
multiuse.focus();
multiuse.click();
multiuse.href = urlfir;  //這個好象不起作用,所以最好將此urlfir設成在href中的預設值


在STRUTS中有一個多個FRAME構成的系統.點選登出後想固定到某一頁面!(這個鬼費了我不少時間 ^_^ )


4：讓HTML也有JSP中的request.getParameter("");
HTML也可以通過JS來到得引數,函式如下(我將它儲存到了一個陣列裡面):

//--------------------------------------------------------------------------
//Name: GetArgsFromHref
//
//Pupers: the function will get the parameters from the server
//
//Parameter:
//sHref---->>the current URL
//sArgName---->>the Array store the name of parameters which you want to get
//
//Return: Array to store the result
//
//Author: Jkallen
//----------------------------------------------------------------------------
function GetArgsFromHref(sHref, sArgName)
{
    var args  = sHref.split("?");
    var p_Result = new Array();
    
    if(args[0] == sHref) 
    {
         return p_Result; 
    }  
    var str = args[1];
    args = str.split("&");
    for(var i = 0; i < args.length; i ++)
    {
        str = args[i];
        var arg = str.split("=");
        if(arg.length <= 1) 
            continue;
        if(sArgName != null)
        {
            for(var c1 = 0; c1 < sArgName.length; c1++)
            {
                var tempValue = arg[0];
                if( tempValue == sArgName[c1])
                    p_Result[tempValue] = arg[1];
            }   
        }//end if
     }//end for
     
     return p_Result;
 }//end GetArgsFromHref


所以你以後就可以通過如:

var curCourseID = pValue[c_courseID];


的樣子來直接取了啦,c_courseID是引數名稱哦

5:在頁面動態顯示當前時間

<span id="aa">當前時間</span><script>setInterval("aa.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
</script> 

1000就表示了,每隔1000毫秒就更新一次aa裡面的內容.

6:對WEB頁面物件的常用操作,
.select()  選中物件(文字框)的內容
.focus()   讓某個物件獲取焦點
checked  檢查單選按鈕是否處於選中狀態
若存的是一組單選按鈕,根據document的一些方法:

getElementById     獲取對 ID 標籤屬性為指定值的第一個物件的引用。
getElementsByName     根據 NAME 標籤屬性的值獲取物件的集合。
getElementsByTagName     獲取基於指定元素名稱的物件集合。
可以用getElementsByName來解決,它是取得一些同名物件的集合,與getElementById(指定值的第一個物件的引用)不同.如下所示:

var tmppara = document.getElementsByName("para"+i);
   var j=0;
   for(;j<tmppara.length;j++){
    if(tmppara[j].checked){
      values[cur_index] = tmppara[j].value;
      cur_index++;
     }
   }

7:確定下拉框的值：

<script language="javascript">
function test(){
 var se = document.form1.select;
 for(i=0;i<se.length;i++){
  if(se.options[i].value == 55){
   se.options[i].selected=true;
   break;
  }    
 }
 
}
</script>

HTML 如下:

<form id="form1" name="form1" method="post" action="">
    <select name="select">
    <option value="11" selected="">11</option>
    <option value="22">22</option>
    <option value="33">33</option>
    <option value="44">44</option>
    <option value="55">55</option>
  </select>
</form>

刪除其中的一個option:
se.options.remove(1);
其中引數1表示下標

8:使得某一物件不可用(可用剛改成false)
document.form1.submit2.disabled=true;
使得某一物件不可見(可見則改成visible)
document.form1.submit2.style.visibility="hidden";

9：日期以'yyyy-mm-dd'（2006-09-07 or 2006-9-17）

function chkdate(value)
{
    var datestr;
    datestr=value;
    var lthdatestr;
    if (datestr != "")
        {lthdatestr= datestr.length} ;
    else
        {lthdatestr=0};    
    var tmpy="";
    var tmpm="";
    var tmpd="";
    var status;
    status=0;
    if ( lthdatestr== 0)
        {return (false)};            
    for (i=0;i<lthdatestr;i++)
    {    if (datestr.charAt(i)== '-')
        {
            status++;
        }
        if (status>2)
        {
            return (false);
        }
        if ((status==0) && (datestr.charAt(i)!='-'))
        {
            tmpy=tmpy+datestr.charAt(i);
        }
        if ((status==1) && (datestr.charAt(i)!='-'))
        {
            tmpm=tmpm+datestr.charAt(i);
        }
        if ((status==2) && (datestr.charAt(i)!='-'))
        {
            tmpd=tmpd+datestr.charAt(i);
        }

    }
    year=new String (tmpy);
    month=new String (tmpm);
    day=new String (tmpd);
    if ((tmpy.length!=4) || (tmpm.length>2 || tmpm.length<1) || (tmpd.length!=2))
    {
        return (false);
    }
    if (!((1<=month) && (12>=month) && (31>=day) && (1<=day)) )
    {
        return (false);
    }
    if (!((year % 4)==0) && (month==2) && (day==29))
    {
        return (false);
    }
    if ((month<=7) && ((month % 2)==0) && (day>=31))
    {
        return (false);
    
    }
    if ((month>=8) && ((month % 2)==1) && (day>=31))
    {
        return (false);
    }
    if ((month==2) && (day==30))
    {
        return (false);
    }
    return (true);
}

再加一個比較函式,剛剛寫的

/**//************************************************************
 *將yyyy-mm-dd的日期型資料換成數字型以比較大小 add by zhangyinxin
*****************************************************************/
function changDate2Num(date){
    var tmp = date.split('-') ;
    var result;
    if(tmp.length<=0){
        alert('日期格式(yyyy-mm-dd)不正確！');
    }else{
        result = tmp[0];
        if(tmp[1].length<2)    tmp[1] = "0"+tmp[1];
        result += tmp[1]; 
        if(tmp[2].length<2)    tmp[2] = "0"+tmp[2];
        result += tmp[2]; 
    }
//    alert(result);
    return tmp;
}

10:對一組單選按鈕的處理---是否選中or返回選中值

function getValueofCheckBoxSelected_this(dyfs)
{
    var controlarray = document.getElementsByName(dyfs);
    if(controlarray==null||controlarray.length==0)
        return false;
       for (var i=0; i<controlarray.length; i++)
       {
        if(controlarray[i].checked)
            return controlarray[i].value;    
            //如果要返回是否選中,這兒返回true啦,下面返回false    
    }    
    return null;
}

11,從A頁面開啟一個頁面B,從B中輸入相關資訊後再從B頁面把資訊傳到A頁面處理:
從A頁面開啟B頁面的方法:

function addPersonInfo(){
  var obj =  window;
  var url = "<%=contextpath%>/jsp/addinfo.jsp";
  window.showModalDialog(url,obj,'dialogwidth=500px; dialogheight=300px;status=no; help=no');
}

主要是其中的obj引數起作用.然後在B頁面 中返回:

.
var obj = window.dialogArguments;
    obj.addRow(username,phone,email);
    window.close();

注意這兒只取了主要部分:username,phone,emial均是在B頁面取得一些資訊obj.addRow()中addRow是A頁面中定義的,如下:

/**//******************************************************************
@name addRow---為******增加一行
@parameters    null
@retrun null
@author zhangyinxin
******************************************************************/
function addRow(name,phone,email){
    do something......
}


12:得用JS在WEB頁面中動態增加行列:
這裡主要用到了innerHTML, cells,rows,appendChild等一些方法與屬性有了它們基本上就OK了,更多可以參考HTML的參考手冊,可以做到如在DW更改介面一樣,感覺很爽(比如更改物件的title ,id ,style, name)!

dateTr = document.getElementById("tr_name");//它實際上是一列也就是<tr></tr>'tr_name'是我自定義
    NewTr = document.all.dyzmx.cloneNode(true);
    NewTr.style.display = "block";
    var cur_lxr_xm = dateTr.parentNode.rows[1].cells[1].innerHTML;
    dateTr.parentNode.appendChild(NewTr.cloneNode(true));
    var added_new_tr = dateTr.parentNode.lastChild;    
..

主要用到了cloneNode方法，其它更多可以參考關於ＨＴＭＬ的物件介紹，然後再通過appendChild來增加一行（在此是增加一行）．當然也可以自己定義一些元素來初始化innerHTML,as :

html = " <INPUT type=text style=/"width:30px;/" value="+k+" name=/"rwbh/" maxlength=3>";
        start.getElementsByTagName("tr")[k].firstChild.innerHTML = html;

順便說一下關於刪除：

var child_len = dateTr.parentNode.rows.length-1;
        for(c2=child_len; c2>0; c2--){
            var rows = [];
            if(name=='lxr')
                if(dateTr.parentNode.rows[c2].title=='lxr_data'){
                    rows.push(dateTr.parentNode.rows[c2]);
                    for(var i=0;i<rows.length;i++){
                        rows[i].parentNode.removeChild(rows[i]);
                    }
｝        
                }

注意這種方法刪除時，一不小心不犯錯了．一方面for(c2=child_len; c2>0; c2--)應該是遞減的方式來遍歷（因為rows裡面push的時候，與刪除的時候節點是反向的，當然假如取rows的時候反向取也ＯＫ的），另一方面 dateTr.parentNode.rows.length-1不可以直接放到for裡面（因為 dateTr.parentNode.rows.length-1的長值每在for裡面跑一次就變一次，當然是變小啦）．

所以也可以如下處理：

/**//******************************************************************
@name delRow---為******刪除選項中行
@parameters    null
@retrun null
@author zhangyinxin
******************************************************************/
function delRow(){
    var checkboxs = document.getElementsByName("checkspecial");
    var rows = [];
    for(var i=0;i<checkboxs.length;i++){
        if(checkboxs[i].checked && checkboxs[i].parentNode.parentNode.title!='tmp'){
            rows.push(checkboxs[i].parentNode.parentNode);
        }
    }
    for(var i=0;i<rows.length;i++){
        rows[i].parentNode.removeChild(rows[i]);
    }
}

我這兒用到了核取方塊，當然這並不影響刪除的效果實現，它不過是一種刪除條件罷了（比如title也是哦）

13:第一次見到這樣的自定義函式：

function $() {
  var elements = new Array();

  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);

    if (arguments.length == 1)
      return element;

    elements.push(element);
  }

  return elements;
}


應用如下：

this.removeRow  =  function(_id){  
                       var  row  =  $(this.id  +  "_row_"+_id);  
                       if(!row)return;  
                       row.parentNode.removeChild(row);  
           } 

感覺蠻不錯！

呵呵　我一天添一些ＪＳ上來，可惜朋友們看不到，因為這＂貼子＂沉下去了．沒辦法，可是它們真的幫我不少忙，我自己的也常到這兒來取經....
...   ....

posted on 2006-03-06 17:05 Jkallen 閱讀(337) 評論(2)  編輯 收藏 收藏至365Key 所屬分類: AJAX

FeedBack:
# re: 妙用javascript
2006-03-06 21:27 | 劍事
function checkuser(name)
{
window.open("about:blank","zhutong", 'menubar=0,width=350,height=240,left=230,top=200,resizable=0,scrollbars=auto');
window.document.forms['form1'].target = "zhutong";
window.document.forms['form1'].action = "Account/check.jsp?username="+name;
window.document.forms['form1'].submit();
}
可以改成這樣
function checkuser(name)
{
window.open("Account/check.jsp?username="+name,"zhutong", 'menubar=0,width=350,height=240,left=230,top=200,resizable=0,scrollbars=auto');

}


<a href="javascript:checkuser(window.document.forms['SignUpForm'].name.value);">
<bean:message key="account.signup.input.name.check" />
</a>
這個可以改成這樣
<a href="javascript:checkuser(SignUpForm.name.value);">
<bean:message key="account.signup.input.name.check" />
</a>
 

相關文章