妙用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来触发

<bean:message key="account.signup.input.name.check" />

</a>

当然下面的不能少啦！

</html:form>

</form>

2：关闭一当前窗口，并且无关闭提示（这个功能太常用了）

<input type="submit" name="Submit" value="知道啦" onClick='window.opener = "xxx";

window.close();'>

3：让一个链接自动提交:
如有一个链接:

则可以:

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:确定下拉框的值：

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 如下:

</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>

posted @ 2006-06-29 10:55 Nina 阅读(1101) 评论(0) 编辑收藏举报

刷新页面返回顶部

.net BI

共同學習，共同進步

妙用javascript

公告