`
wangmengbk
  • 浏览: 292297 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JavaScript(2)

阅读更多
6.表单验证

    <html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>用户注册信息</title>

<style type="text/css">

<!--

    .bg{

        width:100px;

        height:33px;

        border:0;

        background-image:url(注册.gif);

        background-color:#FFFFFF;

        cursor:hand;

        color:#006600;

    }

-->

</style>

<script language="JavaScript" type="text/JavaScript">

<!--

function MM_reloadPage(init) {  //reloads the window if Nav4 resized

  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

//-->

</script>

<!--弹出成功页面,显示注册信息-->

<script language="javascript">

<!--

    function reg()

    {

        //todo:验证

      

        var username=document.regFrm.username.value;

        var age=document.regFrm.age.value;

        var sexGroup=document.regFrm.sex;

        var sex;

        //关于性别

        for(var i=0;i<sexGroup.length;i++)

        {

            if(sexGroup[i].checked)

            {

                sex=sexGroup[i].value;

                break;

            }

        }

        //关于爱好

        var fg=document.regFrm.fav;

        var aihao="";

        for(var i=0;i<fg.length;i++)

        {

            if(fg[i].checked)

            {

                aihao=aihao+" "+fg[i].value+" ";

            }

        }

      

        //民族

        var mz=document.regFrm.mz.value;

        var sw=window.open("success.htm","成功","width=500,height=600");

      

        sw.document.write(" <div style='background-color:#006666'>");

        sw.document.write("<center>恭喜你,注册成功</center>");

        sw.document.write("<br>您的姓名:"+username);

        sw.document.write("<br>您的年龄:"+age);

        sw.document.write("<br>您的性别:"+sex);

        sw.document.write("<br>您的爱好:"+aihao);

        sw.document.write("<br>您的民族:"+mz+"</div>");

      

      

      

    }

-->



</script>

</head>



<body>

<form name="regFrm" method="post" action="">

  <table width="403" height="261" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#0000CC">

    <tr>

      <td align="left" valign="middle">用户名:

      <input name="username" type="text" id="username"></td>

    </tr>

    <tr>

      <td> 年龄:

      <input name="age" type="text" id="age"></td>

    </tr>

    <tr>

      <td>性别:

      <input name="sex" type="radio" value="1" checked>

      男

      <input type="radio" name="sex" value="0">

      女</td>

    </tr>

    <tr>

      <td>爱好:

      <input name="fav" type="checkbox" id="fav" value="eat">

      吃饭

      <input name="fav" type="checkbox" id="fav" value="sleep">

      睡觉

      <input name="fav" type="checkbox" id="fav" value="beat">

      打豆豆</td>

    </tr>

    <tr>

      <td>民族:

        <select name="mz" size="1" id="mz">

          <option value="hanzu">汉族</option>

          <option value="zangzu">藏族</option>

          <option value="shirenzu">食人族</option>

              </select></td>

    </tr>

    <tr>

      <td><input type="button" value="注册" class="bg" onClick="javaScript:reg();"></button>



    </tr>

  </table>

</form>

</body>

</html>

7.复选框(全选和反选)

              <html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>全选例子</title>

<script language="javascript">

<!--

       //全选的方法,注意让那些全选的复选框的name同名

       function sa()

       {

              var cg=document.getElementsByName("iwant");//得到所有的名字是iwant的复选框

              //首先我们应该判断全选那个复选框是否被选中

              if(document.getElementById("cbxall").checked)//选中的时候,单击的话,应该让所有的iwant复选框选中

              {

                     for(var i=0;i<cg.length;i++)

                     {

                            cg[i].checked=true;

                          

                     }

              }

              else//不选中

              {

                     for(var i=0;i<cg.length;i++)

                     {

                            cg[i].checked=false;

                          

                     }

              }

       }

     

       //反选的

       function rs()

       {

              var cg=document.getElementsByName("iwant");//得到所有的名字是iwant的复选框

            

              for(var i=0;i<cg.length;i++)

              {

                     cg[i].checked=!cg[i].checked;//注意这句话,让所有选中的成为非选中的

                   

              }

       }

-->

</script>

</head>



<body>

<h3 align="center">复选框的一些操作</h3>

<form action="" method="post" name="sf" id="sf">

  <p>

    <input type="checkbox" value="house" name="iwant">

房子  </p>

  <p>    <input type="checkbox" name="iwant" value="car">

车子  </p>

  <p>

    <input type="checkbox" name="iwant" value="money">

票子  </p>

  <p>    <input type="checkbox" name="iwant" value="gold">

金子  </p>

  <p>    <input name="iwant" type="checkbox" id="iwant" value="girl">

女人  </p>

<hr>

  <p>    <input name="cbxall" type="checkbox" id="cbxall" value="checkbox" onClick="javaScript:sa();">

全选

  <input type="checkbox" name="cbxReverse" value="checkbox" onClick="javaScript:rs()">

  反选

  </p>

</form>

</body>

</html>



8.菜单互动

       <html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>级联菜单例子</title>

<script language="javascript">

<!--

       function hd()

       {

              //比如我们有3个帅哥(刘德华,李连杰,bobo组合),五个美女(石榴,秋香,芙蓉,天仙妹妹,杨二)

              var p=new Array();//定义一个数组

              //8行3列的数组

              p[0]=new Array("刘德华","ldh","boy");

              p[1]=new Array("李连杰","llj","boy");

              p[2]=new Array("bobo组合","bb","boy");

              p[3]=new Array("石榴","sl","girl");

              p[4]=new Array("秋香","qx","girl");

              p[5]=new Array("芙蓉","fr","girl");

              p[6]=new Array("天仙妹妹","txmm","girl");

              p[7]=new Array("杨二","yr","girl");

            

              var first=document.sf.personType;

              var second=document.sf.person;

              second.length=0;

              for(var i=0;i<p.length;i++)

              {

                     if(p[i][2]==(first.options[first.selectedIndex].value))

                     {

                            second.add(new Option(p[i][0],p[i][1]));//其中的new Option(参数1,参数2),参数1代表的是显示值,参数2代表的传递值

                     }

              }

       }

-->



</script>

</head>



<body>

       <form name="sf">

              <select name="personType" onChange="hd();">

                     <option value="boy">帅哥</option>

                     <option value="girl">美女</option>

              </select>

              <select name="person">

              </select>

       </form>

       <script language="javascript">

              hd();//页面加载完成后调用的函数

       </script>

</body>

</html>

分享到:
评论

相关推荐

    JavaScript2

    JavaScript2JavaScript2JavaScript2JavaScript2JavaScript2JavaScript2JavaScript2

    Javascript2-基础语法

    Javascript2 PPT-基础语法

    深入浅出JavaScript 2

    深入浅出JavaScript 2 深入浅出JavaScript 2

    javascript 2d 桌球 html 格式

    源码 javascript 2d 桌球 html 格式

    [JavaScript] 面向对象 JavaScript 第2版 英文版

    [Packt Publishing] 面向对象 JavaScript 第2版 英文版 [Packt Publishing] Object Oriented JavaScript 2nd Edition E Book ☆ 图书概要:☆ Think in JavaScript Make object oriented programming ...

    javascript 2d桌球游戏代码(转载)

    javascript 2d桌球游戏代码 可以轻松学习,掌握提高,自己的设计思路

    深入理解JavaScript系列

    第2部分介绍JavaScript的发展和技术背景;第3部分深入探索JavaScript,介绍了语法、值、运算符、布尔类型、数字、字符串、语句、异常捕获、函数、变量、对象与继承、数组、正则表达式、Date、Math、JSON、标准全局...

    《JavaScript》课程标准

    2. 核心 JavaScript:掌握 JavaScript 的基本语法;掌握 JavaScript 的高级特性。 3. 客户端 JavaScript:了解客户端 JavaScript 的起源和背景;掌握客户端 JavaScript 的工作方式;掌握客户端 JavaScript 的应用。 ...

    JavaScript权威指南(JavaScript犀牛书一本)

    2. **对象和原型**:深入探讨了JavaScript的面向对象特性,包括对象字面量、构造函数、原型链、继承机制等,这是理解JavaScript灵活性的关键。 3. **作用域和闭包**:解析了JavaScript中的变量作用域规则以及闭包的...

    JavaScript文档

    本资源包包含了多个关于JavaScript的重要参考资料,包括“JavaScript权威指南(英文版).chm”、“javascript5.5.chm”、“css2gb.chm”以及“JavaScript对象与数组参考大全 .chm”。 首先,我们来看“JavaScript权威...

    [JavaScript] Effective JavaScript 编写高质量JavaScript代码的68个有效方法 (英文版)

    [Addison-Wesley Professional] Effective JavaScript 编写高质量JavaScript代码的68个有效方法 (英文版) [Addison-Wesley Professional] Effective JavaScript 68 Specific Ways to Harness the Power of ...

    JavaScript基础语法(ppt)

    JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)...

    Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript[EPUB版]

    Author David Herman, with his years of experience on Ecma’s JavaScript standardization committee, illuminates the language’s inner workings as never before—helping you take full advantage of ...

    《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf

    《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf《JavaScript程序设计案例教程》课件(共13章)第...

    javaScript api

    2. 事件处理:JavaScript API 提供了一系列事件处理方法,如`addEventListener()`和`removeEventListener()`,使得开发者可以响应用户的交互行为,如点击按钮、页面滚动等。 3. AJAX:JavaScript API 支持使用...

    VS2015安装证书,JavaScript_ProjectSystem.msi,JavaScript_LanguageService.msi

    2. **JavaScript_LanguageService.msi**:这是JavaScript语言服务,它提供了对JavaScript语言的语法高亮、自动完成功能、代码分析、错误检测等功能。语言服务是Visual Studio IDE中不可或缺的一部分,它增强了开发者...

    javaScript经典实例

    2. **事件处理**:JavaScript事件允许用户与页面进行交互。例如,`addEventListener()`用于绑定事件处理函数,`event.preventDefault()`阻止默认行为,`event.stopPropagation()`阻止事件冒泡。 3. **动画效果**:...

    JavaScript手册 JavaScript手册

    JavaScript是一种广泛应用于网页和网络应用的编程语言,尤其在客户端脚本方面扮演着核心角色。JavaScript手册是学习和掌握这门语言的重要参考资料。手册通常包含了语言的基础语法、数据类型、控制结构、函数、对象、...

    JavaScript函数(源代码)

    JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)...

Global site tag (gtag.js) - Google Analytics