Javascript的一些相关应用

    网页开发中,总是碰到一些页面的控制,本文就一些本人在开发过程中遇到的一些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" οnclick='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=”
注册” οnclick=”alert(‘hello’);return ture or false;”>
注:在提交前,首先在屏幕上返回一个警告框”hello”,若return的是true,则页面发生提交;若return的是false,页面不会发生提交。

</form>

2)间接提交:是指点击按钮本身并不能完成提交,而只有通过脚本才能完成的提交,称为间接提交。
<input type=button value=”注册” οnclick=”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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实例代码: 第1章(\cha01) 1.1.htm 自动类型转换 1.2.htm 显式类型转换 1.3.htm 提升基本类型为对象 第2章(\cha02) 2.1.htm if语句 2.2.htm switch语句 2.3.htm while循环 2.4.htm do-while循环 2.5.htm for循环 第3章(\cha03) 3.1.htm 遍历数组元素 3.2.htm 改变数组元素 3.3.htm 用对象的方式实现数组 3.4.htm 将数组转换为字符串 3.5.htm 操作数组元素 3.6.htm 实现多维数组 第4章(\cha04) 4.1.htm 求平方根 4.2.htm 求质数 4.3.htm 简单数制转换 4.4.htm 数制转换函数 4.5.htm 实现计算器 第5章(\cha05) 5.1.htm 带开关的时钟 5.2.htm 不同风格的时间显示 5.3.htm 倒计时效果 5.4.htm 模拟时钟 5.5.htm 显示农历日期 5.6.htm 温度计样式时钟 5.7.htm 位置固定的时钟 第6章(\cha06) 6.1.htm HTML事件绑定 6.2.htm 非标准事件绑定 6.3.htm 事件处理器绑定 6.4.htm 使用函数 6.5.htm 直接在表单上调用事件 第7章(\cha07) 代码说明:本章代码只能在Mozilla Firefox中运行。 7.1.htm 事件流 7.2.htm DOM2鼠标事件 7.3.htm 取消默认动作 7.4.htm 创建DOM2事件 第8章(\cha08) 8.1.htm 页面预览 8.2.htm 图像切换 8.3.htm 点亮文本 8.4.htm 鼠标跟随 8.5.htm 鼠标感应 8.6.htm 禁用鼠标按键 第9章(\cha09) 9.1.htm 文字的垂直滚动 9.2.htm 文字的渐隐渐显 9.3.htm 文字的闪烁显示 9.4.htm 文字的随意拖动 9.5.htm 文字的坠落显示 9.6.htm 页面内飘动的文字 9.7.htm 漫天飞舞的文字 9.8.htm 文字下落效果 第10章(\cha10) 10.1.htm 霓虹灯文字 10.2.htm 色彩渐变 10.3.htm 文字的渐大渐小 10.4.htm 文字大小动态变化 10.5.htm 文字变色显示 10.6.htm 打字效果显示 第11章(\cha11) 代码说明:代码11.6.htm需要IE5.5或以上版本支持 11.1.htm 随机显示 11.2.htm 打字效果 11.3.htm UBB代码实例 11.4.htm 从右至左排列的文字 11.5.htm 古汉语文字排版 11.6.htm 蒙古族文字排版 第12章(\cha12) 12.1.htm 文档颜色设置 12.2.htm 上次修改时间 12.3.htm DOM 1中的文档属性与聚集 12.4.htm 访问HTML元素属性 第13章(\cha13) 13.1.htm 按位置访问元素 13.2.htm 按名称访问元素 13.3.htm 动态修改元素内容 13.4.htm 改变的内容 13.5.htm 改变页面样式 第14章(\cha14) 14.1.htm 节点插入与追加 14.2.htm 节点复制 14.3.htm 节点删除与替换 14.4.htm 修改节点内容 第15章(\cha15) 15.1.htm HTML中的表格 15.2.htm 设置表格属性 15.3.htm 操作表格元素 15.4.htm 操作表元 第16章(\cha16) 16.1.htm 验证输入内容是否为空 16.2.htm 验证E-mail地址 16.3.htm 电话号码检测 第17章(\cha17) 17.1.htm 混合表单验证 17.2.htm onchange事件 17.3.htm 按键屏蔽 第18章(\cha18) 18.1.htm 打开窗口 18.2.htm 关闭窗口 18.3.htm 窗口写入 18.4.htm 窗口交互 18.5.htm 提示与警告对话框 第19章(\cha19) 19.1.htm 窗口移动 19.2.htm 改变大小 19.3.htm 窗口滚动 19.4.htm 设置超时 19.5.htm 窗口事件 19.6.htm IE窗口扩展 第20章(\cha20) 20.1.htm 访问框架 20.2.htm 内联框架 20.3.htm 框架间的交叉通信 20.4.htm 嵌套框架交叉通信 第21章(\cha21) 21.1.htm 图片的随机显示 21.2.htm 图像显隐 21.3.htm 图像滚动显示 21.4.htm 探照灯扫描 21.5.htm 多幅图像翻页显示 21.6.htm 水纹效果显示 21.7.htm 全景图效果 21.8.htm 手电效果 21.9.htm 雷达显示效果 第22章(\cha22) 22.1.htm 图像拖动 22.2.htm 按钮控制 22.3.htm 感应鼠标 22.4.htm 花环效果 22.5.htm 流星效果 22.6.htm 图像运动 22.7.htm 图像显示 22.8.htm 图像飞行一 22.9.htm 图像飞行二 第23章(\cha23) 23.1.htm 随机更换页面背景 23.2.htm 用户自选背景之一 23.3.htm 用户自选背景之二 23.4.htm 用户自选背景之三 23.5.htm 页面背景的闪电效果 第24章(\cha24) 24.1.htm 有图像的Media Player 24.2.htm 无图像的Media Player 24.3.htm 有图像的RealPlayer 24.4.htm 无图像的RealPlayer 24.5.htm 播放Flash文件 第25章(\cha25) 25.1.htm 位置固定的对联广告 25.2.htm 随页面滚动的对联广告 25.3.htm 全屏飘动的广告 25.4.htm 循环滚动的多幅广告 25.5.htm 漂浮3D广告 第26章(\cha26) 26.1.htm 基本的下拉菜单 26.2.htm 改进的下拉菜单 26.3.htm 渐显的下拉菜单 第27章(\cha27) 27.1.htm 折叠菜单 27.2.htm 远程菜单 27.3.htm 弹出菜单 第28章(\cha28) 28.1.htm 旋转导航菜单 28.2.htm 隐藏滑动菜单 28.3.htm 仿QQ菜单 28.4.htm 触发型导航菜单 28.5.htm 下拉列表菜单 28.6.htm 树型导航菜单 28.7.htm 变色标题菜单 第29章(\cha29) 29.1.htm 获取文本框中的内容 29.2.htm 显示和修改文字内容(DHTML) 29.3.htm 处理网页表格内容(DHTML) 29.4.htm 显示和修改网页内容(W3C) 29.5.htm 处理网页表格内容(W3C) 29.6.htm 综合应用 第30章(\cha30) 30.1.htm 显示浏览器名称与版本 30.2.htm JavaScript检测 30.3.htm 获取浏览器窗口大小 30.4.htm 设置屏幕对象的尺寸 30.5.htm 有选择地显示图片 30.6.htm 简单的性能检测 30.7.htm 模拟浏览器菜单 第31章(\cha31) 31.1.htm 实现md5加密 31.2.htm 编制自己的加密算法 第32章(\cha32) 代码说明:本章代码都具有一定危害性,可按照页面提示进行操作。 32.1.htm 字符串翻倍 32.2.htm 函数循环交叉调用 32.3.htm 无限递归调用 32.4.htm 构造无限数组 32.5.htm 载入超大图像 32.6.htm 关不掉的对话框 32.7.htm 一直弹出新窗口 第33章(\cha33) 代码说明: 1.代码33.1.htm须使用IE浏览器打开 2.代码33.2.htm须使用Mozilla Firefox浏览器打开 33.1.htm 使用IE处理XML 33.2.htm 使用Mozilla处理XML 33.3.htm XML文件内容分页显示 第34章(\cha34) 34.1.htm 格式化输出 34.2.htm 动态增删记录 第35章(\cha35) 代码说明: 1.对于代码35.1.htm,使用Mozilla Firefox浏览器可直接运行,如果使用IE浏览器,需要在服务器端运行。 2.对于代码35.2.html,需要IIS+PHP+MySQL或Apache+PHP+MySQL环境支持 35.1.htm 读取XML文档 35.2.html 实现联动选择 35.3.htm 实现菜单特效 第36章(\cha36) 代码说明: 1.代码36.1.index.php需要IIS+PHP环境或Apache+PHP环境支持 2.代码Default.aspx需要IIS+ASP.net环境支持 \36.1\ 36.1.index.php 实现简单相册 \36.2\ Default.aspx 实现文本聊天室

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值