51CTO下载-html+javascript+css学习宝典-优快云博客

本文深入探讨了HTML、CSS、JavaScript等前端开发技术的核心概念、应用实例及最佳实践，帮助开发者掌握前端开发的精髓。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
一、html知识
  1. meta标签
    Meta: 提供网页信息，搜索引擎使用
    <meta name=“aa” content=“bbb”>
    <meta http-equiv=“expires” content=“wed,26 feb 1997 08:21:57”> 设置网页过期时间
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <meta http-equiv=“refresh” content=“1” />每1秒后刷新本页
    <meta http-equiv=“refresh” content=“5;url=www.google.com” />过5秒后跳转到url
  2. 表格表单
    <form name=“form1” method=“get/post” action=“Servlet1” target=“new”>
    <table width="100%" border=1 gbcolor=“#FFFF00”>
    <caption align=top>表格标题</caption>
    <tr><th>行或列标题</th></tr>
     <td width=“20%” height=“10” colspan=“2” rowspan=“2” align=“left” valign=“center”>&nbsp;</td>
    <input type=hidden name=“name1” value=“value1”>
    <input type=text name=“name1” value=“value1”>
    <input type=button name=“name1” value=“提交” onClick=“sub”>
    <input type=checkbox name=id1 value=1 checked>洒井法子
    <input type=radio name=id1 value=1 checked>洒井法子
    <textarea name=aa cols=20 rows=5>多行文本输入框</textarea>
    <select name=sel size=1 multiple><option value=1>a</option></select>
  3. DIV和SPAN
   在W3C标准中，网页设计布局的常用方法是DIV+CSS，而不是TABLE。
   TABLE有什么用呢？Table用于数据显示，并不负责页面布局。
   在页面元素控制中，DIV是用得最多最广的一个标签元素。
   DIV又叫层，其实上更是一个容器。可以通过DIV来控制元素的位置、大小与样式，他具备了容器的特点，特别适合用来动态创建与销毁。在W3C标准中，DIV占据了非常重要的地位。
   Div—division，是个层，块级元素，可包含<p><h2>等常标签, DIV常用来布局，和CSS一起使用.
   div可以嵌套，里面的可以继承外面的，写法 .cc div{}  或 .cc div.aa{}，aa为嵌套的div的id名字
   和Table区别：table用来做显示,div用来布局
   span是个面板，是个行内元素，不能包含其它标签，主要用来嵌入某个标签中显示文本或某个字符，如：<h2>所有衣服<SPAN STYLE=“color: blue; font-size=50px;”>100</SPAN>元</h2>
   1). 一行三列布局
      <html>
      <head>
      <style type="text/css">
      #left {
          position: absolute;
          top: 15px;
          left: 0px;/*设置或获取对象相对于文档层次中下个定位对象的左边界的位置。*/
          border: 5px solid red;
          background: #FFF;
          width: 150px;
          height:400px;
      }
      #middle {
          margin: 0px 160px 0px 160px;   /*相对位置，相对于body页边距，body缺省是15px.<body style="margin:0px;" bgcolor="red">*/
          border: 5px solid #666;
          background: #FFF;
          height:400px;
          }
      #right {
          position: absolute;
          top: 15px;
          right: 0px;
          border: 5px solid #666;
          background: #FFF;
          width: 150px; /* ie5win fudge begins */
          height:400px;
      }
      </style>
      </head>
      <body>
          <DIV id=left><P>left</P></DIV>
        <DIV id=middle>中间的部分</DIV>
        <DIV id=right></DIV>
      </body>
      </html>
  2). 一行三列布局(吊顶)
      <html>
      <head>
      <style type="text/css">
      body{
          margin:2px;
      }
      #top{
          width:100%;
          border:solid thin 1px;
          background-color:#3366FF;
          height:80px;
      }
      #left {
          position: absolute;
          top: 90px;
          left:2px;
          border: 1px solid #666;
          background: #FFF;
          width: 150px;
      }
      #middle {
          margin: 6px 160px 0px 160px;
          border: 1px solid #666;
          background: #FFF;
          }
      #right {
          position: absolute;
          top: 90px;
          right: 0px;
          border: 1px solid #666;
          background: #FFF;
          width: 150px; /* ie5win fudge begins */
      }
      </style>
      </head>
      <body>
        <div id="top">中华人民共和国是一个伟大的民族。</div>
        <DIV id="left">中华人民共和国中华人民共和国中华人民共和国生命之冷藏室</DIV>
        <DIV id="middle">中<br />间<br />的<br />部分</DIV>
        <DIV id="right">看吧，天是多么的蓝啊，地是多么的广。</DIV>
      </body>
      </html>
  4. 其它常用标签
    标题标签：<h1>…<h6>
    段落：<p align=“left”>
    换行：<BR>
    预格式化：<pre>
    文本标签：<B><I><U><SUB><SUP>
    3的平方=9；3<sup>2</sup>=9
    无序号列表：<UL><LI></LI></UL>
    有序号列表：<OL><LI></LI></OL>
    水平线：<HR noshade size=5 align=left width=100% >无阴影、宽度5
    <center>居中的文字</center>
    文本显示：<font color=blue size=5 face=宋体/>
    图象标签：<img align=top src=a.jpg>
    超级链接
    <a href=“a.html#mao” target=“”>链接到页面的锚</a>
    target=_blank：新窗口打开
    target=_parent：父窗口打开
    target=_self：当前窗口打开
    target=_top：最顶层框架窗口打开
    target=指定位置：指定打开的位置
    <a href=“#mao”>aaa</a>  链接到一个锚
    <a name=“mao”>猫</a>  定义一个锚
    <a href=mailto:admin@accp.com> 连接到电子邮件
  5. frameset框架
       1) 一个frameset
        <frameset border=0 framespacing=0 rows="120,*" >
          <frame name="top" src="top.html"/>
          <frameset border=0 framespacing=0 cols="200,*">
            <frame name="left" src="left.html" />
            <frame name="right" src="right.html" />
          </frameset>
        </frameset>
       2) left.html
        <body>
          <ul>
            <li>用户管理</li>
            <ul>
              <li><a target="right" href="right.html">普通客户</a></li>
              <li><a href=javascript:sub()>VIP客户</a></li>
            </ul>
          </ul>
        </body>
        <script>
          function sub() {
            window.open("right.html","aa");
          }
        </script>
       3). right.html
        <body>
          <h1>你好</h1>
        </body>
  6. 内联框架
      <body>
        <div align="center">
        <iframe name="frame1" width="98%" height="98%" src="增删表的行.htm" />
        </div>
      </body>

二. CSS知识
  1. css特点
     控制显示样式
           重用
    控制灵活
    被所有浏览器支持
    实现页面与效果分离

  2. 任何标签的style对象，常有的属性
     position:absolute;  绝对位置，固定不能动
     top:10px; 离顶部的距离
     left:10px; 离左边的距离
     margin:auto;  边界，指离上个容器的距离
     padding:10pt; 离文字的距离
     width:100%; 宽度
     height:100%; 高度
  3. 样式表
    1) 行内样式表
      <p style=“color:red;font-family:system;font-size:36px">
      <h2 style=“font-style:bold;text-align=left;color=red”>
    2) 内嵌样式表
      语法规则：<head><style type=“text/css”>选择器</style></head>
      Html选择器：h2{color:red;font-size=24px}   p{…}
      Class选择器：.fire{color:red;} <td class=fire …>
      ID选择器：#fire{color:red;} <td id=“fire” …>
    3) 外部样式表
      <link rel="stylesheet" type="text/css" href="main.css" />
      <style type=“text/css” @import aa.css </style>
    4) 三大选择器
    当在 HTML中定义为 id=“divID”时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为 class=“divID”时，则在CSS 中对应的设置语法是.divID。
    如果id=“divID”这个层中包括了一个<img></img>， 则这个 img 在 CSS中对应的设置语法应该是#divID img {}，同样，如果是包含在 class=“divID”这个层中时，则设置语法应该是.divID img {}。
    HTML中的一切元素都是可以定义的， 例如 table、 tr、 td、 th、 form、 img、 input...等等，如果你要在 CSS中设置它们，则直接写入元素的名称加上一对大括号{}就可以了。

<head>
   <style type="text/css">
     body{text-align:right;color:red;font-family=system;font-size=72px;font-style=normal;}
     .class1{color:yellow;}
     #id1{color=green;}
   </style>
  <link href="a.css" type="text/css" rel="stylesheet" ></style>
</head>

<body>
  测试
  <h2 style="text-align=left;">h2</h2>
  <div id=id1>id1</div>
  <div class=class1>class1</div>
</body>

  4. css文件编写
     1) 写一个a.css文件，一定要以“;"结尾，否则不会显示样式
          body {
            font-family: "宋体";
            font-size: 12px;
            background-color: #FFFFFF;
            font-weight: normal;
          }
          table
          {
            font-family: "宋体";
            font-size: 12px;
            width : 90%;
            height :90%
          }
          td
          {
            font-family: "宋体";
            font-size: 12px;
          }
          input{
            font-family: "宋体";
            font-size: 12px;
          }
          .title{
            font-family: "宋体";
            font-size: 40px;
            font-weight: bold;
            color:red;
            vertical-align: center;
            border: solid 10px green;
          }
    2) 写一个a.html文件
          <html>
            <head>
                <link rel="stylesheet" type="text/css" href="a.css">
              </head>
            <body>
              关于明天停水的通知
              <BR>
              <div class="s1">
                将从上午8：00开始，晚上会有水
              </div>
            </body>
          </html>
  5. 用css换肤
    1) html
      <html>
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <title>无标题文档</title>
              <link id="linkx" href="styles1.css" rel="stylesheet" type="text/css" />
              <script>
                  function skin(){
                      var v = document.all.s.options[document.all.s.selectedIndex].value;
                      var skinx = "styles" + v + ".css";
                      document.all.linkx.href = skinx;
                  }
              </script>
          </head>
          <body>
              <select name="s" style="position:absolute; width:100pt;left:665pt;" onchange="skin();">
                  <option value="1">样式1</option>
                  <option value="2">样式2</option>
                  <option value="3">样式3</option>
              </select>
              <div id="d1">板块1</div>
              <div id="d2">板块2</div>
              <div id="d3">板块3</div>
          </body>
      </html>
    2) styles1.css
      #d1{
      position:absolute;
      top:10pt;
      left:20pt;
      width:200pt;
      height:200pt;
      background-color:#CC3333;  //背景颜色
      color:#33FF33;    //字体颜色
      }

      #d2{
      position:absolute;
      top:10pt;
      left:230pt;
      width:300pt;
      height:200pt;
      background-color:#FF0000;
      }

      #d3{
      position:absolute;
      top:220pt;
      left:20pt;
      width:510pt;
      height:200pt;
      background-color:#33FF00;
      }
    3) styles2.css
      #d1{
      position:absolute;
      top:220pt;
      left:20pt;
      width:510pt;
      height:400pt;
      background-color:#33FF00;
      background-image:url(14.JPG);
      background-repeat:no-repeat;
      }

      #d2{
      position:absolute;
      top:10pt;
      left:430pt;
      width:100pt;
      height:200pt;
      background-color:#FF0000;
      }

      #d3{
      position:absolute;
      top:10pt;
      left:20pt;
      width:400pt;
      height:200pt;
      background-color:#006666;
      color:#33FF33;
      }
    4) styles3.css
      #d1{
      position:absolute;
      top:10pt;
      left:20pt;
      width:200pt;
      height:200pt;
      background-color:#006666;
      color:#33FF33;
      }

      #d2{
      position:absolute;
      top:10pt;
      left:240pt;
      width:200pt;
      height:200pt;
      background-color:#FF6633;
      color:#003366;
      }

      #d3{
      position:absolute;
      top:10pt;
      left:460pt;
      width:200pt;
      height:200pt;
      background-color:#336699;
      color:#FF6600;
      }
  6. css嵌套
      <html>
      <head>
      <style type="text/css">
          #mydiv{
              color:#FF0000;
          }
          #mydiv div.ee{
              font-weight:bold;
          }
          .dc{
              color:blue;
          }

          .dc div{
              font-style:italic;
              background-color:#FFFF00;
          }

          .dc div.aa{
              border-bottom-style:solid;
              border-bottom-width:thin;
              border-bottom-color:#3300CC;

              border-top-style:solid;
              border-top-width:thin;
              border-top-color:#999999;

              border-left-style:solid;
              border-left-width:thin;
              border-left-color:#999999;

              border-right-style:solid;
              border-right-width:thin;
              border-right-color:#999999;
          }
      </style>
      </head>
      <body>
          <div id="mydiv">中华人民共和国
              <div class="ee">中华人民共和国</div>
          </div>
          <div class="dc">
              北大青鸟1
              <div>北大青鸟2</div>
              <div>北大青鸟3</div>
              <div class="aa">北大青鸟4</div>
          </div>
      </body>
      </html>


三. javascript
  1. js基础
      变量定义：var a=4;
      数组定义：
        一维数组：var arr; arr = new Array(3); arr[0]=“aa”; //只有一维
        如果有参数，表示有数组的长度，有参数列表，则是初始值
        二维数组：将一维数组的元素再次定义为一维数组
        var objArray = new Array(3);
    objArray[0] = new Array("0"); //第0个值是0
    objArray[1] = new Array(2);
    objArray[1][0] = new Array("1","拟稿","zs","3000px","2000px");
    objArray[1][1] = new Array("1","审批","ls","3000px","3000px");
      运算符： + /- /* /% /++ /-- /== /!= /> /< /&& /|| /!非
      条件运算：if( ){ } else { }
      循环：for(var i=0; i<100; i++) { … }
      Switch语句：switch(100) {
      case 1:
        x=4;
        break;
      Default:
        alert(“错误”);
      }

  2. js函数
      匿名函数：
        <script>
      var f = function() {alert('aaa');}
      var f2 = function(para) {alert(para);};
      f();f2('你好');
    </script>
  3. 构造函数(自定对象):
    function Teacher(name,gender) {
          this.name = name;  //this表示是Teacher的成员
          this.gender = gender;
          this.reading = reading;
          this.work = function(obj) {
        alert(obj);  
          }
        }
        function reading(book) {
          alert("正在读"+book);
        }

      var t = new Teacher('张三','女');
      t.reading("平凡的世界");
      t.work('张三');
  4. 系统函数
      Typeof：返回数据类型，如typeof(x)=string或boolean
      parseFloat(num1)：将num1字符串转换为float数据
      parseInt(“15”)：转字符串15为数字15，返回NaN表示不是一个数字
      Eval：计算字符串表达式的值，如eval(“5+3”) = 8;
      isNaN(s)：是否是一个数字，返回true或false
      Document.write(“aaa”);
      alert("请输入用户名!");
      confirm(“单击确定返回true，单击取消返回false");
      window.open(“b.html”,”打开位置”,"height=200,width=300,scrollbars=yes,resizable=yes,toolbar=no,menubar=no,location=no,status=yes");
      Var myTime = setTimeOut(“myfun()”,1000)：1000毫秒之后将调用函数myfun()，仅仅一次
      clearTimeout(myTime);  取消这个定时器的循环调用
      var anExpression = "6 * 9 % 7";
      var total = eval(anExpression); // 将变量 total 赋值为 5。
      // 将一个字符串赋给 totality （注意嵌套引用）
      var totality = eval("’...surrounded by acres of clams.’");

  var a = eval(5*3);
  var b = eval("'abc'");
  var c = eval("alert('eval')");
  alert(a+"\t"+b);

  4. 事件
      onClick：单击
      onBlur：失去焦点事件
      onFocus：获得焦点事件
      onMouseOver：鼠标悬停事件
      onMouseOut：鼠标移出图片或文字
      onMouseMOve：鼠标在图片上移动
      onLoad：加载html页面时产生此事件
      onSubmit：<form onSubmit=“return alert(‘aaa’)” >
      onResize：窗口大小改变事件
      onMouseDown
      onMouseUp
      onChange：文本框值被修改
  5. js对象
    1) 浏览器对象
      Window
        close()
    2). 使用window对象弹出各种样式的窗口
      function opening() {
        window.open('第一章 js.html','_blank','height=200,width=300,scrollbars=yes,resizable=yes,toolbar=no,menubar=no,location=no,status=yes');
      }
      function modal() {
        window.showModalDialog('a.html',"",'center:yes;dialogHeight:268px;dialogWidth:216px;unadorned:yes;scroll:off;help: No; status:no;resize:no');
      }
      function modeless() {
        window.showModelessDialog('a.html',"",'center:yes;dialogHeight:268px;dialogWidth:216px;unadorned:yes;scroll:off;help: No; status:no;resize:no');
      }
    3) 应用举例
    <html>
    <body bgcolor="yellow">
        <input value="打开模式窗口" type=button onclick="sub()">
    </body>
    <script>
      function Teachar(name,age) {
        this.name=name;
        this.age=age;
      }
      function sub() {
        var obj = new Teachar("张三",18);
        var ret=window.showModalDialog("b.html",obj,"center:yes;dialogHeight:130px;dialogWidth:250px;unadorned:yes;scroll:off;help: No; status:no;resize:no");
        alert(ret.msg);
      }
    </script>
    </html>
      b.html
    <body>
      <input value="关闭窗口并返回值" type=button onclick="sub()">
    </body>
    <script>
    function sub() {
      var obj = window.dialogArguments;
      var retobj = new Object();
      retobj.msg = obj.name+"的年龄是"+obj.age;
      window.returnValue = retobj;
      window.close();
    }
    </script>

    4) Document:
        定位页面的特定元素
          document.all.元素ID或元素名称
          document.all['元素ID或元素名称']
          document.getElementById('')
          document.form1.uid.value
        动态创建元素
          document.createTextNode("内容");  //创建一个文本元素，就是一些文字
          var opt = document.createElement("option");  //div,img,input
          标签.appendChild(img);  //往标签里追加一个子标签

        动态销毁元素
          标签.removeNode(true);  //删除自己，自杀式
          parent.removeChild(child);  //父杀子
        标签名.syle.css    //任何标签对象都有style属性

<script>
  var t = document.createTextNode("性别");
  document.body.appendChild(t);
  var sel = document.createElement("select");
  var opt1 = document.createElement("option");
  sel.add(opt1);
  opt1.innerText="男";
  opt1.value="1";
  var opt2 = document.createElement("option");
  sel.add(opt2);
  opt2.innerText="女";
  opt2.value="0";
  document.body.appendChild(sel);

  var v1 = document.createElement("input");
  v1.type="button";
  v1.value="删除";
  v1.onclick=function() {
    sel.removeNode(true);
    document.body.removeNode(t);  //把body所有对象都删除了
  }
  eval("document.body.appendChild(v1);");
</script>


      history
        <input type=button value="返回" onClick="history.back()" />
        <a href=javascript:history.back()>返回</a>
        <a href=javascript:history.forward()>下一页</a>
      Location
        Location.href=“http://www.google.com”;加载另一页面

<body>
  <a href=javascript:history.back()>返回</a>
  <a href=javascript:history.forward()>下一页</a>
  <a href=javascript:sub() target="_self">去Google</a>
</body>

<script>
  function sub() {
   location.href="http://www.google.com";
  }
</script>

    2) 脚本对象
        字符串：
          属性length，substr(start,len),substring(start,end),indexOf(s)
          var s = "The rain in Spain falls mainly in the plain..";
          ss = s.substring(12, 17);   // 取子字符串。
        Date：var d= new Date();

function sub() {
  var str = ".@";
  var email="vandh@163.";
  var count = 0;
  for(var i=0; i<str.length; i++) {
    if(email.indexOf(str.charAt(i))>=0) count++;
  }
  if(count==2) {
    if(email.substring(email.indexOf("@")+1,email.indexOf("."))) {
      if(email.substr(email.indexOf(".")+1,1)) {
        alert('邮件地址正确');
        return;
      }
    }
  }

  alert('邮件地址有误');
  return ;
}

    3) Html对象
        复选框
          If(form1.chk1.checked==true) …
          Form1.chk1.length：  //所有选中的chk1的个数
          Form1.chk1.checked = true;   //选中chk1复选框
        单选框：同上
        下拉框
          Var I = form1.sel.selectedIndex：获取选中的索引项
          Form1.sel.options[i].value：得到选中的值
  6. js文件编写
    1） 写一个js文件，内有一个函数
          function validate(uid,pwd) {
             if(uid=="") {
            alert("用户名不能为空");
            return false;
             }
             if(pwd=="") {
            alert("密码不能为空");
            return false;
             }
             return true;
           }
    2) 写一个a.html文件，引用这个js文件
          <html>
          <head>
            <script language="JavaScript" src="a.js"></script>
          </head>
          <body>
             <form name="form1">
               <input type="text" name="uid"/><BR>
               <input type="text" name="pwd"/><BR>
               <input type="submit" onClick="return validate(form1.uid.value,form1.pwd.value);"/>
             </form>
          </body>
          </html>

  6、js正则表达式及其应用
        \: 转译
        ^ $：开始和结束
        .   ： 匹配一个字符串中任何单个的打印或非打印字符，除了换行符 (\n) 之外。
        *+？：0-n,1-n,0-1
        ？：当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。
        {n},{n,}，{n,m}: n,>=n,n<=x<=m
        x|y： x或y
        [xyz],[^xyz] : 包含待匹配的列表与未包含
        [a-z], [^a-z]: a到z任一个，相反
        \num 匹配 num，其中 num 是一个正整数。对所获取的匹配的引用(即第一个括号)。例如，'(.)\1' 匹配两个连续的相同字符。
        \d = [0-9]
        \D = [^0-9] 匹配一个非数字字符
        \n,\r: 换行/回车
        \s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。
        \S 匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。
        \t 匹配一个制表符。等价于 \x09 和 \cI。
        \w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
        \W 匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。
        \b 匹配一个单词边界，也就是指单词和空格间的位置。
        \B 匹配非单词边界。
        /expression/ : 分隔符之间放入表达式模式的各种组件来构造一个正则表达式。
        /a/="a" : 匹配所搜索字符串中的该字符本身。
        () : 可用来分组，如/^Chapter|Section [1-9]$/ 应为：/^(Chapter|Section) [1-9][0-9]{0,1}$/

        escape 方法返回一个包含了 charstring 内容的字符串值（ Unicode 格式）。所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替，其中 xx 等于表示该字符的十六进制数。例如，空格返回的是 "%20" 。
        stringObj.replace(rgExp, replaceText) ：返回根据正则表达式进行文字替换后的字符串的复制。
        rgexp.test(str) : 返回一个 Boolean 值，它指出在被查找的字符串中是否存在模式。

        <body>
        <form name="form1" method="post">
          用户标识：<input type="text" name="uid"/><BR>
          用户年龄：<input type="text" name="age"/><BR>
          用户邮箱：<input type="text" name="email"/><BR>
          出生日期：<input type="text" name="birth"/><BR>
          <input type="submit" onclick="return validate();"/>
        </form>
        </body>
        <script>
          //判断是否包含特殊字符
          function validate() {
            isNull();
            isValid();
            isNum();
            isBetween();
            isEmail();
            isDate();
          }
          function isNull() {
            var uid = form1.uid.value;
            if(uid=="") {
                alert("用户标识不能为空");
                return false;
            }
          }
          function isValid() {
            var str = ".*/%$#@!~&^)(_+\=-`";
            var uid = form1.uid.value;
            for(var i=0; i<uid.length; i++) {
              if(str.indexOf(uid.charAt(i))>=0) {
                alert("用户标识不能包括特殊字符");
                return false;
              }
            }
          }
          function isAge() {
            var age = form1.age.value;
            if(age=="") return false;
            if(isNaN(age)) {
              alert("testAge年龄必须是数字");return false;
            }
          }
          function isNum() {
            var age = form1.age.value;
            var bool = /^\s*(\d*\.?\d*)\s*$/g.test(age);
            if(!bool) {
              alert("isnum年龄必须是数字");return false;
            }
          }
          function isBetween() {
            var age = parseInt(form1.age.value);
            if(age<18 || age>60) {
              alert("年龄不能小于是18岁，不能大于60岁");return false;
            }
          }
          function isEmail() {
            var email = form1.email.value;
            if(email=="") return false;
            var bool =  /^([a-z]|[A-Z])+\d*@\w+\.([a-z]|[A-Z])+$/g.test(email);
            if(!bool) {
              alert("邮箱必须是xxx@yyy.zzz格式");return false;
            }
          }
          //判断日期形如：yyyy-MM-dd
          function isDate() {
            var birth = form1.birth.value;
            if(birth=="") return false;
            var bool =  /^([1-2]\d{3})-((0?[1-9])|(1[0-2]))-((0?[1-9])|([1-2][0-9])|(3[0-1]))$/g.test(birth);
            if(!bool) {
              alert("出生日期必须是yyyy-MM-dd格式");return false;
            }
          }
          //将特殊字符替换掉，如+=%2B
          function URLencode(sStr) {
            return escape(sStr).
                 replace(/\+/g, '%2B').
                replace(/\"/g,'%22').
                   replace(/\'/g, '%27').
                     replace(/\//g,'%2F');
          }
          function isUndef(v) {
            return typeof(v) == "undefined";
          }
        </script>


<script>
  var v1 = document.createElement("input");
  v1.type="text";

  var v2 = document.createElement("input");
  v2.type="button";
  v2.value="提交";
  v2.onclick=function() {
    alert(v1.value);
    var bool = /^[1-2]\d{3}-((0?[1-9])|(1[0-2]))-((0?[1-9])|([1-2][1-9])|(3[0-1]))$/g.test(v1.value);
    if(bool)
      alert("yes");
    else
      alert("no");
  }

  document.body.appendChild(v1);
  document.body.appendChild(v2);

</script>

  

  8. 制动浮动的DIV广告层
        <input id="btn" type="button" value="弹出层" onclick="showdiv();">

        <style>
            .op1{
                filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
            }
          </style>

          <script language="JavaScript">
          <!--
              var oldx;
              var oldy;
              var movediv;
              document.onmousemove = move;

              function down(){
                  movediv = document.all.my;
                  oldx = event.x - movediv.style.pixelLeft;
                  oldy = event.y - movediv.style.pixelTop;
                  movediv.style.cursor = "Move.ani";
              }
              function up(){
                  if(movediv){
                      movediv.style.cursor = "default";
                      movediv = null;
                  }
              }
              function move(){
                  if(movediv){
                      movediv.style.left = event.x - oldx;
                      movediv.style.top = event.y - oldy;
                  }
              }

            function showdiv(){
                var old = document.getElementById("my");
                if(old != undefined){
                    return;
                }

                //产生一个背景层
                var bodyheight = document.body.scrollHeight < document.body.clientHeight ? document.body.clientHeight : document.body.scrollHeight;
                var bodywidth = document.body.scrollWidth < document.body.clientWidth ? document.body.clientWidth : document.body.scrollWidth;

                var backdiv = document.createElement("div");
                backdiv.style.position = "absolute";
                backdiv.style.left = 0;
                backdiv.style.top = 0;
                backdiv.style.width = bodywidth;
                backdiv.style.height = bodyheight;
                backdiv.style.backgroundColor = "black";
                backdiv.className = "op1";

                document.body.appendChild(backdiv);

                ///////////////////////////////////////////////

                var div = document.createElement("div");
                div.id="my";
                div.style.position = "absolute"; //设置成对位置

                //关联事件
                div.onmousedown = down;
                div.onmouseup = up;

                var closeBtn = document.createElement("input");
                closeBtn.type = "button";
                closeBtn.value = "X";
                closeBtn.onclick = function(){
                    div.removeNode(true);
                    backdiv.removeNode(true);
                }

                div.appendChild(closeBtn);

                var hr = document.createElement("hr");
                div.appendChild(hr);

                var txt = document.createTextNode( "  书山有路勤为径，学海无涯苦作舟");
                div.appendChild(txt);

                //div.style.overflow = "scroll";
                div.style.backgroundColor = "yellow";
                div.style.width = 300;
                div.style.height = 200;

                //计算出按钮的绝对位置
                var btn = document.getElementById("btn");
                var l = btn.offsetLeft;
                var t = btn.offsetTop;

                var newobj = btn;
                while(newobj = newobj.offsetParent){
                    l += newobj.offsetLeft;
                    t += newobj.offsetTop;
                }

                div.style.top = t + btn.offsetHeight;
                div.style.left = l;

                document.body.appendChild(div);
            }
        //-->
        </script>

  9. 复选框全选/全不选效果
     <body>
          <input type="checkbox" name="c"><br>
          <input type="checkbox" name="c"><br>
          <input type="checkbox" name="c"><br>
          <input type="checkbox" name="c"><br>
          <input type="checkbox" name="c"><br>
          <input type="button" value="全" onclick="selectAll(true)">
          <input type="button" value="反" onclick="selectIns();">
          <input type="button" value="不" onclick="selectAll(false)">
    </body>
    <script language="JavaScript">
        <!--
            function selectAll(t){
                  for(var i = 0; i < document.all.c.length; i ++){
                      document.all.c[i].checked = t;
                  }
            }
            function selectIns(){
                for(var i = 0; i < document.all.c.length; i ++){
                    document.all.c[i].checked = !document.all.c[i].checked;
                }
            }
//第一次选中，下次全不选，周而复始
var bool = true;
function selectAll() {
  var v1 = document.all.c;
  for(var i=0; i<v1.length; i++) {
    document.all.c[i].checked = bool;
  }
  bool = !bool;
}
        //-->
    </script>

  10、制作下拉框的省市级联效果
      <BODY onload = "chg()">
          专业：
            <select onchange="zy()" name="zy" id="zy">
                <option value="0">ACCP软件部</option>
                <option value="1">BENET网络部</option>
            </select>
          课程：
            <select name="kc" id="kc"></select>
      </BODY>
    <SCRIPT LANGUAGE="JavaScript">
        <!--
          var arr = new Array(2);
            arr[0] = new Array("C语言","JAVA","MYSql");
            arr[1] = new Array("SQLServer数据库","企业建筑");
            function zyselect(){
                //var zy = document.getElementById("zy");
                //var kc = document.getElementById("kc");  //getElementsByName不行
                var zy = document.all.zy;
                var kc = document.all("kc");

                var idx = zy.options[zy.selectedIndex].value;
                for(var i = kc.options.length - 1; i >= 0; i --){
                    kc.remove(i);
                }
                for(var i = 0; i < arr[idx].length; i ++){
                    var opt = document.createElement("option");
                    kc.add(opt);
                    opt.innerText = arr[idx][i];
                    opt.value = arr[idx][i];
                }
            }
        //-->
        </SCRIPT>

  11. 只能输入数字
    <a href="http://www.baidu.com" onclick="return go();">百度</a><hr>
      请输入数字:<input onkeypress="return onlyNum();">

      function go(){
            var v = window.confirm("真的要去百度吗?");
            return v;
        }
        function onlyNum(){
            if(event.keyCode > 57 || event.keyCode < 48 && event.keyCode != 46)
                return false;
            return true;
        }

  12. 预览图片
    <html>
        <head>
            <script language="JavaScript">
            <!--
                function pre(){
                    var pos = document.all.f.value.lastIndexOf(".");
                    var ext = document.all.f.value.substring(pos + 1,document.all.f.value.length);
                    //alert(ext);
                    if(ext.toLowerCase() == "jpg" || ext.toLowerCase() == "gif" || ext.toLowerCase() == "bmp" || ext.toLowerCase() == "png"){
                        if(document.all.i){
                            document.all.i.removeNode(true);
                        }
                        var img = document.createElement("<img>");
                        img.id="i";
                        img.src = document.all.f.value;
                        document.all.img.appendChild(img);
                    }else{
                        alert("对不起,您上传的不是图片!");
                    }
                }
            //-->
            </script>
        </head>
      <body>
      请选择图片:<input type="file" name="f" onchange="pre();">
      <div id="img"></div>
      </body>
    </html>

  13. 像GOOGLE一样的实时提示
    <html>
    <script type="text/javascript">
        var values = new Array("Aptech", "Abcdeft", "A",     "b");
        //点击文档的任何一个地方,提示都会消失
        document.onclick = function(){
            deleteDiv();
        }
        //删除层
        function deleteDiv(){
            var kv = document.getElementById("google");
            if(kv)    kv.removeNode(true);
        }
        //查找匹配的关键字
        function search(){
            //防止产生N多个DIV,所以先判断是否存在,如果存在,则删除.
            deleteDiv();
            //创建一个层，用于显示实时提示
            var div = document.createElement("div");
            div.id = "google";
            div.style.position = "absolute";//设置位置为绝对位置
            //控制层的位置和大小
            //位置
            var top = document.all.key.offsetTop;
            var left = document.all.key.offsetLeft;
            //大小
            var width = document.all.key.offsetWidth;
            var height = 0;

            //设置
            div.style.top = top + document.all.key.offsetHeight - 1;
            div.style.left = left;
            div.style.width = width - 2;

            //效果:边框样式框和背景色
            div.style.backgroundColor = "white";
            div.style.borderTopStyle = "solid";
            div.style.borderBottomStyle = "solid";
            div.style.borderLeftStyle = "solid";
            div.style.borderRightStyle = "solid";

            //注意,边框是加在区域外围的,所以在设置宽度的时候减掉了1 + 1 = 2个像素
            div.style.borderTopWidth = 1;
            div.style.borderBottomWidth = 1;
            div.style.borderLeftWidth = 1;
            div.style.borderRightWidth = 1;

            //填充数据
            var value = document.all.key.value;
            var f = false;
            for(var i = 0; i < values.length; i ++){
                if(values[i].substr(0, value.length).toLowerCase() == value.toLowerCase()){
                    f = true;

                    //每个选项填充到div中
                    var span = document.createElement("<div>");
                    span.innerText = values[i];
                    span.style.fontSize = 14;
                    span.style.padding = "2px";
                    div.appendChild(span);

                    //触发每个项目的鼠标移入移出事件
                    span.onmouseover = function(){
                        event.srcElement.style.cursor = "hand";
                        event.srcElement.style.backgroundColor = "blue";
                        event.srcElement.style.color = "white";
                    }
                    span.onmouseleave = function(){
                        event.srcElement.style.cursor = "default";
                        event.srcElement.style.backgroundColor = "white";
                        event.srcElement.style.color = "black";
                    }
                    //单击选项时将该选项的值填充到文本框.
                    span.onclick = function(){
                        document.all.key.value = event.srcElement.innerText;
                        //填充完毕后删除DIV
                        deleteDiv();
                    }
                }
            }

            //将层追加到页面
            if(f){
                document.body.appendChild(div);
            }

            //如果文本框中没有内容,则删掉DIV
            if(document.all.key.value.length == 0){
                deleteDiv();
            }
        }
    </script>
    </head>
    <body style="font-size:14px">
        关键字：<input name="key" size="50" onpropertychange = "search()">
        <div id="d"></div>
    </body>
    </html>

  14. 动态销毁元素
    <HTML>
        <HEAD>
            <SCRIPT LANGUAGE="JavaScript">
            <!--
                function kill(){
                    var img = document.getElementById("img");
                    if(img){
                        //img.removeNode(true);
                        document.body.removeChild(img);
                        //上面两种方法都可以删除图片,但第一种方法更直观.
                    }else{
                        alert("对不起，图片已删除");
                    }
                }
            //-->
            </SCRIPT>
        </HEAD>
        <BODY>
            <input type="button" value="销毁" onclick="kill();"><br>
            <img id="img" src = "Creek.jpg">
        </BODY>
    </HTML>

  15. 选中行
      <html>
          <script language="JavaScript">
          <!--
              function newColor(tr){
                  tr.style.backgroundColor = "blue";
                  tr.style.color = "white";
              }

              function oldColor(tr){
                  tr.style.backgroundColor = "white";
                  tr.style.color = "black";
              }
          //-->
          </script>
       <body>
        <table border="1" width="100%">
        <tr onmouseover="newColor(this);" onmouseout="oldColor(this);">
          <td>aaaa</td>
          <td>bbbb</td>
          <td>cccc</td>
        </tr>
        <tr onmouseover="newColor(this);" onmouseout="oldColor(this);">
          <td>dddd</td>
          <td>eeee</td>
          <td>ffff</td>
        </tr>
        </table>
        <input onfocus="this.select()" value="中华人民共和国">
       </body>
      </html>

  16. 块的展开
      <html>
          <script language="JavaScript">
          <!--
              function ex(divid){
                  var div = eval("document.all." + divid);
                  if(div.style.display == "none"){
                      div.style.display = "block";
                  }else{
                      div.style.display = "none";
                  }
              }
          //-->
          </script>
       <body>
        <div onclick="ex('id1');"  style="cursor:hand; font-weight:bold">沁园春·雪</div>
          <div id="id1" style="display:none">
            &nbsp;&nbsp;&nbsp;&nbsp;北国风光，<BR>
            &nbsp;&nbsp;&nbsp;&nbsp;千里冰封，<BR>
            &nbsp;&nbsp;&nbsp;&nbsp;万里雪飘。<BR>
          </div>
       </body>
      </html>

17. 动态树
18. 收缩条
19. js加密
20. 日期框
21. 表单动态增删改查
22. 分行下载