CSDN博客

img kinven

Javascript的一些相关应用

发表于2004/10/10 20:11:00  1072人阅读

    网页开发中,总是碰到一些页面的控制,本文就一些本人在开发过程中遇到的一些javascript的一些相关应用做出总结,希望以后能更加完善

一、复选框问题

 

<script language = “javascript“>

<!--

function InCheckAll()                                  ///检查确认复选框是否全选或全不选

{

  if( 其他子复选框都选了 )

    formname.checkboxname.checked=true;

  else

       formname.checkboxname.checked=false;}

function InSelectAll()                                  ///主复选框一选其他全选,

{

  if(   其他子复选框都选了 )

   {

     document.formname.element[i]=false;                ///利用for循环

   }

  else

   {

      document.formname.element[i]=true;                ///利用for循环

   }

}

 

}

 

//-->

</script>

 

二、历史记录回退一步用:

<a href="javascript:history.back();"><img src="../images/return.gif" width="72" height="21" border="0" alt="返回">

</a>

javascript:history.back();----在input type="button" onclick='javascript:history.back()’>可以直接用,不用再设javascript函数

 

三、主下拉菜单一选某项,子下拉菜单都选该项

提示:直接把子下拉菜单的地址跟主下拉菜单的地址一一对应就行了

例:

function changeall()

       {

       form.selectChild.selectedIndex=form.selectFather.selectedIndex;            ////// selectedIndex 属性则给出了被用户选中的那个选项在 options 数组中的下标

       }

 

四、一个radio组和一个按钮,选定了某项radio再由按钮触发事件跳到其他页面

代码:

方法一:

function RadioNotyet(radioname,total,content){

///if radio group has not been motified return -1,else return the selected index

 

       for(j=0;j<total;j++){

              if(radioname[j].checked==true)return j;

       }//for

       alert("还没选择"+content);

       return -1;

}//function RadioNot

 

function NextStep()                                                   ///用到脚本函数的相互调用

{

                           

switch(RadioNotyet(radio1,2,"下一步去哪里?"))

{

  case -1:return;

  case 0:location="GreenPassStep2.htm";break;

  case 1:location="GreenPassStep3.htm";break;

}

}

 

方法二:

if (!document.formNAME.RadioGroup1[0].checked&&!document.formNAME.RadioGroup1[1].checked&&!document.formNAME.RadioGroup1[2].checked)

   alert("请选择你要进行的方式!");

  

   else if(document.formNAME.RadioGroup1[0].checked)

   location="MemberPassStep3.html";

  

   else if(document.formNAME.RadioGroup1[1].checked)

   location="MemberPassStep4.html";

  

   else if(document.formNAME.RadioGroup1[2].checked)

   location="MemberPassStep6.html";

   }

 

五、依次判断文本框的内容是否为空并且是否填写正确信息

方法一(直接每个写上代码):

<script language="JavaScript">

   function jump()

   {

   var patrn2=/^(/w){6,20}$/;     ///此为正则表达式,判断是否620位,测试密码用的

                              ///其实也可以这样:if(document.formName.PasswordName.value.length<6||document.formName.PasswordName.value.length>20) alert('输入密码长度不对');

                                                   

                                              

   var patrn3=/^(/w){6,20}$/;

   if (document.formname.textfieldname.value=="")        ///若是单个文本框

       {

          alert("请填写详细配送地址!");

          document.formname.textfieldname.focus();

       }///.focus表示定位鼠标焦点

         

   else if (document.form.textfieldname[0].value=="")      ///若为一系列文本框,可用数组

       {

          alert("请填写订件人姓名!");

          document.formname.textfieldname[i].focus();

       }///i是变量

         

     ……

         

        var patrn2=/^[a-zA-Z0-9 ]{3,12}$/;                ///以下都是利用正则表达式判断信息输入是否无误

        var patrn3=/^[0-9]{1,20}$/;

             if (!patrn2.exec(document.formame.textfieldname[4].value)||!patrn3.exec(document.formame.textfieldname[4].value))

                alert("请输入正确的邮编!");

         else location="GreenPassStep7.htm";

     }

 

   else if (!patrn2.exec(document.formame.textfieldname[6].value))

   alert("请输入6-20个字母、数字、下划线 !");

 

   else if (!patrn3.exec(document.formame.textfieldname[7].value))

   alert("请输入6-20个字母、数字、下划线 !");

  

   else  location="GreenPassStep7.htm";

} 

 

方法二(利用脚本函数的相互调用):

例如:

 

 function TextNotyet(textname,content){//if text has not been  motified return1

       if(textname.value==""){

              alert("还没填写"+content);

              return -1;

       }

       else return 0;

}//function TextNotyet

 

 

function Login()

{

//登陆确定按钮 textfield,textfield2,textfield3

       if(TextNotyet(textfield,"会员用户名")||TextNotyet(textfield2,"登陆密码")||TextNotyet(textfield3,"校验密码"))    //调用了TextNotyet()

           return;

       location="MemberPassStep2.html";                                                                //跳转

             

}

 

        

</script>

 

 

七、下拉菜单

Dreamweaver本身有这个下拉菜单跳转函数生成模板,例如:

 

  <select name="网站搜索表2" onChange="MM_jumpMenu('parent',this,1)">  

    <option value="../wzss.htm" selected><font size="5">网站搜索</font></option>  

    <option value="../whjy-bd.htm"><font size="5">文化教育</font></option>  

  </select>  

  <input type="button" name="搜索表按钮" value="前往" onClick="MM_jumpMenuGo('网站搜索表2','parent',1)">  

 

注意:在这个“MM_jumpMenuGo('网站搜索表2','parent',1)”函数里,第一个参数为表单元素seleceNAME,第二个是traget,即是

是否在本窗口或另一个新窗口打开,第三个参数是決定是否設定"Select First Item After URL Change"(0-->取消, 1-->設定)

还有下拉菜单的"option value"必须为要打开的页面文件名!

另外,系统还会自动生成三个函数,应该是层函数。

 

八、表单提交数据方法有两种

第一:直接通过表单的<form>里面的action="相关页面"submit提交按钮来处理。

第二:如是图片按钮的话,就让图片连接到一个javascript函数,像这样:<a href="javascript:function();"></a>

            然后在function()那里用这个语句来提交表单数据:document.formname.submit();(由于我们这次把所有按钮换成图片,这种方法

      可能我们要用得多点!)

 

下面某一论坛说明表单提交的方法:

post提交
所有的post提交只能在form中产生,提交方式又分两种:直接提交(submit提交)、间接提交(脚本提交)

1)直接提交:点击提交按钮,立即发生提交
<form method=post action=*.asp>
<input type=submit value=”
注册
”>
注:submit按钮有一个默认事件,就是提交

<input type=submit value=”
注册” onclick=”alert(‘hello’);return ture or false;”>
注:在提交前,首先在屏幕上返回一个警告框”hello”,若return的是true,则页面发生提交;若return的是false,页面不会发生提交。

</form>

2)间接提交:是指点击按钮本身并不能完成提交,而只有通过脚本才能完成的提交,称为间接提交。
<input type=button value=”注册” onclick=”check();submit();”>
注:

onclick处还可为onmousedownonmouseup等事件名称
button
只是普通按钮,本身并不能发生提交,只能通过onclick指定的脚本程序才能完成提交
点击注册后,先执行onclick事件触发的函数,若返回值为true则发生提交,否则提交中止。

 

九、日、月下拉菜单

 

两个脚本函数如下:

function change_it()

{

 get_select=FrontPage_Form1.select_month.selectedIndex;

 select_item_m=FrontPage_Form1.select_month.options[get_select].text

 switch(select_item_m)

  {

  case '2': MD(28);break;

  case '4':

  case '6':

  case '9':

  case '11': MD(30);break;

  default: MD(31);break;

 }

}  ////function change_it

 

function MD(days)

{

 j=FrontPage_Form1.select_day.options.length;

 for(k=0;k<j;k++) FrontPage_Form1.select_day.options.remove(0);

 for(i=0;i<days;i++)

 {

  var day=document.createElement("OPTION");

  FrontPage_Form1.select_day.options.add(day);

  day.innerText=i+1;

 }

}  ////function MD()

 

十、form表单元素的取法

例如:

<form name="orderdata" action="/cgi-bin/order.cgi" method="post">
Item Number: <input name="itemnumber" type="text"><br>
Quantity: <input name="quantity" type="text"><br>
<input type="submit" value="Update"><input type="reset" value="Clear">
</form>

 

使用名为 'quantity' 的元素,可以使用下边三种方法中的任何一种:

var e = document.forms["orderdata"].elements[1];
var e = document.forms.orderdata.elements["quantity"];
var e = document.orderdata.quantity;

 

十一、利用函数window.open()可以打开一个新页面

 

function gotourl(name)

{

    var url = "http://www.163.com";

    window.open(url);

    return true;

}

 

 

 

 

onSubmit='return checkform();'

 

 1.这个语句可以让按钮回到前一页面。

<input type=button name="Submit2" value="返回" onClick = 'javascript:history.back()'>

 

 

 

2.可以在没有form的情况下就跳转

 <input type="button" name="Submit2" value="提交" onclick = 'javascript:location.href="http://www.163.com"'>

 

 

3.javascript的跳转

 

function gotourl(name)

{

    //var url="http://sms.21cn.com/sms_self_edit.jsp?Msg=xx&phone=xx"+ smsform.Phone.value + "&Msg=" + smsform.Msg.value;

    //window.open(url, "sms", " toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes, location=yes, status=yes");

    var url = "http://www.163.com";

    var url1 = "http://www.sohu.com";

    if(name =="Submit3")

        window.open(url);

    if(name =="Submit32")

     window.open(url1);

    return true;

}

 

 

4.function ischecked()

{

if(document.form5.checkbox1.checked)

{

document.write("ajfas;kfafj");

}

}

 

5.javascript中用location="http://www.sohu.com";可以跳转而不重开一个页面。

6.

function check()

{

var url="MyphotoMoneyBuySetModifyResult.htm";

 window.open(url, "", " toolbar=no, menubar=no, scrollbars=yes, resizable=no, location=no, status=no");

}

 

function Confirm(){

if(confirm('你确定不冲印了吗?'))

location.href="../index.html";

}

 

function isdelete()

{

window.confirm("是否删除");

}

 

7在图片上鼠变手形。

style = "cursor:hand";

onmouseover = this.style.cursor='hand';

javascript:document.form.reset;可以重置。

 

8.取得IP地址:String ip = request.getRemoteAddr();

阅读全文
0 0

相关文章推荐

img
取 消
img