`
wangmengbk
  • 浏览: 291913 次
  • 性别: 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

    javascript 2d 桌球 html 格式

    源码 javascript 2d 桌球 html 格式

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

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

    深入理解JavaScript系列

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

    head first JavaScript源码

    《Head First JavaScript源码》是2010年出版的一本中文版JavaScript学习书籍的源码,这本书以其独特的视觉设计和易理解的方式深入浅出地介绍了JavaScript编程语言。JavaScript是一种广泛应用于网页和网络应用的脚本...

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

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

    JavaScript文档

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

    JavaScript学习指南 高清 PDF

    2. **对象与原型链**:JavaScript是基于对象的语言,它使用对象来存储数据和功能。原型链是JavaScript实现继承的一种方式,通过__proto__属性或Object.getPrototypeOf方法可以访问对象的原型。 3. **作用域与闭包**...

    JavaScript.DOM编程艺术(第2版)

    《JavaScript DOM编程艺术(第2版)》在简洁明快地讲述JavaScript和DOM的基本知识之后,通过几个实例演示了专业水准的网页开发技术,透彻阐述了平稳退化等一批至关重要的JavaScript编程原则和最佳实践,并全面探讨了...

    log4javascript2:用于 JavaScript 的日志库,带有基于 log4j 的 API

    log4javascript2 log4javascript 的第 2 版,一个基于 log4j 的带有 API 的 JavaScript 日志库。 这是一个正在进行的工作。 可以在找到版本 1 的最新稳定版本。 官方网站:

    [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)...

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

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

    《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 支持使用...

    JavaScript DOM编程艺术(第2版pdf)+源代码

    JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍,专注于讲解如何使用JavaScript与Document Object Model(DOM)进行交互。DOM是Web页面的结构化表示,它允许我们通过编程方式操纵HTML和XML...

    JavaScript函数(源代码)

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

Global site tag (gtag.js) - Google Analytics