51CTO下載-html+javascript+css學習寶典

時間 2019-12-13
標籤 51cto cto 下載 html+javascript+css html javascript css 學習寶典欄目職業生涯简体版
原文原文鏈接
1、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>

  六、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>

  十、製做下拉框的省市級聯效果
      <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. 分行下載